<script setup lang="ts">
import { parseDuration, parseDateToStr } from '@/utils/date-utils';
import { eventData, eventId } from '../../hooks/useUserActivity';
import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict';
import { onMounted, reactive } from 'vue';
const { t } = useI18n();
const { getDict } = useDictStore();

/**字典数据 */
let dict: {
  /**CDR SIP响应代码类别类型 */
  cdrSipCode: DictType[];
  /**CDR 呼叫类型 */
  cdrCallType: DictType[];
  /**UE 事件认证代码类型 */
  ueAauthCode: DictType[];
  /**UE 事件认证代码类型 */
  ueEventType: DictType[];
} = reactive({
  cdrSipCode: [],
  cdrCallType: [],
  ueAauthCode: [],
  ueEventType: [],
});

onMounted(() => {
  // 初始字典数据
  Promise.allSettled([
    getDict('cdr_sip_code'),
    getDict('cdr_call_type'),
    getDict('ue_auth_code'),
    getDict('ue_event_type'),
  ]).then(resArr => {
    if (resArr[0].status === 'fulfilled') {
      dict.cdrSipCode = resArr[0].value;
    }
    if (resArr[1].status === 'fulfilled') {
      dict.cdrCallType = resArr[1].value;
    }
    if (resArr[2].status === 'fulfilled') {
      dict.ueAauthCode = resArr[2].value;
    }
    if (resArr[3].status === 'fulfilled') {
      dict.ueEventType = resArr[3].value;
    }
  });
});
</script>

<template>
  <div class="activty">
    <template v-for="item in eventData" :key="item.eId">
      <!-- CDR事件 -->
      <div
        class="card-cdr"
        :class="{ active: item.eId === eventId }"
        v-if="item.eType === 'cdr'"
      >
        <div class="card-cdr-item">
          <div>
            {{ t('views.dashboard.overview.userActivity.type') }}:
            <span>
              <DictTag
                :options="dict.cdrCallType"
                :value="item.data.callType"
              />
            </span>
          </div>
          <div></div>
          <div>
            {{ t('views.dashboard.overview.userActivity.time') }}:
            <span :title="parseDateToStr(item.data.releaseTime * 1000)">
              {{ parseDateToStr(item.data.releaseTime * 1000) }}
            </span>
          </div>
        </div>
        <div class="card-cdr-item">
          <div>
            {{ t('views.dashboard.overview.userActivity.caller') }}:
            <span :title="item.data.callerParty">{{
              item.data.callerParty
            }}</span>
          </div>
          <div>
            {{ t('views.dashboard.overview.userActivity.called') }}:
            <span :title="item.data.calledParty">{{
              item.data.calledParty
            }}</span>
          </div>
          <div>
            {{ t('views.dashboard.overview.userActivity.duration') }}:
            <span>{{ parseDuration(item.data.callDuration) }}</span>
          </div>
        </div>
        <div>
          {{ t('views.dashboard.overview.userActivity.result') }}:
          <span>
            <DictTag :options="dict.cdrSipCode" :value="item.data.cause" />
          </span>
        </div>
      </div>
      <!-- UE事件 -->
      <div
        class="card-ue"
        :class="{ active: item.eId === eventId }"
        v-if="item.eType === 'ue'"
      >
        <div class="card-ue-item">
          <div>
            {{ t('views.dashboard.overview.userActivity.type') }}:
            <span>
              <DictTag :options="dict.ueEventType" :value="item.type" />
            </span>
          </div>
          <div>
            IMSI: <span :title="item.data.imsi">{{ item.data.imsi }}</span>
          </div>
          <div>
            {{ t('views.dashboard.overview.userActivity.time') }}:
            <span
              v-if="item.type === 'auth-result'"
              :title="item.data.authTime"
            >
              {{ item.data.authTime }}
            </span>
            <span v-if="item.type === 'detach'" :title="item.data.detachTime">
              {{ item.data.detachTime }}
            </span>
            <span v-if="item.type === 'cm-state'" :title="item.data.changeTime">
              {{ item.data.changeTime }}
            </span>
          </div>
        </div>

        <div class="card-ue-w33" v-if="item.type === 'auth-result'">
          <div>
            GNB ID: <span>{{ item.data.gNBID }}</span>
          </div>
          <div>
            Cell ID: <span>{{ item.data.cellID }}</span>
          </div>
          <div>
            TAC ID: <span>{{ item.data.tacID }}</span>
          </div>
        </div>
        <div v-if="item.type === 'auth-result'">
          {{ t('views.dashboard.overview.userActivity.result') }}:
          <span>
            <DictTag :options="dict.ueAauthCode" :value="item.data.authCode" />
          </span>
        </div>
        <div v-if="item.type === 'detach'">
          {{ t('views.dashboard.overview.userActivity.result') }}:
          <span>{{ item.data.detachResult }}</span>
        </div>
        <div class="card-ue-w33" v-if="item.type === 'cm-state'">
          {{ t('views.dashboard.overview.userActivity.result') }}:
          <span>{{ item.data.status }}</span>
        </div>
      </div>
    </template>

    <!-- <div class="card-cdr active">
      <div class="card-cdr-item">
        <div>类型: <span>video</span></div>
        <div>时长: <span>123s</span></div>
      </div>
      <div class="card-cdr-item">
        <div>主叫: <span>12307550064</span></div>
        <div>被叫: <span>12307550064</span></div>
      </div>
      <div>结果: <span>200</span></div>
    </div>
    <div class="card-cdr">
      <div class="card-cdr-item">
        <div>类型: <span>audio</span></div>
        <div>时长: <span>123s</span></div>
      </div>
      <div class="card-cdr-item">
        <div>主叫: <span>12307550064</span></div>
        <div>被叫: <span>12307550064</span></div>
      </div>
      <div>结果: <span>200</span></div>
    </div>
    <div class="card-ue">
      <div class="card-ue-item">
        <div>类型: <span>auth-result</span></div>
        <div>Time: <span>2023-01-16 07:28:11</span></div>
      </div>
      <div>IMSI: <span>4600212141</span></div>
      <div class="card-ue-auth">
        <div>GNB ID: <span>31</span></div>
        <div>Cell ID: <span>17</span></div>
        <div>Tac ID: <span>98</span></div>
      </div>
    </div>
    <div class="card-ue">
      <div class="card-ue-item">
        <div>类型: <span>cm-state</span></div>
        <div>Time: <span>2023-01-16 07:28:11</span></div>
      </div>
      <div>IMSI: <span>4600212141</span></div>
    </div> -->

    <!-- <div class="card-cdr">
      { "recordType":"MOC", // MOC, MTC, MOSM, MTSM 
      "seqNumber":81,
      "callReference":"Y6ecb69Bj@10.25.0.210", 
      "callerParty":"7112",
      "calledParty":"7108", 
      "serviceResult":"ok", 
      "seizureTime":1706515269,
      "answerTime":1706515273,
       "releaseTime":1706515294, 
       "callDuration":21
      "callType":"audio" // audio, video 
      "fwdType": "CFB" // CFU,CFB, CFNR, CFNL
      "fwdParty":"7999", 
      "cause": 200 // 200, 403, 408, 500 .... }

      主叫：callerParty 
      被叫：calledParty 
      时长：callDuration
      呼叫类型：callType
      原因：cause
      信息：  主叫 -> 被叫
    </div>
    <div class="card-ue">ue
      事件类型：auth-result
      imei
      GNB ID 
      Cell ID
      Tac ID
      authTime

      事件类型：detach
      imsi
      detachTime

      事件类型：cm-state
      imsi
      changeTime
    </div> -->
  </div>
</template>

<style lang="less" scoped>
.activty {
  overflow-x: hidden;
  overflow-y: auto;
  height: 94%;
  color: #61a8ff;
  font-size: 0.75rem;
  & .card-ue {
    border: 1px #61a8ff solid;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.3rem;
    line-height: 1rem;
    & span {
      color: #68d8fe;
    }
    &-item {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      & > div {
        width: 50%;
        white-space: nowrap;
        text-align: start;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    &-w33 {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      & > div {
        width: 33%;
      }
    }
  }

  & .card-cdr {
    border: 1px #61a8ff solid;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.3rem;
    line-height: 1rem;
    & span {
      color: #68d8fe;
    }
    &-item {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      & > div {
        flex: 1;
        white-space: nowrap;
        text-align: start;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  & .active {
    color: #fff;
    border: 1px #fff solid;
    animation: backInRight 0.3s alternate;
    & span {
      color: #fff;
    }
  }

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

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

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

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

  @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);
    }
  }
}
</style>
