<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">단어장 등록</p>
    </div>
    <div class="title2 gray flex mb40">{{ titleMessage }}</div>
    <div class="board-wrap">
        <div class="flex align-center mb20">
            <label for="" class="title2">지문</label>
            <select v-model="selectedTextId" class="mr10 data-wrap">
                <option v-for="text in texts" :key="text.textId" :value="text.textId">
                    {{ text.textTtl }}
                </option>
            </select>
        </div>
        <div class="flex align-center mb20">
            <label for="" class="title2">단어장 타입</label>
            <select v-model="selectedWdBookTypeId" class="mr10 data-wrap">
                <option value="1">단어장 (일반)</option>
                <option value="2">단어장 (스피킹)</option>
                <option value="3">단어장 (숏폼)</option>
                <option value="4">단어장 (카드 뒤집기)</option>
                <option value="5">단어장 (카드 맞추기)</option>
            </select>
        </div>
        <div class="flex align-center">
            <label for="" class="title2">단어 목록</label>
            <div class="flex-column" style="gap: 10px;">
                <div class="flex align-center" style="gap: 10px;">
                    <input type="text" class="data-wrap" placeholder="영어">
                    <input type="text" class="data-wrap" placeholder="한글">
                    <button type="button" @click="addWord">
                        <img src="../../../resources/img/btn39_120t_normal.png" alt="">

                    </button>
                </div>

                <!-- 여기에 단어장에 소속될 단어들 태그 형태 리스트 표시할 예정 -->

            </div>

        </div>
    </div>
    <div class="flex justify-between mt50">
        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')">
            목록
        </button>
        <div class="flex">
            <button type="button" title="글쓰기" class="new-btn mr10">
                취소
            </button>
            <button type="button" title="글쓰기" class="new-btn">
                등록
            </button>
        </div>
    </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import axios from "axios";

export default {
    data() {
        return {
            selectedBookId: null, // 추가될 단어장의 소속 책
            selectedUnitId: null, // 추가될 단어장의 소속 단원
            bookName: '', // 책 이름
            unitName: '', // 단원 이름
            titleMessage: '', // 등록 경로 메시지
            texts: [], // 지문 목록
            selectedTextId: null, // 선택된 지문 ID
            selectedWdBookTypeId: '1', // 선택된 단어장 타입 ID
            newWord: { eng: '', kor: '' }, // 입력된 새 단어
            words: [] // 단어 목록
        }
    },
    methods: {

        // 책과 단원 이름을 가져오는 메서드
        fetchBookAndUnitNames() {
            // 책 이름 가져오기
            axios.post('/book/findAll.json')
                .then(response => {
                    const book = response.data.find(book => book.book_id === this.selectedBookId);
                    if (book) {
                        this.bookName = book.book_nm;
                        this.updateTitleMessage(); // 책 이름을 가져온 후에 제목 업데이트
                    }
                })
                .catch(error => {
                    console.error("책 이름 가져오기 실패: ", error);
                });

            // 단원 이름 가져오기
            axios.post('/unit/unitList.json', { bookId: this.selectedBookId })
                .then(response => {
                    const unit = response.data.find(unit => unit.unitId === this.selectedUnitId);
                    if (unit) {
                        this.unitName = unit.unitName;
                        this.updateTitleMessage(); // 단원 이름을 가져온 후에 제목 업데이트
                    }
                })
                .catch(error => {
                    console.error("단원 이름 가져오기 실패: ", error);
                });
        },

        // 등록 경로 메시지를 업데이트하는 메서드
        updateTitleMessage() {
            this.titleMessage = `[${this.bookName}]책 > [${this.unitName}]단원`;
        },

        // 지문 목록을 가져오는 메서드
        fetchTexts() {
            axios.post('/text/selectTextList.json', {
                page: 1,
                pageSize: 100
            })
            .then(response => {
                this.texts = response.data.texts;
            })
            .catch(error => {
                console.error("지문 목록 가져오기 실패: ", error);
            });
        },

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

    },
    watch: {

        // 데이터 변경 시 등록 경로 메시지 업데이트
        selectedBookId() {
            this.fetchBookAndUnitNames();
        },

        selectedUnitId() {
            this.fetchBookAndUnitNames();
        }

    },
    computed: {

    },
    components: {
        SvgIcon
    },
    mounted() {
        // 쿼리 전달 받기
        this.selectedBookId = this.$route.query.selectedBookId || null;
        this.selectedUnitId = this.$route.query.selectedUnitId || null;
        console.log('VocaInsert mounted');
        this.fetchTexts();
        this.fetchBookAndUnitNames();
    }
}
</script>