<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="box" :class="{
          red: item.riskLevel == 'R',
          orange: item.riskLevel == 'O',
          yellow: item.riskLevel == 'Y'
        }">
          <div class="topdata">
            <div class="top-left">
              <div v-if="item.riskLevel == 'R'" class="lx red">
                {{ "红色风险" }}
              </div>
              <div v-if="item.riskLevel == 'O'" class="lx orange">
                {{ "橙色风险" }}
              </div>
              <div v-if="item.riskLevel == 'Y'" class="lx yellow">
                {{ "黄色风险" }}
              </div>
              <div class="dd">{{ item.deptName }}</div>
            </div>
            <div class="time">
              {{ item.registeredPer }}
            </div>
          </div>
          <div class="content">
            <div>
              {{ item.deptName }}
            </div>
            <div class="cont">
              {{ item.dangerDesc }}
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  onBeforeUnmount,
  onMounted,
  onUnmounted,
  nextTick
} from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
// 50条数据表

const listData = ref([]);

//列表滚动ref绑定初始化
const timer = ref(null);
const tableRef = ref(null);

// 请求风险列表数据
const getDangerData = () => {
  getApi({}, "/mosty-jcgl/bmbs/listDisplay").then((res) => {
    listData.value = res;
  });
};

onMounted(() => {
  getDangerData();
});

//等同于vue2中的destroyed
onUnmounted(() => {
  //清除定时器
  clearTimeout(timer.value);
});
const setSortHover = () => {
  //清除定时器,如果希望在setInterval之前终止其运行就可以使用clearTimeout()
  clearTimeout(timer.value);
};
const setlistval = (e) => {
  //获取鼠标停留时获取当前列的数据
};
const mouseleave = (e) => {
  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%;
}

.infinite-list {
  padding: 0 6px;
  box-sizing: border-box;
  height: 99%;
  overflow-y: auto;
}

li {
  height: 76px;
  margin: 10px 0;
  box-shadow: 0 0 1px 2px #0aa9e7;
}

li .red {
  box-shadow: 0 0 5px 2px #ef7272;
}

li .orange {
  box-shadow: 0 0 5px 2px #f9ab1a;
}

li .yellow {
  box-shadow: 0 0 5px 2px #c7fb60;
}

.box {
  height: 100%;
}

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

.top-left {
  display: flex;
}

.top-left .lx {
  box-sizing: border-box;
  color: #f4f5f4;
  text-align: center;
  font-size: 12px;
  display: inline-block;
  zoom: 0.8;
  width: 60px;
  height: 20px;
}

.top-left .red {
  background-color: red;
}

.top-left .orange {
  background-color: orange;
}

.top-left .yellow {
  background-color: #ffbf00;
}

.top-left .dd {
  font-size: 12px;
  color: var(--el-color-primary);
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cont {
  width: 80%;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topdata .time {
  color: #a3b69c;
  font-size: 12px;
}

.content {
  padding-left: 10px;
  box-sizing: border-box;
  display: flex;
  color: #3d3d3d;
  font-size: 12px;
  margin-top: 10px;
}
</style>
