<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { ueEventData, ueEventTotal, ueEventId } from '../../hooks/useUEEvent';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();

onMounted(() => {});
</script>

<template>
  <div class="cdr" style="display: block">
    <div class="cdr-head">
      <span class="col">IMSI</span>
      <span class="col">行为</span>
      <span class="col-w">信息</span>
    </div>
    <div class="cdr-marquee-view">
      <div
        class="row"
        :class="{ 'row-new': item.id === ueEventId }"
        v-for="item in ueEventData"
        :key="item.id"
      >
        <span class="col" :title="item.imsi">{{ item.imsi }}</span>
        <span class="col" :title="item.type">{{ item.type }}</span>
        <span class="col-w" :title="item.msg">{{ item.msg }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.cdr {
  &-head {
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.583rem;
    padding: 0.5rem 1.5rem;
    color: #68d8fe;
    display: flex;
    justify-content: space-between;
    line-height: 1.05;
    & .col {
      width: 3.2rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &-w {
        width: 8.4rem;
      }
    }
  }

  &-marquee-view {
    overflow-x: hidden;
    overflow-y: auto;
    height: 70%;

    /* 修改滚动条的样式 */
    &::-webkit-scrollbar {
      width: 8px; /* 设置滚动条宽度 */
    }

    &::-webkit-scrollbar-track {
      background-color: #101129; /* 设置滚动条轨道背景颜色 */
    }

    &::-webkit-scrollbar-thumb {
      background-color: #28293f; /* 设置滚动条滑块颜色 */
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #68d8fe; /* 设置鼠标悬停时滚动条滑块颜色 */
    }

    & .row {
      line-height: 1.05;
      padding: 0.5rem 1.5rem;
      color: #61a8ff;
      font-size: 0.75rem;
      position: relative;
      display: flex;
      justify-content: space-between;
      &-new {
        color: #fff;
        animation: backInRight 0.3s alternate;
      }
      @keyframes backInRight {
        0% {
          opacity: 0.7;
          -webkit-transform: translateX(2000px) scale(0.7);
          transform: translateX(2000px) scale(0.7);
        }

        80% {
          opacity: 0.7;
          -webkit-transform: translateX(0) scale(0.7);
          transform: translateX(0) scale(0.7);
        }

        to {
          opacity: 1;
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }
      & .col {
        width: 3.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &-w {
          width: 8.4rem;
        }
      }
    }
  }
}
</style>
