<template>
    <div class="main myplan">
        <div class="yellow-box mt30">
            <div class="title-box flex justify-between align-center">
                <div class="flex justify-between align-center" style="gap: 20px;">
                    <p class="title">단원</p>
                    <div class="row-bd"></div>
                    <div>
                        <p class="title mr40 mb10">{{ unitData.unit_nm || '(단원 이름 데이터 없음)' }}</p>
                        <p class="subtitle">my name is dd</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="title-box flex justify-between mb20 mt30">
            <p class="title">오답노트</p>
        </div>
        <div class="wrap" style="border-radius: 0;">
            <div class="table-wrap">
                <span class="flex align-center title2 gray mb20">
                    이 단원에서 틀린 문제가 총 <p class="title1 black">&nbsp;{{ wrongAnswerNotes.length }}&nbsp;</p> 개 있습니다!
                </span>
                <table>
                    <colgroup>
                        <col style="width: 10%;">
                        <col style="width: 70%;">
                        <col style="width: 15%;">
                    </colgroup>
                    <tr v-for="note in wrongAnswerNotes" :key="note.prblmLogId">
                        <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
                        <td class="text-lf">
                            <p class="title1">{{ note.evalType || '(평가 유형 데이터 없음)' }}</p>
                            <p class="title2">{{ note.prblmExpln || '(기본 문제 설명 데이터 없음)' }}</p>
                        </td>
                        <td>
                            <button type="button" title="" class="new-btn" @click="viewDetail(note)">
                                View Detail
                            </button>
                        </td>
                    </tr>
                </table>
                <!-- <div class="flex justify-end">
                    <button type="button" title="선택하기" class="yellow-btn mt30">
                        선택하기
                    </button>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            currentStdId: "1", // 임시 학생 아이디
            currentUnitId: "1", // 임시 유닛 아이디
            wrongAnswerNotes: [], // 오답 노트 목록 데이터
            unitData: {}, // 단원 정보 데이터
            problemType: null, // 링크될 문제 유형 페이지 이름
        }
    },
    methods: {

        // 오답노트 상세 보기 버튼 클릭
        viewDetail(prblm) {
            console.log('링크될 문제 ID와 문제 타입 ID:', prblm.prblmId, prblm.prblmTypeId);
            this.handleProblemDetail(prblm);
            this.goToPage(this.problemType);
        },

        // 단원 정보를 불러오는 API 호출
        fetchUnitDetail() {
            axios.post('/unit/unitDetail.json', {
                unitId: this.currentUnitId
            })
            .then(response => {
                console.log(response.data[0]);
                if (response.data.length > 0) {
                    this.unitData = response.data[0];
                }
            })
            .catch(error => {
                console.error('단원 정보를 불러오는 중 오류 발생:', error);
            })
        },

        // 오답노트 목록을 가져오는 API 호출
        fetchWrongAnswerNotes() {
            axios.post('/problemLog/getPreviewNoteList.json', {
                stdId: this.currentStdId,
                unitId: this.currentUnitId
            })
            .then(response => {
                console.log(response.data);
                this.wrongAnswerNotes = response.data;
            })
            .catch(error => {
                console.error('오답노트를 불러오는 중 오류 발생:', error);
            });
        },

        // 문제 유형에 따른 라우팅 메서드
        handleProblemDetail(item) {
            // sessionStorage.setItem("prblmId", JSON.stringify(item.prblmId));
            // console.log(item.prblmTypeId);
            if (item.prblmTypeId === "11") {
                this.problemType = "Chapter3_9";
            } else if (item.prblmTypeId === "12") {
                this.problemType = "Chapter3_4";
            } else if (item.prblmTypeId === "4") {
                this.problemType = "Chapter3_3";
            } else if (item.prblmTypeId === "3") {
                this.problemType = "Chapter3_7";
            } else if (item.prblmTypeId === "10") {
                this.problemType = "Chapter3_2";
            } else if (item.prblmTypeId === "14") {
                this.problemType = "Chapter3_12";
            } else {
                this.problemType = "Chapter3";
            }
        },

        goToPage(page) {
            this.$router.push({ name: page });
        }

    },
    watch: {

    },
    computed: {

    },
    components: {
    },
    mounted() {
        console.log('PreviewNote mounted');
        this.fetchUnitDetail();
        this.fetchWrongAnswerNotes();
    }
}
</script>
<style scoped>
.textbox {
    height: 60px;
}

.textbox p {
    font-size: 28px;
    font-weight: bold;
    line-height: 65px;
}

.dropGroup button {
    position: relative;
}

.dropGroup button p {
    font-size: 48px;
}

.dragGroup button p {
    font-size: 48px;
}
</style>