<template>
   <div id="Chapter2_2" class="content-wrap">
      <div style="margin: 30px 0px 50px; width: 20%">
      <router-link to="/MyPlan.page">
        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
      </router-link>
    </div>
      <div class="title-box mb25 flex align-center mt40">
         <span class="title mr40">1. Hello WORLD</span>
         <span class="subtitle">my name is dd</span>
      </div>
      <div class="flex justify-between align-center">
         <div class="pre-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/left.png" alt="">
         </div>
         <div class="content title-box">
            <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
            <div class="flex align-center mb30">
               <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
               <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
          </button> --></div><div class="time-bg">
            <div>
              <div class="time">
                <p class="second">{{timer}}</p>
                <p class="text">sec</p>
              </div>
            </div>
            </div>

            <div class="imgGroup">
               <div class="flex justify-center" style="gap: 90px;">
                  <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
                     <div class="listenGroup">
                        <img :src="item.imgSrc1">
                        <p class="textbox"><img :src="item.imgSrc"></p>

                     </div>
                     <div class="listenGroup" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                        <img :src="item.imgSrc2">
                        <p class="title4 textbox">{{ item.title }}</p>
                     </div>
                  </button>
               </div>
            </div>
         </div>
         <div class="next-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/right.png" alt="">
         </div>
      </div>
   </div>
</template>


<script>
export default {
   data() {
      return {
         items: [
            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
            { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' }
         ]
      };
   },
   methods: {
      goToPage(page) {
         this.$router.push({ name: page });
      },
      toggleImage(index) {
         this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
      }
   }
}

</script>
<style scoped>
.popTxt {
   width: 295px;
   height: 406px;
}

.popTxt div:last-child img {
   position: absolute;
   top: 0;
   left: 0;
}

.listenGroup .textbox {
   top: 50%;
    left: 50%;
}
</style>