<template>
  <div id="Chapter1_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('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>
<h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
        <div class="readGroup">
          <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 class="next-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/right.png" alt=""></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    goToPage(page) {
      this.$router.push({ name: page });
    }
  },
  watch: {

  },
  computed: {

  },
  components: {
  },
  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>