<template>
    <div class="title-box flex justify-between mb40">
        <label for="" class="title2 ">로드맵 등록</label>
        <select name="" id="" v-model="selectedBook" @change="fetchUnits">
            <option value="" disabled selected>교재를 선택하세요</option>
            <option v-for="book in books" :key="book.book_id" :value="book.book_id">
                {{ book.book_nm }}
            </option>
        </select>
    </div>
    <div class="board-wrap" style="height: calc(100% - 13rem);">
        <div class="content-t">

            <label for="" class="title2">단원</label>
            <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
                <button v-for="(unit, index) in units" :key="index"
                    :class="{ 'selected-btn': selectedUnit === unit.unitId }" @click="selectUnit(unit.unitId)">
                    {{ unit.unitName }}
                </button>
            </div>
            <hr>
            <div class="search-wrap flex mb20 mt30">
                <!--
            <select v-model="selectedSearchOption" class="mr10 data-wrap">
                <option value="bbsTtl">제목</option>
                <option value="bbsCnt">내용</option>
                <option value="userNm">작성자</option>
                <option value="bbsCls">카테고리</option>
            </select>
            <input v-model="searchKeyword" type="text" placeholder="검색하세요." @keyup.enter="boardDataSearch" />
            <button type="button" @click="boardDataSearch()" title="게시글 검색">
                <img src="../../../resources/img/look_t.png" alt="" />
            </button>
            -->
            </div>
            <div class="flex justify-between align-center mypage mt10">
                <div class="textbook big book-gray">
                    <div class="text ">
                        <p class="title1">학습 로드맵</p>
                    </div>
                    <div class="box flex-column" style="gap: 10px;">
                        <!-- 지문 -->
                        <div class="textbook book-red">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">지문 1</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('0')">
                                    지문 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>지문</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(text, index) in RoadMap[0]" :key="text.textId">
                                            <td>
                                                <P class="title2 mt10">{{ text.textTtl }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('0', text.textId)">
                                                    삭제
                                                </button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- 단어 -->
                        <div class="textbook ">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">단어장 1</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('1')">
                                    단어장 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>단어장</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(wordBook, index) in RoadMap[1]" :key="wordBook.wdBookId">
                                            <td>
                                                <P class="title2 mt10">{{ wordBook.textTtl }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('1', wordBook.wdBookId)">
                                                    삭제
                                                </button></td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- 문제 -->
                        <div class="textbook book-blue">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">문제 1</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('2')">
                                    문제 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>문제</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(prblm, index) in RoadMap[2]" :key="prblm.prblmId">
                                            <td>
                                                <P class="title2 mt10">{{ prblm.prblmExpln }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                @click="deleteRoadMap('2', prblm.prblmId)">
                                                삭제
                                            </button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="textbook book-blue">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">문제 2</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('3')">
                                    문제 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>문제</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(prblm, index) in RoadMap[3]" :key="prblm.prblmId">
                                            <td>
                                                <P class="title2 mt10">{{ prblm.prblmExpln }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('3', prblm.prblmId)">
                                                    삭제
                                                </button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="textbook book-red">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">지문 2</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('4')">
                                    지문 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>지문</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(text, index) in RoadMap[4]" :key="text.textId">
                                            <td>
                                                <P class="title2 mt10">{{ text.textTtl }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('4', text.textId)">
                                                    삭제
                                                </button></td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="textbook ">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">단어장 2</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('5')">
                                    단어장 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>지문</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(wordBook, index) in RoadMap[5]" :key="wordBook.wdBookId">
                                            <td>
                                                <P class="title2 mt10">{{ wordBook.textTtl }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('5', wordBook.wdBookId)">
                                                    삭제
                                                </button></td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="textbook book-blue">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">문제 3</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('6')">
                                    문제 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>문제</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(prblm, index) in RoadMap[6]" :key="prblm.prblmId">
                                            <td>
                                                <P class="title2 mt10">{{ prblm.prblmExpln }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('6', prblm.prblmId)">
                                                    삭제
                                                </button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- 평가 -->
                        <div class="textbook book-navy">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">중간 평가</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('7')">
                                    중간평가 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>중간 평가 문항 갯수</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(evaluation, index) in RoadMap[7]" :key="evaluation.evalId">
                                            <td>
                                                <P class="title2 mt10">{{ evaluation.problemCount }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('7', evaluation.evalId)">
                                                    삭제
                                                </button></td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="textbook book-red">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">지문 3</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('8')">
                                    지문 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>지문</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(text, index) in RoadMap[8]" :key="text.textId">
                                            <td>
                                                <P class="title2 mt10">{{ text.textTtl }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('8', text.textId)">
                                                    삭제
                                                </button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="textbook ">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">단어장 3</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('9')">
                                    단어장 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>지문</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(wordBook, index) in RoadMap[9]" :key="wordBook.wdBookId">
                                            <td>
                                                <P class="title2 mt10">{{ wordBook.textTtl }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('9', wordBook.wdBookId)">
                                                    삭제
                                                </button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="textbook book-navy">
                            <div class="text ">
                                <p class="title1" style="color: #fff;">최종 평가</p>
                            </div>
                            <div class="box">
                                <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('10')">
                                    최종평가 추가
                                </button>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>최종 평가 문항 갯수</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(evaluation, index) in RoadMap[10]" :key="evaluation.evalId">
                                            <td>
                                                <P class="title2 mt10">{{ evaluation.problemCount }}</P>
                                            </td>
                                            <td><button type="button" title="글쓰기" class="new-btn"
                                                    @click="deleteRoadMap('10', evaluation.evalId)">
                                                    삭제
                                                </button></td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <!--
            <div class="textbook big book-gray">
                <div class="text ">
                    <p class="title1">로드맵</p>
                </div>
                <div class="box flex-column" style="gap: 10px;">
                    <div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div>
                    <div class="text-ct"><svg-icon type="mdi" :path="mdilArrowDown" style="width: 40px; height: 40px; color: #8C8E92;"></svg-icon></div>
                    <div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div>
                    <div class="text-ct"><svg-icon type="mdi" :path="mdilArrowDown" style="width: 40px; height: 40px; color: #8C8E92;"></svg-icon></div>
                    <div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div>
                </div>
            </div>
            -->
            </div>

        </div>
        <div class="flex justify-end mt30" style="gap: 10px;">
            <!-- <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
            추가
        </button> -->
            <button type="button" title="" class="new-btn" @click="goToPage('TextBookDetail')">
                취소
            </button>
            <button type="button" title="" class="new-btn" @click="postRoadMaps">
                등록
            </button>
        </div>
    </div>
    <!--지문 등록 팝업-->
    <div v-show="searchTextOpen" class="popup-wrap">
        <div class="popup-box ">
            <div class="flex justify-between mb30">
                <p class="popup-title">지문 검색</p>
                <button type="button" class="popup-close-btn" @click="closeBtn">
                    <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

                </button>
            </div>
            <div class="search-wrap mb30">
                <input type="text" class="data-wrap" placeholder="" v-model="searchKeyword">
                <button type="button" @click="fetchText">
                    <img src="../../../resources/img/look_t.png" alt="">
                </button>
            </div>
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <td></td>
                            <td>No.</td>
                            <td>제목</td>
                            <td>내용</td>
                            <td>등록일</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(post, index) in posts" :key="index" class="post">
                            <td><input type="checkbox" :checked="post.check"
                                @change="selectText(post)"></td>
                            <td>{{ index + 1 }}</td>
                            <td>{{ post.textTtl.slice(0, 20) }}{{ post.textTtl.length > 20 ? '...' : '' }}</td>
                            <td>{{ post.textCnt.slice(0, 20) }}{{ post.textCnt.length > 20 ? '...' : '' }}</td>
                            <td>{{ post.regDt }}</td>
                        </tr>
                    </tbody>
                </table>
                <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
                    <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
                        <img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
                    </button>
                    <button v-for="page in paginationButtons" :key="page" @click="changePage(page)"
                        :class="{ 'selected-btn': currentPage === page }">
                        {{ page }}
                    </button>
                    <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
                        <img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
                    </button>
                </article>

            </div>
            <div class="flex justify-end ">
                <button type="button" title="" class="new-btn mr10" @click="closeBtn">
                    취소
                </button>
                <button type="button" title="" class="new-btn" @click="insertRoadMap2">
                    등록
                </button>
            </div>
        </div>
    </div>

    <!--문제 등록 팝업-->
    <div v-show="searchPrblmOpen" class="popup-wrap">
        <div class="popup-box ">
            <div class="flex justify-between mb30">
                <p class="popup-title">문제 검색</p>
                <button type="button" class="popup-close-btn" @click="closeBtn">
                    <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

                </button>
            </div>
            <div class="search-wrap mb30">
                <input type="text" class="data-wrap" placeholder="" v-model="searchKeyword">
                <button type="button" @click="fetchProblems">
                    <img src="../../../resources/img/look_t.png" alt="">
                </button>
            </div>
            <div class="table-wrap">
                <table>
                    <colgroup>
                        <col style="width: 10%;">
                        <col style="width: 10%;">
                        <col style="width: 30%;">
                        <col style="width: 10%;">
                        <col style="width: 10%;">
                        <col style="width: 10%;">
                        <col style="width: 20%;">
                    </colgroup>
                    <thead>
                        <tr>
                            <td></td>
                            <td>No.</td>
                            <td>문제</td>
                            <td>유형</td>
                            <td>점수</td>
                            <td>작성자</td>
                            <td>등록일</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(problem, index) in problems" :key="problem.prblmId">
                            <td><input type="checkbox" v-model="problem.check"></td>
                            <td>{{ index + 1 }}</td>
                            <td>{{ problem.prblmExpln }}</td>
                            <td>{{ problem.prblmTypeNm }}</td>
                            <td>{{ problem.prblmScr }}</td>
                            <td>{{ problem.userId }}</td>
                            <td>{{ problem.regDt }}</td>
                        </tr>
                    </tbody>
                </table>
                <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
                    <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
                        <img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
                    </button>
                    <button v-for="page in paginationButtons" :key="page" @click="changePage(page)"
                        :class="{ 'selected-btn': currentPage === page }">
                        {{ page }}
                    </button>
                    <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
                        <img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
                    </button>
                </article>

            </div>
            <div class="flex justify-end ">
                <button type="button" title="" class="new-btn mr10" @click="closeBtn">
                    취소
                </button>
                <button type="button" title="" class="new-btn" @click="insertRoadMap">
                    등록
                </button>
            </div>
        </div>
    </div>

    <!--단어장 등록 팝업-->
    <div v-show="searchWordOpen" class="popup-wrap">
        <div class="popup-box ">
            <div class="flex justify-between mb30">
                <p class="popup-title">단어장 검색</p>
            </div>
            <button type="button" class="popup-close-btn" @click="closeBtn">
                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
            </button>
            <select v-model="searchType" class="mr10 data-wrap">
                <option value="text">지문</option>
                <option value="word">단어</option>
            </select>
            <div class="search-wrap mb30">
                <input type="text" class="data-wrap" placeholder="" v-model="searchKeyword">
                <button type="button" @click="searchWordBooks">
                    <img src="../../../resources/img/look_t.png" alt="">
                </button>

            </div>
            <div class="table-wrap">
                <table>
                    <thead>
                        <td></td>
                        <td>No.</td>
                        <td>지문</td>
                        <td>단어 목록</td>
                        <td>작성자</td>
                    </thead>
                    <tbody>
                        <tr v-for="(wordBook, index) in wordBooks" :key="wordBook.wdBookId">
                            <td><input type="checkbox" v-model="wordBook.check"></td>
                            <td>{{ index + 1 }}</td>
                            <td>{{ wordBook.textTtl }}</td>
                            <td>{{ wordBook.wordsPreview }}</td>
                            <td>{{ wordBook.userNm }}</td>
                        </tr>
                    </tbody>
                </table>
                <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
                    <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
                        <img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
                    </button>
                    <button v-for="page in paginationButtons" :key="page" @click="changePage(page)"
                        :class="{ 'selected-btn': currentPage === page }">
                        {{ page }}
                    </button>
                    <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
                        <img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
                    </button>
                </article>

            </div>
            <div class="flex justify-end ">
                <button type="button" title="" class="new-btn mr10" @click="closeBtn">
                    취소
                </button>
                <button type="button" title="" class="new-btn" @click="insertRoadMap3">
                    등록
                </button>
            </div>
        </div>
    </div>

    <!--평가 등록 팝업-->
    <div v-show="searchEvalOpen" class="popup-wrap">
        <div class="popup-box ">
            <div class="flex justify-between mb30">
                <p class="popup-title">문제 검색</p>
                <button type="button" class="popup-close-btn" @click="closeBtn">
                    <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                </button>
            </div>
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <td></td>
                            <td>No.</td>
                            <td>중간/최종</td>
                            <td>문항 갯수</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(evaluation, index) in evals" :key="evaluation.evalId">
                            <td><input type="checkbox" :checked="evaluation.check"
                                    @change="selectEvaluation(evaluation)">
                            </td>
                            <td>{{ index + 1 }}</td>
                            <td>{{ evaluation.evalType }}</td>
                            <td>{{ evaluation.problemCount }}</td>
                        </tr>
                    </tbody>
                </table>
                <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
                    <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
                        <img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
                    </button>
                    <button v-for="page in paginationButtons" :key="page" @click="changePage(page)"
                        :class="{ 'selected-btn': currentPage === page }">
                        {{ page }}
                    </button>
                    <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
                        <img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
                    </button>
                </article>

            </div>
            <div class="flex justify-end ">
                <button type="button" title="" class="new-btn mr10" @click="closeBtn">
                    취소
                </button>
                <button type="button" title="" class="new-btn" @click="insertRoadMap4">
                    등록
                </button>
            </div>
        </div>
    </div>

</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdilArrowRight } from '@mdi/js';
import { mdilArrowDown } from '@mdi/light-js';
import ProgressBar from '../../component/ProgressBar.vue';
import axios from 'axios';


export default {
    data() {
        return {
            mdilArrowDown: mdilArrowDown,
            mdiMagnify: mdiMagnify,
            mdilArrowRight: mdilArrowRight,
            timer: "00:00",
            progress: 20,

            books: [],
            units: [],
            posts: [],
            RoadMap: [],
            problems: [],
            wordBooks: [],
            evals: [],
            selectedBook: "",
            selectedUnit: null,

            currentPage: 1,
            pageSize: 5,
            totalPosts: 0,
            searchOption: '',
            searchKeyword: '',
            searchType: 'text',
            searchPrblmOpen: false,
            searchTextOpen: false,
            searchWordOpen: false,
            searchEvalOpen: false,

            selectedPop: 0,
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page, query: { unit_id: this.selectedUnit, book_id: this.selectedBook } });
        },
        increaseProgress() {
            if (this.progress < 100) {
                this.progress += 10;
            }
        },
        showConfirm(type) {
            let message = '';
            if (type === 'delete') {
                message = '삭제하시겠습니까?';
            } else if (type === 'reset') {
                message = '초기화하시겠습니까?';
            } else if (type === 'save') {
                message = '등록하시겠습니까?';
            }

            if (confirm(message)) {
                this.goBack();
            }
        },

        // 모달 열기
        buttonSearch(page) {
            this.selectedPop = page;
            if (this.selectedPop === '2' || this.selectedPop === '3' || this.selectedPop === '6') {
                this.searchPrblmOpen = true;
                this.fetchProblems();
            } else if (this.selectedPop === '0' || this.selectedPop === '4' || this.selectedPop === '8') {
                this.searchTextOpen = true;
                this.fetchText();
            } else if (this.selectedPop === '1' || this.selectedPop === '5' || this.selectedPop === '9') {
                this.searchWordOpen = true;
                this.fetchWords();
            } else if (this.selectedPop === '7') {
                this.searchEvalOpen = true;
                this.fetchEval('중간평가');
            } else if (this.selectedPop === '10') {
                this.searchEvalOpen = true;
                this.fetchEval('최종평가');
            }
        },

        // 모달 닫기
        closeBtn() {
            this.problems = [];
            this.posts = [];
            this.wordBooks = [];
            this.evals = [];

            this.selectedPop = '';

            this.currentPage = 1;
            this.pageSize = 5;
            this.totalPosts = 0;

            this.searchPrblmOpen = false;
            this.searchTextOpen = false;
            this.searchWordOpen = false;
            this.searchEvalOpen = false;
        },

        // 로드맵 지정된 것 삭제
        deleteRoadMap(page, id){
            if (page === '2' || page === '3' || page === '6') {
                this.RoadMap[page] = this.RoadMap[page].filter(prblm => prblm.prblmId !== id);
            } else if (page === '0' || page === '4' || page === '8') {
                this.RoadMap[page] = this.RoadMap[page].filter(text => text.textId !== id);
            } else if (page === '1' || page === '5' || page === '9') {
                this.RoadMap[page] = this.RoadMap[page].filter(wordBook => wordBook.wdBookId !== id);
            } else if (page === '7' || page === '10') {
                this.RoadMap[page] = this.RoadMap[page].filter(evaluation => evaluation.evalId !== id);
            } 
        },

        fetchBooks() {
            axios({
                url: "/book/findAll.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
            })
                .then(response => {
                    console.log(response.data)
                    this.books = response.data;

                })
                .catch(error => {
                    console.error("fetchBooks - error: ", error);
                    alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
                });
        },
        fetchUnits() {
            if (!this.selectedBook) return;

            axios({
                url: "/unit/unitList.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    "bookId": this.selectedBook
                },
            })
                .then(response => {
                    console.log(response.data)
                    this.units = response.data;
                })
                .catch(error => {
                    console.error("fetchUnits - error: ", error);
                    alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
                });
        },

        // 단원을 선택했을 때 호출되는 메서드
        selectUnit(unitId) {
            this.selectedUnit = unitId;
            //this.fetchData();
        },

        // 문제 가져오기
        async fetchProblems(page = 1) {
            try {
                const response = await axios.post('/problem/problemList.json', {
                    option: this.searchOption,
                    keyword: this.searchKeyword,
                    unitId: this.selectedUnit,
                    pageSize: this.pageSize,
                    startIndex: (page - 1) * 5
                });
                this.problems = response.data.problems;
                this.totalPosts = response.data.totalProblem;

                this.currentPage = page;
            } catch (error) {
                console.error('문제 목록을 불러오는 중 오류가 발생했습니다.', error);
            }
        },
        changePage(page) {
            if (page < 1 || page > this.totalPages) return;
            this.currentPage = page;
            this.fetchProblems(page);
        },

        // 지문 가져오기
        fetchText() {
            const idx = (this.currentPage - 1) * this.pageSize;
            axios({
                url: "/text/textSearch.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    "option": this.option,
                    "keyword": this.keyword,
                    "pageSize": this.pageSize,
                    "startIndex": idx,
                    "unitId": this.selectedUnit
                },
            })
                .then(response => {
                    this.posts = response.data.list;
                    if (!this.searching || this.keyword === "") {
                        this.totalPosts = response.data.totalText;
                    } else if (this.searching) {
                        this.totalPosts = response.data.resultCount;
                    }
                })
                .catch(error => {
                    console.error("fetchData - error: ", error);
                    alert("검색 중 오류가 발생했습니다.");
                });
        },

        // 단어장 목록 가져오기
        fetchWords() {
            const vm = this;
            axios({
                url: "/wordbook/findByUnitId.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    unitId: vm.selectedUnit,
                    page: vm.currentPage,
                    pageSize: vm.pageSize
                },
            })
                .then(function (response) {
                    console.log("dataList - response: ", response.data);
                    const wordBooks = response.data.wordBooks;
                    vm.totalPosts = response.data.totalWordBooks;

                    // 지문 제목 및 단어 목록 가져오기
                    const fetchDataPromises = wordBooks.map(wordBook => {
                        const textTitlePromise = axios.post("/text/selectOneText.json", {
                            textId: wordBook.textId
                        }).then(textResponse => {
                            wordBook.textTtl = textResponse.data[0].text_ttl;
                        }).catch(error => {
                            console.error(`${wordBook.textId}으로 지문 제목 가져오기 실패: `, error);
                            wordBook.textTtl = '제목값없음'; // 오류 시 기본값 설정
                        });

                        const wordsPromise = axios.post("/word/getWordsByBookId.json", {
                            wdBookId: wordBook.wdBookId
                        }).then(wordsResponse => {
                            const words = wordsResponse.data.map(word => word.wdNm);
                            wordBook.wordsPreview = vm.generateWordsPreview(words);
                        }).catch(error => {
                            console.error(`${wordBook.wdBookId}으로 단어 목록 가져오기 실패: `, error);
                            wordBook.wordsPreview = '단어값없음'; // 오류 시 기본값 설정
                        });

                        return Promise.all([textTitlePromise, wordsPromise]);
                    });

                    // 모든 데이터 가져오기 작업이 완료되면 dataList에 데이터 설정
                    Promise.all(fetchDataPromises).then(() => {
                        vm.wordBooks = wordBooks;
                    });
                })
                .catch(function (error) {
                    console.log("dataList - error: ", error);
                    alert("단어장 목록 조회에 오류가 발생했습니다.");
                });
        },

        // 단어장 검색
        searchWordBooks() {
            const vm = this;
            let url = '';
            let data = {};

            if (this.searchType === 'text') {
                // 지문으로 검색
                url = '/wordbook/findByTextTitle.json';
                data = {
                    unitId: vm.selectedUnit,
                    textTitle: vm.searchKeyword,
                    page: vm.currentPage,
                    pageSize: vm.pageSize
                };
            } else if (this.searchType === 'word') {
                // 단어로 검색
                url = '/wordbook/findByWord.json';
                data = {
                    unitId: vm.selectedUnit,
                    word: vm.searchKeyword,
                    page: vm.currentPage,
                    pageSize: vm.pageSize
                };
            }

            axios.post(url, data)
                .then(function (response) {
                    console.log("searchWordBooks - response: ", response.data);
                    const wordBooks = response.data.wordBooks;
                    vm.totalPosts = response.data.totalWordBooks;

                    // 지문 제목 및 단어 목록 가져오기
                    const fetchDataPromises = wordBooks.map(wordBook => {
                        const textTitlePromise = axios.post("/text/selectOneText.json", {
                            textId: wordBook.textId
                        }).then(textResponse => {
                            wordBook.textTtl = textResponse.data[0].text_ttl;
                        }).catch(error => {
                            wordBook.textTtl = '제목값없음'; // 오류 시 기본값 설정
                        });

                        const wordsPromise = axios.post("/word/getWordsByBookId.json", {
                            wdBookId: wordBook.wdBookId
                        }).then(wordsResponse => {
                            const words = wordsResponse.data.map(word => word.wdNm);
                            wordBook.wordsPreview = vm.generateWordsPreview(words);
                        }).catch(error => {
                            wordBook.wordsPreview = '단어값없음'; // 오류 시 기본값 설정
                        });

                        return Promise.all([textTitlePromise, wordsPromise]);
                    });

                    // 모든 데이터 가져오기 작업이 완료되면 dataList에 데이터 설정
                    Promise.all(fetchDataPromises).then(() => {
                        vm.wordBooks = wordBooks;
                    });
                })
                .catch(function (error) {
                    console.log("searchWordBooks - error: ", error);
                    alert("단어장 검색에 오류가 발생했습니다.");
                });
        },

        // 단어 목록 생략 String 생성 메서드
        generateWordsPreview(words) {
            const maxLength = 20; // 최대 표시 길이 설정
            const wordString = words.join(', ');

            if (wordString.length > maxLength) {
                return wordString.substring(0, maxLength) + '...';
            } else {
                return wordString;
            }
        },

        // 평가 정보 가져오기
        fetchEval(evalType) {
            const idx = (this.currentPage - 1) * this.pageSize;

            let option = null;
            let searchKeyword = null;

            if (evalType !== '') {
                option = 'eval_type';
                searchKeyword = evalType;
            }

            axios({
                url: "/evaluation/evaluationUnitList.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    "option": option,
                    "keyword": searchKeyword,
                    "pageSize": this.pageSize,
                    "startIndex": idx,
                    "unitId": this.selectedUnit
                },
            })
                .then(response => {
                    this.evals = response.data;
                })
                .catch(error => {
                    console.error("fetchData - error: ", error);
                    alert("검색 중 오류가 발생했습니다.");
                });
        },

        // 평가는 1개만 선택되도록 제한
        selectEvaluation(selectedEvaluation) {
            this.evals.forEach(evaluation => {
                evaluation.check = false; // 모든 체크 해제
            });
            selectedEvaluation.check = true; // 선택한 항목만 체크
        },

        // 지문은 1개만 선택되도록 제한
        selectText(selectedText) {
            this.posts.forEach(text => {
                text.check = false; // 모든 체크 해제
            });
            selectedText.check = true; // 선택한 항목만 체크
        },


        // 팝업 문제 데이터 가져오기
        insertRoadMap() {
            const selectedProblems = this.problems.filter(problem => problem.check);
            // RoadMap의 해당 인덱스가 초기화되어 있는지 확인
            if (!this.RoadMap[this.selectedPop]) {
                this.RoadMap[this.selectedPop] = []; // 초기화
            }


            // 이미 있는 데이터인지 확인
            selectedProblems.forEach(problem => {
                const exists = this.RoadMap[this.selectedPop].some(existingProblem => existingProblem.prblmId === problem.prblmId);
                if (!exists) {
                    this.RoadMap[this.selectedPop].push(problem); // 존재하지 않으면 추가
                }
            });
            this.closeBtn();
        },

        // 팝업 지문 데이터 가져오기
        insertRoadMap2() {
            const selectedTexts = this.posts.filter(post => post.check);
            this.RoadMap[this.selectedPop] = selectedTexts;
            this.closeBtn();
        },
        // 팝업 단어장 데이터 가져오기
        insertRoadMap3() {
            const selectedBooks = this.wordBooks.filter(wordBook => wordBook.check);

            if (!this.RoadMap[this.selectedPop]) {
                this.RoadMap[this.selectedPop] = [];
            }

            // 이미 있는 데이터인지 확인
            selectedBooks.forEach(wordBook => {
                const exists = this.RoadMap[this.selectedPop].some(existingBook => existingBook.wdBookId === wordBook.wdBookId);
                if (!exists) {
                    this.RoadMap[this.selectedPop].push(wordBook); // 존재하지 않으면 추가
                }
            });
            this.closeBtn();
        },

        // 평가 데이터 가져오기
        insertRoadMap4() {
            const selectedEval = this.evals.filter(evaluation => evaluation.check);
            this.RoadMap[this.selectedPop] = selectedEval;
            this.closeBtn();
        },

        // 로드맵 등록하기
        postRoadMaps(){
            console.log(this.RoadMap);

        },

        // prblmbook 만들어 id 가져오기

        // wordcontent 만들어 id 가져오기

    },
    watch: {

    },
    computed: {
        totalPages() {
            return Math.ceil(this.totalPosts / this.pageSize);
        },
        paginationButtons() {
            let start = Math.max(0, this.currentPage - 2);
            let end = Math.min(start + 5, this.totalPages);

            if (end - start < 5) {
                start = Math.max(0, end - 5);
            }

            return Array.from({ length: end - start }, (_, i) => start + i + 1);
        },

        startIndex() {
            return this.currentPage * this.itemsPerPage;
        }


    },
    components: {
        SvgIcon,
        ProgressBar
    },
    mounted() {
        this.selectedUnit = this.$route.query.unit_id || '';
        this.selectedBook = this.$route.query.book_id || '';

        this.fetchBooks();
        this.fetchUnits();

    }
}
</script>
<style scoped>
.search-wrap button {
    right: 83rem;
}
</style>