<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">문제 조회</p>
    </div>
    <div class="board-wrap">
        <div class="flex align-center">
            <label for="" class="title2">문제</label>
            <p class="data-wrap">{{ questionExpln }}</p>
        </div>
        <hr>
        <div class="flex align-center">
            <label for="" class="title2">유형</label>
            <p class="data-wrap">{{ questionTypeId }}</p>
        </div>
        <div class="flex align-center">
            <label for="" class="title2">카테고리</label>
            <p class="data-wrap">{{ questionCategoryId }}</p>
        </div>
        <div class="flex align-center">
            <label for="" class="title2">사용자 아이디</label>
            <p class="data-wrap">{{ userId }}</p>
        </div>
        <div class="flex align-center">
            <label for="" class="title2">책 아이디</label>
            <p class="data-wrap">{{ bookId }}</p>
        </div>
        <div class="flex align-center">
            <label for="" class="title2">단원 아이디</label>
            <p class="data-wrap">{{ unitId }}</p>
        </div>
        <hr>
        <div class="flex align-center">
            <label for="" class="title2">문제 점수</label>
            <p class="data-wrap">{{ questionScore }}</p>
        </div>
        <div class="flex align-center">
            <label for="" class="title2">문제 힌트</label>
            <p class="data-wrap">{{ questionHint }}</p>
        </div>
        <div class="flex align-center">
            <label for="" class="title2">문제 해설</label>
            <p class="data-wrap">{{ questionExplanation }}</p>
        </div>
        <hr>
        <div class="flex align-center">
            <label for="" class="title2">첨부파일</label>
            <p class="data-wrap">{{ questionFile }}</p>
        </div>
        <div class="flex align-center mb20">
            <label for="" class="title2">답</label>
            <p class="data-wrap">{{ questionAnswer }}</p>
        </div>
        <div>
            <label for="" class="title2">오답 학생</label>
            <div class="table-wrap mt20">
                <table>
                    <thead>
                        <tr>
                            <td>No.</td>
                            <td>이름</td>
                            <td>학년</td>
                            <td>반</td>
                            <td>오답</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(student, index) in wrongStudents" :key="index" @click="goToPage('noticeDetail')">
                            <td>{{ index + 1 }}</td>
                            <td>{{ student.name }}</td>
                            <td>{{ student.grade }}</td>
                            <td>{{ student.class }}</td>
                            <td>{{ student.wrongAnswer }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="flex justify-between mt50">
        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">
            목록
        </button>
        <div class="flex">
            <button type="button" title="글쓰기" class="new-btn mr10" @click="editQuestion">
                수정
            </button>
            <button type="button" title="글쓰기" class="new-btn" @click="confirmDelete">
                삭제
            </button>
        </div>
    </div>

    <!-- 모달 창 -->
    <div v-if="showModal" class="modal-overlay">
        <div class="modal-content">
            <p>삭제하시겠습니까?</p>
            <button @click="deleteQuestion">예, 삭제</button>
            <button @click="cancelDelete">취소</button>
        </div>
    </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
import axios from 'axios';

export default {
    data() {
        return {
            mdiMagnify: mdiMagnify,
            questionTitle: '샘플 제목',
            questionExpln: '샘플 내용',
            questionFile: null, // 파일 URL을 여기에 저장
            questionAnswer: '샘플 답',
            wrongStudents: [],
            showModal: false,
            parsedData: null, // parsedData 추가
            questionTypeId: '',
            questionCategoryId: '',
            userId: '',
            bookId: '',
            unitId: '',
            questionScore: '',
            questionHint: '',
            questionExplanation: ''
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        },
        editQuestion() {
            // 수정 로직 추가
            console.log('수정 버튼 클릭');
        },
        confirmDelete() {
            this.showModal = true;
        },
        async deleteQuestion() {
            try {
                const prblmId = this.parsedData.prblmId; // this.parsedData 사용
                const response = await axios.post('/problem/deleteProblem.json', { prblmId : prblmId });
                console.log('삭제 완료:', response.data);
                this.showModal = false;
                this.goToPage('QuestionList');
            } catch (error) {
                console.error('삭제 실패:', error);
            }
        },
        cancelDelete() {
            this.showModal = false;
        },
        loadFromLocalStorage() {
            const data = sessionStorage.getItem('selectQuestionList');
            if (data) {
                this.parsedData = JSON.parse(data); // this.parsedData 설정
                console.log('Loaded data from local storage:', this.parsedData);
                
                this.questionExpln = this.parsedData.prblmExpln || '내용 없음';
                this.questionFile = this.parsedData.fileMngId || '첨부파일 없음'; // 파일 경로는 실제 경로에 맞게 수정
                this.questionAnswer = this.parsedData.prblmCmmt || '답 없음';
                this.wrongStudents = this.parsedData.wrongStudents || [];
                this.questionTypeId = this.parsedData.prblmTypeId || '유형 아이디 없음';
                this.questionCategoryId = this.parsedData.prblmCtgryId || '카테고리 아이디 없음';
                this.userId = this.parsedData.userId || '사용자 아이디 없음';
                this.bookId = this.parsedData.bookId || '책 아이디 없음';
                this.unitId = this.parsedData.unitId || '단원 아이디 없음';
                this.questionScore = this.parsedData.prblmScr || '점수 없음',
                this.questionHint = this.parsedData.prblmHint || '힌트 없음',
                this.questionExplanation = this.parsedData.prblmExpln || '해설 없음'
            } else {
                console.log('No data found in local storage');
            }
        },
        downloadFile() {
            window.open(this.questionFile, '_blank');
        },
        getProblemId() {
            // 문제 ID를 얻는 로직을 추가하세요
            return 'sampleProblemId';
        }
    },
    components: {
        SvgIcon
    },
    mounted() {
        this.loadFromLocalStorage();
    }
}
</script>

<style>
    .data-wrap {
        width: -webkit-fill-available;
        padding: 1.2rem;
    }
    .download-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        text-decoration: none;
        font-size: 1rem;
    }
    .download-btn:hover {
        background-color: #0056b3;
    }
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
    }
    .modal-content button {
        margin: 10px;
        padding: 10px 20px;
        cursor: pointer;
    }
</style>
