<script setup lang="ts">
import { ref, onMounted, markRaw, reactive } from 'vue';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listUDMSub } from '@/api/neData/udm_sub';
import { listUEInfoBySMF } from '@/api/neUser/smf';
import svgBasefff from '@/assets/svg/basefff.svg';
import fourEvent from '@/assets/svg/4gEvent.svg';
import fiveEvent from '@/assets/svg/5gEvent.svg';
import smscCdr from '@/assets/svg/smscCdr.svg';
import { listBase5G } from '@/api/neUser/base5G';
import { useRouter } from 'vue-router';
import { listUEInfoByIMS } from '@/api/neUser/ims';
import { listSMFDataCDR } from '@/api/neData/smf';
import { listIMSDataCDR } from '@/api/neData/ims';
import { listSMSCDataCDR } from '@/api/neData/smsc';
import { listMMEDataUE } from '@/api/neData/mme';
import { listAMFDataUE } from '@/api/neData/amf';
const router = useRouter();
const { t } = useI18n();

/**概览状态类型 */
type SkimStateType = {
  /**UDM签约用户数量 */
  udmSubNum: number;
  /**SMF在线用户数 */
  smfUeNum: number;
  /**5G基站数量 */
  gnbNum: number;
  /**5G在线用户数量 */
  gnbUeNum: number;
  /**4G基站数量 */
  enbNum: number;
  /**4G在线用户数量 */
  enbUeNum: number;
  /**IMS在线用户数量 */
  imsUeNum: number;
  /**SMF CDR数量 */
  smfCdrNum: number;
  /**IMS CDR数量 */
  imsCdrNum: number;
  /**SMSC CDR数量 */
  smscCdrNum: number;
  /**4G事件数量 */
  EventNum: number;
  /**5G事件数量 */
  gEventNum: number;
};

/**概览状态信息 */
let skimState: SkimStateType = reactive({
  udmSubNum: 0,
  smfUeNum: 0,
  gnbNum: 0,
  gnbUeNum: 0,
  enbNum: 0,
  enbUeNum: 0,
  imsUeNum: 0,
  smfCdrNum: 0,
  imsCdrNum: 0,
  smscCdrNum: 0,
  EventNum: 0,
  gEventNum: 0,
});

/**获取概览信息 */
async function fnGetSkim() {
  const resArr = await Promise.allSettled([
    listUDMSub({
      neid: '001',
      pageNum: 1,
      pageSize: 1,
    }),
    listUEInfoBySMF({
      neId: '001',
      pageNum: 1,
      pageSize: 10000,
    }),
    listBase5G({
      neType: 'AMF',
      neId: '001',
    }),
    listBase5G({
      neType: 'MME',
      neId: '001',
    }),
    listUEInfoByIMS({
        neId: '001',
        pageNum: 1,
        pageSize: 10000,
      }),
    listSMFDataCDR({
      neType: 'SMF',
      neId: '001',
      pageNum: 1,
      pageSize: 20,
    }),
    listIMSDataCDR({
      neType: 'IMS',
      neId: '001',
      pageNum: 1,
      pageSize: 20,
    }),
    listMMEDataUE({
      neType: 'MME',
      neId: '001',
      pageNum: 1,
      pageSize: 20,
    }),
    listAMFDataUE({
      neType: 'AMF',
      neId: '001',
      pageNum: 1,
      pageSize: 20,
    }),
    listSMSCDataCDR({
      neType: 'SMSC',
      neId: '001',
      pageNum: 1,
      pageSize: 20,
    }),
  ]);

  if (resArr[0].status === 'fulfilled') {
    const res0 = resArr[0].value;
    if (res0.code === RESULT_CODE_SUCCESS) {
      skimState.udmSubNum = res0.total;
    }
  }
  if (resArr[1].status === 'fulfilled') {
    const res1 = resArr[1].value;
    if (res1.code === RESULT_CODE_SUCCESS) {
      skimState.smfUeNum = res1.total;
    }
  }

  if (resArr[2].status === 'fulfilled') {
    const res2 = resArr[2].value;
    if (res2.code === RESULT_CODE_SUCCESS) {
      skimState.gnbNum = res2.total;
      skimState.gnbUeNum = 0;
      res2.rows.map((item: any) => {
        skimState.gnbUeNum += item.ueNum;
      });
    }
  }
  if (resArr[3].status === 'fulfilled') {
    const res3 = resArr[3].value;
    if (res3.code === RESULT_CODE_SUCCESS) {
      skimState.enbNum = res3.total;
      skimState.enbUeNum = 0;
      res3.rows.map((item: any) => {
        skimState.enbUeNum += item.ueNum;
      });
    }
  }
  if (resArr[4].status === 'fulfilled') {
    const res4 = resArr[4].value;
    if (res4.code === RESULT_CODE_SUCCESS) {
      skimState.imsUeNum = res4.total;

    }
  }
  if (resArr[5].status === 'fulfilled') {
    const res5 = resArr[5].value;
    if (res5.code === RESULT_CODE_SUCCESS) {
      skimState.smfCdrNum = res5.total;
    }
  }

  if (resArr[6].status === 'fulfilled') {
    const res6 = resArr[6].value;
    if (res6.code === RESULT_CODE_SUCCESS) {
      skimState.imsCdrNum = res6.total;
    }
  }
  if (resArr[7].status === 'fulfilled') {
    const res7 = resArr[7].value;
    if (res7.code === RESULT_CODE_SUCCESS) {
      skimState.EventNum = res7.total;
    }
  }

  if (resArr[8].status === 'fulfilled') {
    const res8 = resArr[8].value;
    if (res8.code === RESULT_CODE_SUCCESS) {
      skimState.gEventNum = res8.total;
    }
  }
  if (resArr[9].status === 'fulfilled') {
    const res9 = resArr[9].value;
    if (res9.code === RESULT_CODE_SUCCESS) {
      skimState.smscCdrNum = res9.total;
    }
  }
}

/**栏目信息跳转 */
function fnToRouter(name: string, query?: any) {
  router.push({ name, query });
}

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

<template>
  <a-row :gutter="[16, 16]" justify="space-between">
    <!-- UDM 签约用户 -->
    <a-col :lg="8" :md="24" :xs="24">
      <a-card
        :bordered="false"
        style="background: linear-gradient(135deg, #abdcff, #0396ff)"
        :hoverable="true"
        class="cardClass"
      >
        <div style="text-align: center">
          <span style="font-size: 24px; font-weight: bold; color: #fff">
            {{ t('views.dashboard.overview.skim.users') }}
          </span>
        </div>

        <div class="visual">
          <rise-outlined />
        </div>
        <div class="details">
          <div class="number" @click="fnToRouter('Sub_10010')">
            <UserOutlined class="spaceButton" />
            {{ skimState.udmSubNum }}
          </div>
        </div>
      </a-card>
    </a-col>

    <!-- 5G基站-AMF -->
    <a-col :lg="8" :md="24" :xs="24">
      <a-card
        :bordered="false"
        style="background: linear-gradient(135deg, #3c8ce7, #00eaff)"
        :hoverable="true"
        class="cardClass"
      >
        <div style="text-align: center">
          <span style="font-size: 24px; font-weight: bold; color: #fff">
            {{ t('views.neUser.base5G.gnb') }}
          </span>
        </div>

        <div class="detailsLeft">
          <div
            class="number"
            @click="fnToRouter('Base5G_10012', { neType: '5g' })"
          >
            <img
              :src="svgBasefff"
              style="height: 2rem; color: #fff; margin-top: -9px"
              class="spaceButton"
            />
            {{ skimState.gnbNum }}
          </div>
        </div>
        <div class="details">
          <div
            class="number"
            @click="fnToRouter('Base5G_10012', { neType: '5g' })"
          >
            <UserOutlined class="spaceButton" />
            {{ skimState.gnbUeNum }}
          </div>
        </div>
      </a-card>
    </a-col>

    <!-- 4G基站-MME -->
    <a-col :lg="8" :md="24" :xs="24">
      <a-card
        :bordered="false"
        style="background: linear-gradient(135deg, #00eaff, #3c8ce7)"
        :hoverable="true"
        class="cardClass"
      >
        <div style="text-align: center">
          <span style="font-size: 24px; font-weight: bold; color: #fff">
            {{ t('views.neUser.base5G.enb') }}
          </span>
        </div>

        <div class="detailsLeft">
          <div
            class="number"
            @click="fnToRouter('Base5G_10012', { neType: '4g' })"
          >
            <img
              :src="svgBasefff"
              style="height: 2rem; color: #fff; margin-top: -9px"
              class="spaceButton"
            />
            {{ skimState.enbNum }}
          </div>
        </div>
        <div class="details">
          <div
            class="number"
            @click="fnToRouter('Base5G_10012', { neType: '4g' })"
          >
            <UserOutlined class="spaceButton" /> {{ skimState.enbUeNum }}
          </div>
        </div>
      </a-card>
    </a-col>

    <!-- 在线信息 SMF以及IMS -->
    <a-col :lg="8" :md="24" :xs="24">
      <a-card
        :bordered="false"
        style="background: linear-gradient(135deg, #93f9b9, #1d976c)"
        :hoverable="true"
        class="cardClass"
      >
        <div style="text-align: center">
          <span style="font-size: 24px; font-weight: bold; color: #fff">
            Online Sessions
          </span>
        </div>
        <div class="detailsLeft">
          <div class="number" @click="fnToRouter('Ims_10020')">
            <PhoneOutlined />
            {{ skimState.imsUeNum }}
          </div>
        </div>
        <div class="details">
          <div class="number" @click="fnToRouter('Ue_10011')">
            <database-outlined class="spaceButton" />
            {{ skimState.smfUeNum }}
          </div>
        </div>
      </a-card>
    </a-col>

    <!-- CDR SMF以及IMS -->
    <a-col :lg="8" :md="24" :xs="24">
      <a-card
        :bordered="false"
        style="background: linear-gradient(135deg, #1d976c, #93f9b9)"
        :hoverable="true"
        class="cardClass"
      >
        <div style="text-align: center">
          <span style="font-size: 24px; font-weight: bold; color: #fff">
            CDR
          </span>
        </div>

        <div class="details-container">
          <div class="details-item cdrLeft">
            <div
              class="cdrNumber"
              @click="fnToRouter('ImsCDR_10013')"
              title="Voice CDR Number"
            >
              <PhoneOutlined class="spaceButton" />
              <!-- <span class="value">{{ skimState.imsCdrNum }}</span> -->
              <span class="value"> {{ skimState.imsCdrNum }}</span>
            </div>
          </div>

          <div class="details-item cdrCenter">
            <div
              class="cdrNumber"
              @click="fnToRouter('SmscCDR_10021')"
              title="SMS CDR Number"
            >
              <img
                :src="smscCdr"
                style="height: 2.5rem; color: #fff; margin-top: 5px"
                class="spaceButton"
              />
              <!-- <span class="value"> {{skimState.smfCdrNum}}</span> -->
              <span class="value"> {{ skimState.smscCdrNum }}</span>
            </div>
          </div>

          <div class="details-item cdrRight">
            <div
              class="cdrNumber"
              @click="fnToRouter('SmfCDR_10014')"
              title="Data CDR Number"
            >
              <database-outlined class="spaceButton" />
              <span class="value"> {{ skimState.smfCdrNum }}</span>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>

    <!--UE EVENT -->
    <a-col :lg="8" :md="24" :xs="24">
      <a-card
        :bordered="false"
        style="background: linear-gradient(135deg, #93f9b9, #1d976c)"
        :hoverable="true"
        class="cardClass"
      >
        <div style="text-align: center">
          <span style="font-size: 24px; font-weight: bold; color: #fff">
            UE Event
          </span>
        </div>

        <div class="detailsLeft">
          <div class="number" @click="fnToRouter('MmeUE_10017')">
            <img
              :src="fourEvent"
              style="height: 2.5rem; color: #fff; margin-top: -14px"
              class="spaceButton"
            />
            {{ skimState.EventNum }}
          </div>
        </div>
        <div class="details">
          <div class="number" @click="fnToRouter('AmfUE_10016')">
            <img
              :src="fiveEvent"
              style="height: 2.5rem; color: #fff; margin-top: -14px"
              class="spaceButton"
            />
            {{ skimState.gEventNum }}
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>
@import url('./css/module.css');
</style>
