<template>
  <div id="Chapter1_1" class="content-wrap">
    <div style="margin: 30px 0px 50px">
      <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_9')"><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>
        </div>

        <div class="text-ct">
          <div class="dropGroup flex align-center justify-center mt30">
            <div style="position: relative;">
              <img src="../../../../resources/img/img28_s.png" alt="">
              <button class="dropzone" data-answer="This" style="left: 30px; top: 167px;">
                <img src="../../../../resources/img/img29_s_01.png" alt="">
                <p style="font-size: 35px;">?</p>
              </button>
              <button class="dropzone" data-answer="is" style="right: 409px; top: 133px;">
                <img src="../../../../resources/img/img30_s_01.png" alt="">
                <p style="font-size: 35px;">?</p>
              </button>
              <button class="dropzone" data-answer="a pen" style="right: 46px; top: 128px;">
                <img src="../../../../resources/img/img31_s_01.png" alt="">
                <p style="font-size: 35px;">?</p>
              </button>
            </div>
          </div>
          <div class="dragGroup flex justify-center" style="gap: 20px;">
            <article style="right: 0; top: 36%;">
              <button class="draggable" data-text="This" draggable="true">
                <img src="../../../../resources/img/img29_s.png" alt="">
                <p style="font-size: 35px;">This</p>
              </button>
            </article>
            <article style="left: 0; top: 36%;">
              <button class="draggable" data-text="is" draggable="true">
                <img src="../../../../resources/img/img30_s.png" alt="">
                <p style="font-size: 35px;">is</p>
              </button>
            </article>
            <article style="left: 50%; top: 10%;">
              <button class="draggable" data-text="a pen" draggable="true">
                <img src="../../../../resources/img/img31_s.png" alt="">
                <p style="font-size: 35px;">a pen</p>
              </button>
            </article>
          </div>
        </div>
      </div>
      <div class="next-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/right.png" alt=""></div>
    </div>
  </div>
</template>

  
<script>
export default {
  data() {
    return {
      draggedElement: null, // 현재 드래그 중인 요소
    };
  },
  methods: {
    goToPage(page) {
      this.$router.push({ name: page });
    },
    handleDragStart(event) {
      this.draggedElement = event.target; // 드래그한 요소 저장
      event.dataTransfer.setData('text/plain', event.target.dataset.text);
      event.target.style.cursor = 'grabbing'; // 드래그 중 커서 변경
    },
    handleDragEnd(event) {
      event.target.style.cursor = 'grab'; // 드래그 종료 후 커서 변경
    },
    handleDragOver(event) {
      event.preventDefault(); // 드롭 허용
    },
    handleDrop(event) {
      event.preventDefault();
      const dropZone = event.target.closest('button.dropzone');
      const draggedText = this.draggedElement ? this.draggedElement.dataset.text : '';

      if (dropZone) {
        const expectedText = dropZone.dataset.answer;
        if (draggedText === expectedText) {
          // 드래그된 텍스트가 정답인 경우
          const rect = dropZone.getBoundingClientRect();
          // 버튼의 이미지 및 텍스트를 드롭존에 맞게 설정
          dropZone.querySelector('p').textContent = draggedText;
          dropZone.querySelector('img').style.display = 'none'; // 기존 이미지 숨기기

          // 드래그된 버튼의 이미지와 텍스트를 드롭존에 복사
          const draggedImage = this.draggedElement.querySelector('img').cloneNode();
          const draggedTextElement = this.draggedElement.querySelector('p').cloneNode();

          // 드롭존에 이미지 및 텍스트를 추가
          dropZone.appendChild(draggedImage);
          dropZone.appendChild(draggedTextElement);

          // 드래그한 요소 숨기기
          this.draggedElement.style.display = 'none';
        } else {
          // 정답이 아닌 경우
          alert('오답입니다!'); // 오답 경고 메시지
        }
      }

      this.draggedElement = null; // 드래그 상태 초기화
    }
  },
  mounted() {
    // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
    document.querySelectorAll('.draggable').forEach(button => {
      button.addEventListener('dragstart', this.handleDragStart);
      button.addEventListener('dragend', this.handleDragEnd);
    });

    // 드롭 가능한 영역에 드래그 오버 및 드롭 이벤트 추가
    document.querySelectorAll('.dropzone').forEach(zone => {
      zone.addEventListener('dragover', this.handleDragOver);
      zone.addEventListener('drop', this.handleDrop);
    });
  }
}
</script>



<style scoped>
.draggable {
  cursor: grab;
}

.draggable:active {
  cursor: grabbing;
}



.dropzone img {
  display: block; /* 이미지가 항상 보이도록 설정 */
}

</style>