<template>
  <div class="box">
    <ul class="infinite-list" @mouseleave="mouseleave" @mouseenter="setSortHover" ref="tableRef">
      <li v-for="item in listData" :key="item.id">
        <div class="topdata">
          <div class="title">{{ item.title }}</div>
          <div class="time">
            {{ item.date }}
          </div>
        </div>
        <div class="content">
          {{ item.content }}
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { chartAdaptation } from "@/utils/tools";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ref, reactive, onBeforeUnmount, onUnmounted, onMounted, nextTick } from "vue";
import { fakeZxgzData } from "../fakeData";

const listData = ref([
]);

//列表滚动ref绑定初始化
const timer = ref(null)
const tableRef = ref(null)
// 获取最新开展工作列表
const getLatestData = () => {
  getApi({}, "/mosty-jcgl/gwdb/getNewInfo").then((res) => {
    listData.value = res
  })
}
//等同于vue2中的destroyed
onMounted(() => {
  // 测试假数据 ================================
  listData.value = fakeZxgzData()
  return
  // =============================================

  getLatestData();
})
onUnmounted(() => {
  //清除定时器
  clearTimeout(timer.value)
});

const setSortHover = () => {
  //清除定时器,如果希望在setInterval之前终止其运行就可以使用clearTimeout()
  clearTimeout(timer.value)
}
const setlistval = (e) => {
  //获取鼠标停留的当前列的数据
}
const mouseleave = () => {
  start()
}

//开启定时器方法
const start = () => {
  //定时器触发周期
  let speed = ref(600);
  //setInterval会返回一个id,clearTimeout拿到该id才可清除
  timer.value = setInterval(MarqueeTest, speed.value)
}

const MarqueeTest = () => {
  let scroll = tableRef.value
  //组件进行滚动
  scroll.scrollTop += 1
  //判断滚动条是否滚动到底部
  if (scroll.scrollTop == scroll.scrollHeight - scroll.clientHeight) {
    //获取组件第一个节点
    let firstNode = scroll.childNodes[0]
    // //删除节点
    scroll.removeChild(firstNode)
    //将该节点拼接到组件最后
    scroll.append(firstNode)
  }
}

//用nextTick 的原因是 需要等dom元素加载完毕后 再执行方法

nextTick(() => {
  start()
})
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
}

.infinite-list {
  padding: 10px;
  height: 94%;
  overflow-y: auto;
}

li {
  height: 80px;
  margin: 19px 0;
  box-shadow: 0 0 5px 2px #50f484;
}

.topdata {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.top-left {
  display: flex;
}

.top-left .lx {
  padding: 0 10px;
  background: #7ae989;
  font-size: 14px;
  color: #093803;
  text-align: center;
}

.top-left .dd {
  font-size: 16px;
  color: #1e9b52;
  margin-left: 10px;
}

.topdata .time {
  color: #817c7c;
  font-size: 11px;
}

.content {
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

.title {
  font-size: 15px;
  color: rgb(12, 178, 244);
}
</style>
