<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">A반</p>
        <select name="" id="">
            <option value="">A 교재</option>
        </select>
    </div>
    <div class="board-wrap" style="    height: calc(100% - 16rem);">
        <label for="" class="title2">단원</label>
        <div class="table-pagination flex mt10">
            <button class="selected-btn">1</button>
            <button>2</button>
            <button>3</button>
        </div>
        <hr>
        <label for="" class="title2 ">1단원 로드맵 등록</label>
        <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" style="height: calc(100% - 23rem);">
            <div class="textbook big book-gray">
                <div class="text ">
                    <p class="title1">학습항목</p>
                </div>
                <div class="box flex-column" style="gap: 30px;">
                    <!-- 지문 -->
                    <div class="textbook book-red">
                        <div class="text ">
                            <p class="title1" style="color: #fff;">지문. 제목</p>
                        </div>
                        <div class="box">
                            
                            <P class="title2 mt10">지문 내용</P>
                        </div>
                    </div>
                    <!-- 단어 -->
                    <div class="textbook ">
                        <div class="text ">
                            <p class="title1" style="color: #fff;">단어장1</p>
                        </div>
                        <div class="box">
                            
                            <P class="title2 mt10">단어1</P>
                        </div>
                    </div>
                    <!-- 문제 -->
                    <div class="textbook book-blue">
                        <div class="text ">
                            <p class="title1" style="color: #fff;">문제1</p>
                        </div>
                        <div class="box">
                            
                            <P class="title2 mt10">문제유형</P>
                            <P class="title2 mt10">정답</P>
                        </div>
                    </div>
                    <!-- 평가 -->
                    <div class="textbook book-navy">
                        <div class="text ">
                            <p class="title1" style="color: #fff;">평가1</p>
                        </div>
                        <div class="box">
                            
                            <P class="title2 mt10">평가 내용</P>
                        </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="goToPage('TextBookDetail')">
            등록
        </button>
    </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';


export default {
    data() {
        return {
            mdilArrowDown: mdilArrowDown,
            mdiMagnify: mdiMagnify,
            mdilArrowRight: mdilArrowRight,
            timer: "00:00",
            progress: 20
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        },
        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();
            }
        },
    },
    watch: {

    },
    computed: {

    },
    components: {
        SvgIcon,
        ProgressBar
    },
    mounted() {
        console.log('Main2 mounted');
    }
}
</script>
<style scoped>
.search-wrap button {
    right: 83rem;
}
</style>