<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">카드를 뒤집어 보세요.</p>

           <div class="imgGroup mt80">
              <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: 'http://localhost/client/build/d7b87b0aee959597bc7a8ff59c92e172.png', imgSrc2: 'http://localhost/client/build/eeb66d34a14f431520977cac0a89adf1.png', isSecondImageVisible: false },
            { imgSrc1: 'http://localhost/client/build/75be1e0527bdc23177d46d5525646b57.png', imgSrc2: 'http://localhost/client/build/f1c52445fc7b070642d6d4add5208383.png', isSecondImageVisible: false },
            { imgSrc1: 'http://localhost/client/build/5351236e4d5e2d68b4c0d475c2a6bad2.png', imgSrc2: 'http://localhost/client/build/82edbab93426e02a09ee3518801c956e.png', isSecondImageVisible: false },
            { imgSrc1: 'http://localhost/client/build/c9ab71d4ac740b625b6ed54611775727.png', imgSrc2: 'http://localhost/client/build/1fa02c19c1f627c33be9dcb2de41b869.png', isSecondImageVisible: false }
         ]
      };
   },
   methods: {
      goToPage(page) {
         this.$router.push({ name: page });
      },
      toggleImage(index) {
         this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
      }
   }
}

</script>