<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">교재</p>
        <select name="" id="">
            <option value="">A반</option>
        </select>
        </div>
        <div class="content-t">
            <div  class=" flex " style="gap: 50px;">
                <div class="textbook">
                    <div class="box " style="gap: 10px;" @click="goToPage('TextBookDetail')">
                    </div>
                    <div class="text ">
                        <p class="title1" style="color: #fff;">A 교재</p>
                        <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
                            <button>수정</button><p>&#124;</p>
                            <button @click="showConfirm('delete')">삭제</button>
                        </div>
                    </div>
                </div>
                
                <div class="textbook-add">
                        <button  @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
        
                </div>
            </div>
        </div>
        <div v-show="searchOpen" 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="">
                        <button type="button" title="교재 검색">
                            <img src="../../../resources/img/look_t.png" alt="">
                        </button>
                    </div>
                    <div class="flex justify-center ">
                        <button type="button" title="글쓰기" class="new-btn mr10">
                            취소
                        </button>
                        <button type="button" title="글쓰기" class="new-btn">
                            생성
                        </button>
                    </div>
                </div>
            </div>
</template>

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

export default {
    data () {
        return {
            mdiWindowClose: mdiWindowClose,
            showModal: false,
            searchOpen: false,
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        },
        closeModal() {
            this.showModal = false;
        },
        buttonSearch() {
            this.searchOpen = true;
        },
        closeBtn() {
            this.searchOpen = false;

        },
        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
    },
    mounted() {
        console.log('Main2 mounted');
    }
}
</script>