<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_1')"><img src="../../../../resources/img/left.png" alt=""></div>
        <div class="content title-box">
           <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="imgGroup">
              <div class="flex justify-center" style="gap: 90px;">
                 <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
                    <img :src="item.imgSrc1" >
                    <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
                 </button>
              </div>
           </div>
        </div>
        <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
  </div>
</template>


<script>
export default {
   data() {
      return {
         items: [
            { imgSrc1: 'client/resources/img/img49_s_1.png', imgSrc2: 'client/resources/img/img50_s_2.png', isSecondImageVisible: false },
            { imgSrc1: 'client/resources/img/img49_s_2.png', imgSrc2: 'client/resources/img/img50_s_3.png', isSecondImageVisible: false },
            { imgSrc1: 'client/resources/img/img49_s_3.png', imgSrc2: 'client/resources/img/img50_s_4.png', isSecondImageVisible: false },
            { imgSrc1: 'client/resources/img/img49_s_4.png', imgSrc2: 'client/resources/img/img50_s_1.png', isSecondImageVisible: false }
         ]
      };
   },
   methods: {
      goToPage(page) {
         this.$router.push({ name: page });
      },
      toggleImage(index) {
         this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
      }
   }
}

</script>