<!-- 實時告警 -->
<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">廠區(qū)東門 ,發(fā)現張三未帶安全帽</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)
  //定時器觸發(fā)周期
  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)) {
        //獲取組件第一個節(jié)點
        let a = test1.childNodes[0]
        //刪除節(jié)點
        test1.removeChild(a)
        //將該節(jié)點拼接到組件最后
        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>