<template>
    <div class="main">
        <div class="race-wrap">
            <div class="title-box">
                <p class="title">hello world!</p>
                <p class="subtitle">hi my name is dd!</p>
            </div>
            <div class="race-box">
                <div class="rabbit"><img src="../../../resources/img/img09_s.png" alt=""></div>
                <div class="rcon flex justify-end mb5">
                    <div class="race-btn" @click="goToPage('Chapter1')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="1">
                        <p>지문1</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter2')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="2">
                        <p>단어장</p>
                    </div>
                </div>
                <div class="lcon flex justify-between mb5">
                    <div class="race-btn" @click="goToPage('Chapter7')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="7">
                        <p>문제1</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter6')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="6">
                        <p>단어장</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter5')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="5">
                        <p>지문2</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter4')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="4">
                        <p>문제2</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter3')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="3">
                        <p>문제1</p>
                    </div>
                </div>
                <div class="rcon flex">
                    <div class="race-btn" @click="goToPage('Chapter8')">
                        <img src="../../../resources/img/img11_2_s.png" alt="" data-num="8">
                        <p class="long">중간 평가</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter9')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="9">
                        <p>지문3</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter10')">
                        <img src="../../../resources/img/img11_1_s.png" alt="" data-num="10">
                        <p>단어장</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter11')">
                        <img src="../../../resources/img/img11_2_s.png" alt="" data-num="11">
                        <p class="long">최종 평가</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="complete-wrap mt90 myphoto">
            <h2 class="mb40">이 단원을 끝낸 친구들</h2>
            <article class=" flex-column" style="gap: 5px;">
                <div class="flex" style="gap: 5px;">
                    <div @click="buttonSearch" class="photo" ><img   src="../../../resources/img/img143_75s.png" alt=""></div>
                </div>
            </article>
            <article class="popup-wrap" v-show="searchOpen">
                <div class="popup-box ">
                    <div class="flex mb10  justify-between">
                        <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="box">
                        <div><img src="../../../resources/img/img184_91t.png" alt=""></div>
                    </div>
                   <div class="flex justify-between mt20">
                        <div class="text  flex">
                            <p class="title2 date ml30">2024-08-06</p>
                            <span class=" title1 ml30">1단원을 마친 <em class="yellow">가나다</em>친구</span>
                        </div>
                        <div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart" style="color: #FFBA08;"></svg-icon><p><em class="yellow">1</em></p></div>
                   </div>
                </div>
            </article>
        </div>

    </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
export default {
    data() {
        return {
            mdiWindowClose: mdiWindowClose,
            mdiHeart: mdiHeart,
            showModal: false,
            searchOpen: false,
            searchOpen2: false,
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        },
        closeModal() {
            this.showModal = false;
        },
        buttonSearch() {
            this.searchOpen = true;
        },
        closeBtn() {
            this.searchOpen = false;

        },
    },
    watch: {

    },
    computed: {

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