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

const newNumber = ref(1);
const dataArr = ref([
  {
    recordType: 'CALL',
    seqNumber: 1,
    callReference: 'X1gcbQ8zT@10.10.91.252',
    callerParty: '12307551241',
    calledParty: '12307550064',
    serviceResult: 'ok',
    seizureTime: 1705542348,
    answerTime: 1705542356,
    releaseTime: 1705542378,
    callDuration: 22,
  },
]);

onMounted(() => {
  setInterval(function () {
    const random = Math.ceil(Math.random() * 1000);
    const time = Math.ceil(Date.now() / 1000);
    newNumber.value = time;
    dataArr.value.unshift({
      recordType: 'CALL',
      seqNumber: time,
      callReference: `X${random}Q8zT@10${random}.252`,
      callerParty: `1230755${random}`,
      calledParty: `${random}075064`,
      serviceResult: random > 500 ? 'ok' : 'fail',
      seizureTime: time,
      answerTime: time,
      releaseTime: time - random,
      callDuration: 22,
    });
    if (dataArr.value.length > 50) {
      dataArr.value.splice(50);
    }
  }, 2000);
});
</script>

<template>
  <div class="cdr" style="display: block">
    <div class="cdr-head">
      <span class="col">号码</span>
      <span class="col">行为</span>
      <span class="col-w">描述</span>
    </div>
    <div class="cdr-marquee-view">
      <div
        class="row"
        :class="{ 'row-new': item.seqNumber === newNumber }"
        v-for="item in dataArr"
        :key="item.seqNumber"
      >
        <span class="col">{{ item.callReference }}</span>
        <span class="col">{{ item.recordType }}</span>
        <span class="col-w"
          >[{{ item.serviceResult }}]
          {{ item.callerParty }}
          ->
          {{ item.calledParty }}
          # {{ item.callDuration }}
        </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%;

    & .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>
