<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/communication/tunnelDetection.vue
 * @Date: 2022-09-02 16:00:53
 * @Description: 
 * @LastEditTime: 2023-08-31 20:04:24
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import FunnelChart from "../../../components/chart/FunnelChart/FunnelChart.vue";
import RoundTab from "../../../components/RoundTab/RoundTab.vue";
import RoseChart from "../../../components/chart/RoseChart/RoseChart.vue";
import NumberProgressBarItem from "../../../components/ProgressBar/NumberProgressBarItem.vue";
import CardNumberItem from "../../../components/ProgressBar/CardNumberItem.vue";
import { useGetChartData } from "../../../components/chart/logic";

const MODULE_API = "networkSafeDetect/";
const _API_MAP = {
  近一周DNS隧道源主机统计TOP10:
    "domainSafe/tunnelCommunication/tunnelOneWeekIpStat",
  近一周DNS隧道域名统计TOP10: "domainSafe/tunnelCommunication/dnsDomainStat",
  近一周HTTP隧道统计TOP10: "domainSafe/tunnelCommunication/tunnelOneWeekIpStat",
  近一周ICMP隧道统计TOP10: "domainSafe/tunnelCommunication/tunnelOneWeekIpStat",
};

const title1 = ref("近一周DNS隧道源主机统计TOP10");
const title2 = ref("近一周DNS隧道域名统计TOP10");
const title3 = ref("近一周HTTP隧道统计TOP10");
const title4 = ref("近一周ICMP隧道统计TOP10");

const funnelChartData = ref([]) as any;

const getFunnelChartData = async () => {
  const res = await useGetChartData(
    MODULE_API + _API_MAP[title1.value],
    (res) => res,
    { type: 3 }
  );
  if (!res) return;
  funnelChartData.value = res.slice(0, 10).map((item, index) => {
    return {
      name: item.ip,
      value: item.count,
    };
  });
};

const roseChartData = ref([]) as any;
const getRoseChartData = async () => {
  const res = await useGetChartData(
    MODULE_API + _API_MAP[title2.value],
    (res) => res
  );
  if (!res) return;
  roseChartData.value = res.slice(0, 10).map((item, index) => {
    return {
      name: item.domainName,
      value: item.count,
    };
  });
};

const httpTopOptions = ref([
  {
    name: "源主机",
    value: 1,
  },
  {
    name: "目的主机",
    value: 2,
  },
]);

const currentTab = ref(1);

const httpList = ref([]) as any;

const getHttpList = async () => {
  const params = {
    type: unref(currentTab),
  };
  const res = await useGetChartData(
    MODULE_API + _API_MAP[title3.value],
    (res) => res,
    params
  );
  httpList.value = res.slice(0, 10).map((item, index) => {
    return {
      rank: index + 1,
      name: item.ip,
      value: item.count,
      percentage: item.ratio,
    };
  });
};

watch(currentTab, (val) => {
  getHttpList();
});

const icmpTopOptions = ref([
  {
    name: "源主机",
    value: 4,
  },
  {
    name: "目的主机",
    value: 5,
  },
]);

const currentTab2 = ref(4);
const ICMPList = ref([]) as any;

const getIcmpList = async () => {
  const params = {
    type: unref(currentTab2),
  };
  const res = await useGetChartData(
    MODULE_API + _API_MAP[title4.value],
    (res) => res,
    params
  );
  ICMPList.value = res.slice(0, 10).map((item, index) => {
    return {
      rank: index + 1,
      name: item.ip,
      value: item.count,
    };
  });
};

watch(currentTab2, (val) => {
  getIcmpList();
});

const init = async () => {
  getFunnelChartData();
  await getRoseChartData();
  await getHttpList();
  await getIcmpList();
};

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

<template>
  <ElScrollbar>
    <div class="tunnel-detection-container">
      <div class="custom-row">
        <CommonCardVue :title="title1" class="custom-row-item">
          <FunnelChart :name="title1" :chartData="funnelChartData" />
        </CommonCardVue>
        <CommonCardVue :title="title2" class="custom-row-item ml-16">
          <RoseChart :labelShow="false" legendClass="tunnel-legend" legendTop="18%" :pieCenter="['20%', '50%']"
            :name="title2" :chartData="roseChartData" />
        </CommonCardVue>
      </div>
      <div class="custom-row mt-16">
        <CommonCardVue :title="title3" class="custom-row-item">
          <RoundTab class="custom-round-tab" v-model="currentTab" :options="httpTopOptions"></RoundTab>
          <div class="progress-box">
            <div class="progress-box-left">
              <NumberProgressBarItem v-for="(item, index) in httpList.slice(0, 5)" :key="index" :name="item.name"
                :number="item.rank" :percentage="item.percentage" :value="item.value" />
            </div>
            <div class="progress-box-right">
              <NumberProgressBarItem v-for="(item, index) in httpList.slice(5)" :key="index" :name="item.name"
                :number="item.rank" :percentage="item.percentage" :value="item.value" />
            </div>
          </div>
        </CommonCardVue>
        <CommonCardVue :title="title4" class="custom-row-item ml-16">
          <RoundTab class="custom-round-tab" v-model="currentTab2" :options="icmpTopOptions"></RoundTab>
          <div class="progress-box">
            <div class="progress-box-left">
              <CardNumberItem v-for="(carditem, index) in ICMPList.slice(0, 5)" :key="index" :name="carditem.name"
                :count="carditem.value" :number="carditem.rank" />
            </div>
            <div class="progress-box-right">
              <CardNumberItem v-for="(carditem, index) in ICMPList.slice(5)" :key="index" :name="carditem.name"
                :count="carditem.value" :number="carditem.rank" />
            </div>
          </div>
        </CommonCardVue>
      </div>
    </div>
  </ElScrollbar>
</template>

<style lang="scss" scoped>
.tunnel-detection-container {
  width: 100%;
  display: flex;
  flex-direction: column;

  .custom-row {
    display: flex;
    width: 100%;
    height: calc((100vh - 56px - 40px - 12px - 12px - 16px) / 2);

    .custom-row-item {
      width: calc((100% - 16px) / 2);
      height: 100%;
    }
  }
}

::v-deep .progress-bar-box {
  margin-top: 0;
}

.progress-box {
  width: 100%;
  display: flex;
  height: 100%;
  margin-top: 24px;
  justify-content: space-around;
  gap: 40px;

  .progress-box-left,
  .progress-box-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
