<template>
  <div id="Chapter2_2" class="content-wrap">
     <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_2')"><img src="../../../../resources/img/left.png" alt=""></div>
        <div class="content title-box">
           <p class="subtitle2 "></p><p class="title mt25 title-bg">step2</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="con">
               <img :src="currentCon.imgSrc" alt="">
               <p class="title3"><em class="yellow">{{ currentCon.titleEm }}</em>{{ currentCon.title }}</p>
               <div class="flex align-center justify-center mt10">
                  <p class="yellow-box-big">{{ currentCon.boxText }}</p>
                  <span class="subtitle3">{{ currentCon.subtitle }}</span>
               </div>
            </div>

            <div class="flex justify-center">
              <div class="btnGroup mt50 flex justify-between">
                    <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
                       <img :src="item.imgSrc1" >
                       <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
                    </button>
              </div>
            </div>
           </div>
        </div>
        <div class="next-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
  </div>
</template>

<script>
export default {
   data() {
      return {
         items: [
            {imgSrc1: 'client/resources/img/img53_6_35s.png', imgSrc2: 'client/resources/img/img53_1_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'c', title: 'loud', boxText: '명', subtitle: '구름' } },
            {imgSrc1: 'client/resources/img/img53_7_35s.png', imgSrc2: 'client/resources/img/img53_2_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 's', title: 'un', boxText: '명', subtitle: '태양' } },
            {imgSrc1: 'client/resources/img/img53_8_35s.png', imgSrc2: 'client/resources/img/img53_3_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'r', title: 'ain', boxText: '명', subtitle: '비' } },
            {imgSrc1: 'client/resources/img/img53_9_35s.png', imgSrc2: 'client/resources/img/img53_4_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 's', title: 'now', boxText: '명', subtitle: '눈' } },
            {imgSrc1: 'client/resources/img/img53_10_35s.png', imgSrc2: 'client/resources/img/img53_5_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'w', title: 'ind', boxText: '명', subtitle: '바람' } }
         ],
         currentCon: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'c', title: 'loud', boxText: '명', subtitle: '구름' },
         selectedIndex: 0,
         timer: "00",
         intervalId: null,
      };
   },
   methods: {
      goToPage(page) {
         this.$router.push({ name: page });
      },
      updateContent(index) {
         this.selectedIndex = index;
         this.currentCon = this.items[index].con;
         this.startTimer();
      },
      startTimer() {
         if (this.intervalId) {
            clearInterval(this.intervalId);
         }
         this.timer = 5;
         this.intervalId = setInterval(() => {
            if (this.timer > 0) {
               this.timer--;
            } else {
               clearInterval(this.intervalId);
            }
         }, 1000);
      }
   },
   beforeDestroy() {
      if (this.intervalId) {
         clearInterval(this.intervalId);
      }
   }
}
</script>

<style scoped>
.popTxt img{
   position: absolute;
   top: 0;
   left: 0;
}
</style>
