<template>
    <div class=" main">
        <div class="myplan">
            <div class="title-box flex justify-between mb40">
            <p class="title">오늘 공부를 계획해봅시다.</p>
            <!-- <select name="" id="">
                <option value="">A반</option>
            </select> -->
        </div>
            <div class="wrap">
                <p class="title1"> 학습 교재를 선택합시다.</p>
                <div class="search-wrap flex justify-end mb20 mt20">
                    <!-- <select name="" id="" class="mr10 data-wrap">
                       <option value="">전체</option>
                   </select> -->
                    <input class="data-wrap" type="text" placeholder="검색하세요.">
                    <button type="button" title="위원회 검색">
                        <img src="../../../resources/img/look_t.png" alt="">
                    </button>
                </div>
                <div class="table-wrap">
                    <table>
                        <colgroup>
                            <col style="width: 5%;">
                            <col style="width: 10%;">
                            <col style="width: 70%;">
                            <col style="width: 15%;">
                        </colgroup>
                        <tr>
                            <td><input type="checkbox" class="ui-checkbox mr10"></td>
                            <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
                            <td class="text-lf">
                                <p class="title1">the best</p>
                                <p class="title2">wirte a</p>
                            </td>
                            <td> <button type="button" title="확인" class="new-btn" @click="buttonSearch">
                                    시간입력
                                </button></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="ui-checkbox mr10"></td>
                            <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
                            <td class="text-lf">
                                <p class="title1">the best</p>
                                <p class="title2">wirte a</p>
                            </td>
                            <td> <button type="button" title="확인" class="new-btn" @click="buttonSearch">
                                    시간입력
                                </button></td>
                        </tr>
                    </table>
                    <div class="flex justify-end">
                        <button type="button" title="선택하기" class="yellow-btn mt30">
                            선택하기
                        </button>
                    </div>
                </div>
            </div>
            <div class="wrap mt30">
                <p class="title1 mb20"> AI 맞춤형 학습 코스는 어떨까요?</p>
                <div class="imgGroup flex justify-between">
                    <div class="text-lf">
                        <img src="../../../resources/img/img215_22s.png" alt="">
                        <p class="title2 mt10">추천 학습 단원</p>
                    </div>
                    <div class="text-lf">
                        <img src="../../../resources/img/img215_22s.png" alt="">
                        <p class="title2 mt10">추천 학습 단원</p>
                    </div>
                    <div class="text-lf">
                        <img src="../../../resources/img/img215_22s.png" alt="">
                        <p class="title2 mt10">추천 학습 단원</p>
                    </div>
                </div>
            </div>
            <div class="wrap mt30">
                <p class="title1 mb20">학습일정을 확인해봅시다. </p>
                <div class="flex-column" style="gap: 20px;">
                    <div class=" flex justify-between align-center " style="gap: 70px;">
                        <div><img src="../../../resources/img/img217_22s.png" alt=""></div>
                        <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }" @click="toggleClicked" style="width: 100%;">
                            <div class="text-lf flex justify-between align-center ">
                               <div>
                                    <div class="flex align-center mb10" style="gap: 10px;">
                                        <p class="title2"><em class="gray-bd">1교시</em></p>
                                        <p class="title1">9:00</p>
                                        <p class="title1">~</p>
                                        <p class="title1">10:00</p>
                                    </div>
                                    <div class="title-box  mb10"> <span class="title">the best</span></div>
                                    <p class="title2">wirte a</p>
                               </div>
                               <div class=""> <img src="../../../resources/img/img214_19s.png" alt=""></div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="flex justify-end">
                        <button type="button" title="선택하기" class="yellow-btn mt30">
                            선택하기
                        </button>
                    </div>
            </div>
            <!-- <div class="yellow-box mt30">
                <div class="title-box flex justify-between align-center">
                    <div>
                        <p class="title">학습 일정 변경</p>
                        <p class="title1 mt20"> 스스로 학습 일정을 바꿔볼까요?</p>
                    </div>
                    <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
                    바로가기
                </button>
                </div>
            </div> -->
            <div class="popup-wrap" v-show="searchOpen">
                <div class="popup-box ">
                    <div class="flex mb10  justify-between">
                        <p class="popup-title mb20">시간 선택</p>
                        <button type="button" class="popup-close-btn" @click="closeBtn">
                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                        </button>
                    </div>
                    <article class=" mb20 flex-column " style="gap: 20px;">
                        <div class="flex justify-between bg-gray">
                            <div class="flex align-center">
                                <div><input type="checkbox" class="ui-checkbox mr20"></div>
                                <div class="text-lf">
                                    <p class="title1">2교시</p>
                                </div>
                            </div>
                            <div>
                                <div class="flex align-center " style="gap: 10px;"><img
                                        src="../../../resources/img/img215_20s.png" alt="">
                                    <p class="title1">9:00</p>
                                    <p class="title1">~</p>
                                    <p class="title1">10:00</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-between bg-gray">
                            <div class="flex align-center">
                                <div><input type="checkbox" class="ui-checkbox mr20"></div>
                                <div class="text-lf">
                                    <p class="title1">2교시</p>
                                </div>
                            </div>
                            <div>
                                <div class="flex align-center " style="gap: 10px;"><img
                                        src="../../../resources/img/img215_20s.png" alt="">
                                    <p class="title1">9:00</p>
                                    <p class="title1">~</p>
                                    <p class="title1">10:00</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-between bg-gray">
                            <div class="flex align-center">
                                <div><input type="checkbox" class="ui-checkbox mr20"></div>
                                <div class="text-lf">
                                    <p class="title1">2교시</p>
                                </div>
                            </div>
                            <div>
                                <div class="flex align-center " style="gap: 10px;"><img
                                        src="../../../resources/img/img215_20s.png" alt="">
                                    <p class="title1">9:00</p>
                                    <p class="title1">~</p>
                                    <p class="title1">10:00</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-between bg-gray">
                            <div class="flex align-center">
                                <div><input type="checkbox" class="ui-checkbox mr20"></div>
                                <div class="text-lf">
                                    <p class="title1">2교시</p>
                                </div>
                            </div>
                            <div>
                                <div class="flex align-center " style="gap: 10px;"><img
                                        src="../../../resources/img/img215_20s.png" alt="">
                                    <p class="title1">9:00</p>
                                    <p class="title1">~</p>
                                    <p class="title1">10:00</p>
                                </div>
                            </div>
                        </div>
                    </article>
                    <div class="flex justify-center mt20">
                        <button type="button" title="선택" class="new-btn">
                            선택
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

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


export default {
    data() {
        return {
            isClicked: false,
            mdiMagnify: mdiMagnify,
            mdiWindowClose: mdiWindowClose,
            showModal: false,
            searchOpen: false,
        }
    },
    methods: {
        toggleClicked() {
      this.isClicked = !this.isClicked;
    },
        goToPage(page) {
            this.$router.push({ name: page });
        },
        showConfirm(type) {
            let message = '';
            if (type === 'cancel') {
                message = '삭제하시겠습니까?';
            } else if (type === 'reset') {
                message = '초기화하시겠습니까?';
            } else if (type === 'save') {
                message = '등록하시겠습니까?';
            }

            if (confirm(message)) {
                this.goBack();
            }
        },
        closeModal() {
            this.showModal = false;
        },
        buttonSearch() {
            this.searchOpen = true;
        },
        closeBtn() {
            this.searchOpen = false;

        },

    },
    watch: {

    },
    computed: {

    },
    components: {
        SvgIcon
    },
    mounted() {
        console.log('Main2 mounted');
    }
}
</script>
<style scoped>
.popup-box {
    width: 750px;

}
</style>