<template>
  <div id="Chapter1_2" class="content-wrap">
    <div style="margin: 30px 0px 50px; width: 20%">
      <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" style="
    justify-content: space-between;
">
      <div>
        <span class="title mr40">1. Hello WORLD</span>
        <span class="subtitle">my name is dd</span>
      </div>
      <button class="completeBtn" @click="complete"> 학습 종료 </button>
    </div>
    <div class="flex justify-between align-center">
      <div class="pre-btn" @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt=""></div>
      <div class="content title-box">
        <p class="title mt25 title-bg">step1. Hello WORLD</p>
        <div class="flex justify-center">
          <div class="readGroup">
            <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
            <div>
              <div class="textbox">
                <article class="flex align-start mb10">
                  <div class="icon mr40">
                    <img src="../../../../resources/img/img37_s.png" alt="">
                    <p class="name">발화자</p>
                  </div>
                  <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
                </article>
                <article class="flex align-start mb10 justify-end">
                  <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
                  <div class="icon ">
                    <img src="../../../../resources/img/img37_s.png" alt="">
                    <p class="name">발화자</p>
                  </div>
                </article>
                <article class="flex align-start mb10">
                  <div class="icon mr40">
                    <img src="../../../../resources/img/img37_s.png" alt="">
                    <p class="name">발화자</p>
                  </div>
                  <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
                </article>
                <article class="flex align-start mb10 justify-end">
                  <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
                  <div class="icon ">
                    <img src="../../../../resources/img/img37_s.png" alt="">
                    <p class="name">발화자</p>
                  </div>
                </article>
              </div>
            </div>

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

<script>
import TextToImage from '../../../component/TextToImage.vue';
export default {
  data() {
    return {
    }
  },
  methods: {
    complete() {
        const { unit_id, book_id } = this.$route.query;
        this.$router.push({ name: 'Dashboard', query: { value: 1, unit_id, book_id } });
    },
    goToPage(page) {
      this.$router.push({ name: page });
    }
  },
  watch: {

  },
  computed: {

  },
  components: {
    TextToImage: TextToImage
  },
  mounted() {
    const textArea = this.$refs.textArea;
    const popup = this.$refs.popup;

    textArea.addEventListener('mousemove', (event) => {
      const text = textArea.value;
      const words = text.split(' ');
      const selectionStart = textArea.selectionStart;
      const selectionEnd = textArea.selectionEnd;

      if (selectionStart !== selectionEnd) {
        const selectedText = text.substring(selectionStart, selectionEnd);
        const rect = textArea.getBoundingClientRect();
        popup.style.left = `${event.clientX}px`;
        popup.style.top = `${event.clientY + window.scrollY}px`;
        popup.innerHTML = `You selected: ${selectedText}`;
        popup.style.display = 'block';
      } else {
        popup.style.display = 'none';
      }
    });

    document.addEventListener('click', (event) => {
      if (!textArea.contains(event.target) && !popup.contains(event.target)) {
        popup.style.display = 'none';
      }
    });
  }
}
</script>

<style>
.completeBtn {
  margin-right: 100px;
  background-color: #ffba08;
  padding: 10px 30px;
  border-radius: 10px;
  font-size: 28px;
  font-family: 'ONEMobilePOPOTF';
}
</style>