<!-- 实时告警 -->
<template>
<div class="readTime-alarm-mode-box">
  <div class="readTime-alarm-mode-box-con" @mousemove="testMove" @mouseleave="testMend" ref="roll">
    <div class="readTime-alarm-mode-box-con-node" v-for="n in 20">
      <div class="readTime-alarm-mode-box-con-node__l">
        <div class="readTime-alarm-mode-box-con-node__l-icon"></div>
        <div class="readTime-alarm-mode-box-con-node__l-label">厂区东门 ,发现张三未带安全帽</div>
      </div>
      <div class="readTime-alarm-mode-box-con-node__time">2024-03-13 15:10</div>
    </div>
  </div>

</div>
</template>
<script lang='ts' setup>
import { ref, reactive, nextTick,onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()

let timer = ref<any>(null)
let roll = ref(null)

// 鼠标移动事件
const testMove = ()=>{
  clearTimeout(timer.value)
}

// 鼠标离开事件
const testMend = ()=>{
  start()
}
//开启定时器方法
const start = () => {
  //清除定时器
  clearTimeout(timer.value)
  //定时器触发周期
  let speed = ref(75)
  timer.value = setInterval(MarqueeTest, speed.value)
}
const MarqueeTest = () => {
  let test1:any = roll.value
  //判断组件是否渲染完成
  if(!test1) return 
  if (test1.offsetHeight&&test1.offsetHeight == 0) {
    test1 = roll.value
  } else {
    //如果列表数量过少不进行滚动
    if(test1.childNodes.length>4){
      //组件进行滚动
      test1.scrollTop += 1
      //判断滚动条是否滚动到底部
      if (test1.scrollTop == (test1.scrollHeight - test1.clientHeight)) {
        //获取组件第一个节点
        let a = test1.childNodes[0]
        //删除节点
        test1.removeChild(a)
        //将该节点拼接到组件最后
        test1.append(a)
      }
    }else{
      clearTimeout(timer.value)
    }
  }
}

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

nextTick(()=>{
    start()
})

</script>
<style scoped lang='scss'>
.readTime-alarm-mode-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .readTime-alarm-mode-box-top {
    width: 100%;
    height: 60px;
    display: flex;
    .readTime-alarm-mode-box-top-node {
      flex: 1;
      background-color: #2e62c9;
      margin-right: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .readTime-alarm-mode-box-top-node-value {
        font-size: 18px;
        color: #66FFFF;
      }
      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .readTime-alarm-mode-box-con {
    margin-top: 15px;
    flex: 1;
    height: 0;
    overflow: auto;
    font-size: 13px;
    .readTime-alarm-mode-box-con-node {
      width: 100%;
      padding: 2px 0;
      padding-right: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .readTime-alarm-mode-box-con-node__l {
        flex: 1;
        display: flex;
        align-items: center;
        .readTime-alarm-mode-box-con-node__l-icon {
          width: 35px;
          height: 35px;
          background: url('@/assets/images/alarm/real-time-alarm-item-icon.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 3px;
        }
        .readTime-alarm-mode-box-con-node__l-label {
          width:165px;//定宽 
          overflow: hidden; 
          text-overflow: ellipsis; 
          white-space: nowrap; 
          &:hover {
            flex: 1;
            white-space: wrap !important; 
          }
        }

      }
      .readTime-alarm-mode-box-con-node__time {
        font-size: 12px;
      }
      &:hover {
        cursor: pointer;
        background-color: rgba(25, 48, 82, 0.8);
      }
    }
  }
}
</style>