<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">단어장 등록</p>
    </div>
    <div class="board-wrap">
        <div class="flex align-center mb20">
            <label for="" class="title2">지문</label>
            <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>
        </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="addThesis">
                        <img src="../../../resources/img/btn39_120t_normal.png" alt="">

                    </button>
                </div>
                <div class="flex align-center " style="gap: 10px;" v-for="(thesis, index) in thesised" :key="thesis.id">
                    <input type="text" class="data-wrap" placeholder="영어">
                    <input type="text" class="data-wrap" placeholder="한글">
                    <button type="button" @click="removeThesis(thesis.id)">
                        <img src="../../../resources/img/btn38_120t_normal.png" alt="">
                    </button>

                </div>
            </div>

        </div>
    </div>
    <div class="flex justify-between mt50">
        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
            목록
        </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 { mdiMagnify, mdiPlusCircleOutline, mdiWindowClose } from '@mdi/js';


export default {
    data() {
        return {
            thesised: [],
            mdiPlusCircleOutline: mdiPlusCircleOutline,
            mdiMagnify: mdiMagnify,
            mdiWindowClose: mdiWindowClose,
        }
    },
    methods: {
        // 논문실적 버튼 추가
        addThesis() {
            // 고유 ID로 현재 시간의 타임스탬프를 사용
            const uniqueId = Date.now();
            this.thesised.push({
                id: uniqueId, // 고유 ID 추가

            });
        },
        removeThesis(thesisId) {
            // ID를 기준으로 교육 정보 객체를 찾아서 삭제
            const index = this.thesised.findIndex(thesis => thesis.id === thesisId);
            if (index !== -1) {
                this.thesised.splice(index, 1);
            }
        },
        // 
        goToPage(page) {
            this.$router.push({ name: page });
        },
    },
    watch: {

    },
    computed: {

    },
    components: {
        SvgIcon
    },
    mounted() {
        console.log('Main2 mounted');
    }
}
</script>