<template>
  <div id="Chapter1_1" 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('Chapter3_15')"><img src="../../../../resources/img/left.png" alt=""></div>
      <div class="content title-box">
        <p class="title mt25 title-bg">중간 평가 설문 조사</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="text-ct " >
          <div class="table-wrap myplan">
            <table>
              <colgroup>
                <col style="width: 5%;">
                <col style="width: 70%;">
                <col style="width: 25%;">
              </colgroup>
              <tr>
                <td>
                  <p class="title1 mr20">1.</p>
                </td>
                <td class="text-lf">
                  <p class="title1">2교시</p>
                </td>
                <td>
                  <div class="flex justify-center" style="gap: 60px;">
                    <article>
                      <div class="flex align-center">
                        <p class="title1 mr20">네</p>
                        <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>
                    </article>
                    <article>
                      <div class="flex align-center">
                        <p class="title1 mr20">아니요</p>
                        <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>
                    </article>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <p class="title1 mr20">1.</p>
                </td>
                <td class="text-lf">
                  <p class="title1">2교시</p>
                </td>
                <td>
                  <div class="flex justify-center" style="gap: 60px;">
                    <article>
                      <div class="flex align-center">
                        <p class="title1 mr20">네</p>
                        <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>
                    </article>
                    <article>
                      <div class="flex align-center">
                        <p class="title1 mr20">아니요</p>
                        <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>
                    </article>
                  </div>
                </td>
              </tr>
            </table>
            <div class="flex justify-end">
              <button type="button" title="제출하기" class="yellow-btn mt30">
                제출하기
              </button>
            </div>
          </div>

        </div>
      </div>
      <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
            { imgSrc1: 'client/resources/img/btn13_42s.png', imgSrc2: 'client/resources/img/btn14_50s_click.png', isSecondImageVisible: false },
           
         ],
      timer: '00',
      showButton1: false,
      showButton2: false,
      showButton3: false,
      showButton4: false,
    }
  },
  methods: {
    toggleImage(index) {
         this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
      },
    goToPage(page) {
      this.$router.push({ name: page });
    },
    handleDrag(dragNumber) {
      // Drag 버튼 숨기기
      // 여기서는 상태 관리를 통해 버튼을 제어합니다.
      if (dragNumber === 1) {
        this.showButton1 = false;
      } else if (dragNumber === 2) {
        this.showButton2 = false;
      } else if (dragNumber === 3) {
        this.showButton3 = false;
      }
    },
    showButton(dropNumber) {
      // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
      // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
      if (dropNumber === 1) {
        this.showButton1 = true;
      } else if (dropNumber === 2) {
        this.showButton2 = true;
      } else if (dropNumber === 3) {
        this.showButton3 = true;
      } else if (dropNumber === 4) {
        this.showButton4 = true;
      }
    },
    startTimer() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      this.timer = 5;
      this.intervalId = setInterval(() => {
        if (this.timer > 0) {
          this.timer--;
        } else {
          clearInterval(this.intervalId);
        }
      }, 1000);
    }
  },
  watch: {

  },
  computed: {

  },
  components: {
  },
  mounted() {

  }
}
</script>
<style scoped>
.textbox {
  height: 60px;
}

.textbox p {
  font-size: 28px;
  font-weight: bold;
  line-height: 65px;
}

.dropGroup button {
  position: relative;
}

.dropGroup button p {
  font-size: 48px;
}

.dragGroup button p {
  font-size: 48px;
}
.myplan{width: 150rem; margin: 0 auto;}
</style>