<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-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
                <div class="rcon flex justify-end mb5">
                    <div class="race-btn" @click="goToPage('Chapter1')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p>지문1</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter2')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p>단어장</p>
                    </div>
                </div>
                <div class="lcon flex justify-between mb5">
                    <div class="race-btn" @click="goToPage('Chapter7')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p>문제1</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter6')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p>단어장</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter5')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p>지문2</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter4')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p>문제2</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter3')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p>문제1</p>
                    </div>
                </div>
                <div class="rcon flex">
                    <div class="race-btn" @click="goToPage('Chapter8')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8">
                    <img :src="item.imgSrc3" >
                    <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p class="long">중간 평가</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter9')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p>지문3</p>
                    </div>
                    <div class="race-btn" @click="goToPage('Chapter10')">
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="10">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p>단어장</p>
                    </div>
                    <div class="race-btn" >
                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="11">
                    <img :src="item.imgSrc3" >
                    <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
                        <p class="long">최종 평가</p>
                    </div>
                </div>
                <div class="rabbit-end" @click="buttonSearch"><img src="../../../resources/img/img138_72s.png" alt=""></div>
            </div>
            <!-- 팝업 -->
            <div v-show="searchOpen" class="popup-wrap">
                <div class="popup-box popup-yellow">
                    <div class="flex justify-end">
                        <button type="button" class="popup-close-btn" @click="closeBtn">
                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                            </button>
                    </div>
                    <div class=" mb30 text-ct">
                        <p class="title1 mb20">1단원이 끝났습니다! </p>
                        <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요 </p>
                    </div>
                    <div class="flex justify-center ">
                        <button type="button" title="사진촬영" class="new-btn" @click="goToPage('Camera')">
                            사진촬영
                        </button>
                    </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="buttonSearch2" class="photo" ><img   src="../../../resources/img/img143_75s.png" alt=""></div>
                </div>
            </article>
            <article class="popup-wrap" v-show="searchOpen2">
                <div class="popup-box ">
                    <div class="flex mb10  justify-between">
                        <p class="popup-title">알림</p>
                        <button type="button" class="popup-close-btn" @click="closeBtn2">
                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                        </button>
                    </div>
                    <div class="box">
                        <div style="width: 910px;"><img src="../../../resources/img/img140_747s.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 {
            items: [
            { imgSrc1: 'client/resources/img/img11_1_s.png', imgSrc2: 'client/resources/img/img12_1_s.png', imgSrc3: 'client/resources/img/img11_2_s.png', imgSrc4: 'client/resources/img/img12_2_s.png', isSecondImageVisible: false },
         ],
            mdiWindowClose: mdiWindowClose,
            mdiHeart: mdiHeart,
            showModal: false,
            showModal2: false,
            searchOpen: false,
            searchOpen2: false,
        }
    },
    methods: {
        toggleImage(index) {
         this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
      },
        goToPage(page) {
            this.$router.push({ name: page });
        },
        closeModal() {
            this.showModal = false;
        },
        buttonSearch() {
            this.searchOpen = true;
        },
        buttonSearch2() {
            this.searchOpen2 = true;
        },
        closeBtn() {
            this.searchOpen = false;

        },
        closeBtn2() {
            this.searchOpen2 = false;

        },
    },
    watch: {

    },
    computed: {

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