<template>
  <div class="networkSituation">
    <div class="networkSituation-top">
      <RoundTab v-model="currentTab" :options="options" @change="getInit"></RoundTab>
    </div>
    <div class="networkSituation-content">
      <ElRow :gutter="16" class="custom-row" justify="space-between">
        <ElCol :md="16" :lg="16" :xl="16">
          <CommonCardVue class="EventNumer">
            <EventNumer @tabList="tabList" :infoObj="infoObj"></EventNumer>
          </CommonCardVue>
        </ElCol>
        <ElCol :md="8" :lg="8" :xl="8">
          <CommonCardVue class="right">
            <RoundTab v-model="currentName" :options="headerList" @change="choseItem"></RoundTab>
            <ElRow :gutter="16" class="custom-row" justify="space-between">
              <ElCol :md="24" :lg="24" :xl="24" style="height: 37vh">
                <AlarmEventTOP5 :LIST="AlarmList"></AlarmEventTOP5>
              </ElCol>
              <ElCol class="mt-bt" :md="24" :lg="24" :xl="24" style="height: 37vh">
                <AttackerTop5 :LIST="attackList"></AttackerTop5>
              </ElCol>
            </ElRow>
          </CommonCardVue>
        </ElCol>
      </ElRow>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive, unref, watch, nextTick } from 'vue';
import CommonCardVue from '../../components/CommonCard/CommonCard.vue';
import RoundTab from '../../components/RoundTab/RoundTab.vue';
import { dateSwitchOptions } from '../../settings';
import AlarmEventTOP5 from './networkSituation/alarmEventTOP5.vue';
import AttackerTop5 from './networkSituation/attackerTop5.vue';
import EventNumer from './networkSituation/eventNumer.vue';
import { getTotalCount, getAlarmEventTop5, getAttackIpTop5 } from '../../api/monitoring/networkSituation';
const currentTab = ref(1);
const options = ref(dateSwitchOptions);
const AlarmList = ref([])
const attackList = ref([]);

const headerList = ref([
  {
    name: '移动>联通',
    value: '移动-联通',
  },
  {
    name: '移动>电信',
    value: '移动-电信',
  },
]);
const tabList = (e) => {
  headerList.value = e.childrenList;
  currentName.value = e.childrenList[0].value;
  resetData()
};
const currentName = ref('移动-联通')
/**
 * @description 切换营业厅
 */
const choseItem = (e) => {
  currentName.value = e.value;
  resetData()
};
const infoObj = ref({
  telecomToMobile: 0,
  telecomToUnicom: 0,
  unicomToMobile: 0,
  unicomToTelecom: 0,
  mobileToTelecom: 0,
  mobileToUnicom: 0
})
/**
 * @description 重置数据
 */
const resetData = () => {
  AlarmList.value = [];
  attackList.value = []
  getAramList()
  getAttackIpTop5List()
}
/**
 * @description 获取网间态势数据
 */
const getNum = async () => {
  let res = await getTotalCount({
    dateType: currentTab.value
  });
  if (res.code == 200) {
    infoObj.value = res.data;
  }
  console.log(res)
}
/**
 * @description 获取告警事件TOP5统计
 */
const getAramList = async () => {
  let res = await getAlarmEventTop5({
    dateType: currentTab.value,
    operatorType: currentName.value
  });
  if (res.code == 200) {
    let data = res.data;
    AlarmList.value = data ? data.map((item, index) => {
      return {
        rank: 'TOP' + (index + 1),
        name: item.name,
        value: item.count,
        percentage: item.ratio.split('%')[0]
      }
    }) : []
  }
}
/**
 * @description 获取攻击者IP TOP5数据
 */
const getAttackIpTop5List = async () => {
  let res = await getAttackIpTop5({
    dateType: currentTab.value,
    operatorType: currentName.value
  });
  if (res.code == 200) {
    let data = res.data;
    attackList.value = data ? data.map((item, index) => {
      return {
        rank: 'TOP' + (index + 1),
        name: item.name,
        value: item.count,
        percentage: item.ratio.split('%')[0]
      }
    }) : []
  }
}
/**
 * @description 初始化
 */
const getInit = () => {
  resetData()
  getNum()
}
onMounted(() => {
  getInit()
})
</script>
<style lang="scss" scoped>
.networkSituation {
  display: flex;
  flex-direction: column;

  // .EventNumer {
  //   padding: 60px 200px;
  //   box-sizing: border-box;
  // }
  .networkSituation-top {
    margin-bottom: 24px;

    ::v-deep .custom-round-tab-item {
      width: 80px !important;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
    }
  }

  .networkSituation-content {
    flex: 1;

    .is-justify-space-between {
      height: 100%;
    }
  }

  .right {
    ::v-deep .custom-switch-box {
      .custom-round-tab-item {
        width: auto;
        padding: 0 14px;
      }
    }
  }

  .mt-bt {
    position: relative;
    top: -14px;
  }
}</style>
