<!--
 * @Date: 2024-07-12 13:20:15
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-05 17:31:02
 * @FilePath: /data-table/src/views/test.vue
 * @Description: 文件描述
-->
<template>
  <div class="tinymce-box">
    <TEditor ref="refEdit" ></TEditor>
    <div @click="getValue">获取内容</div>
    <div @click="setValue">设置内容</div>
    <div>
      <ul id="list">
        <li v-for="(item) in 50" :key="index">Item {{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
  import TEditor from "@/components/TEditor/index.vue";
  import { $ } from "@/utils/generatePackage.js";

  const refEdit = ref(null);

  // refEdit.value.handleGetContent()
  const getValue = () => {
    console.warn(refEdit.value.handleGetContent());
  }

  const setValue = () => {
    refEdit.value.handleSetContent(table)
  }

  const table = `
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>34</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>广州</td>
      </tr>
    </tbody>
  </table>
  `

  onMounted(() => {
    $(document).ready(function() {
      const $listItems = $("#list li");

      // 判断元素是否在可视范围内
      function isInViewport($el) {
        const rect = $el[0].getBoundingClientRect();
        const listRect = $('#list')[0].getBoundingClientRect(); // 获取容器的可视区域
        return (
          rect.top >= listRect.top &&
          rect.bottom <= listRect.bottom
        );
      }

      // 检查所有的 li 元素
      function addVisibilityClass() {
        $listItems.each(function() {
          const $this = $(this);
          if (isInViewport($this) && !$this.hasClass("visible")) {
            $this.addClass("visible");
          }
        });
      }

      // 监听滚动事件
      $("#list").on("scroll", function() {
        addVisibilityClass();
      });

      // 初次加载时检查可见项
      addVisibilityClass();
    });
  })
</script>

<style>
.tinymce-box {
  width: 100%;
}

ul {
  height: 200px; /* 可视区域显示5个li */
  overflow-y: scroll;
  list-style-type: none;
  padding: 0;
  background-color: #eee;
}

li {
  height: 40px;
  margin: 5px 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

li.visible {
  opacity: 1;
}
</style>