<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/components/TrafficTopTen.vue
 * @Date: 2022-08-27 11:02:12
 * @Description: 
 * @LastEditTime: 2023-08-31 20:24:53
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import CommonCard from "../../../../components/CommonCard/CommonCard.vue";
import RoundTab from "../../../../components/RoundTab/RoundTab.vue";
import ProgressBarItem from "../../../../components/ProgressBar/ProgressBarItem.vue";
import { http } from "../../../../utils/https/index";

const IP_API = "/networkSafeDetect/flowPeview/overAll/IP/top10";
const AGRE_API = "/networkSafeDetect/flowPeview/overAll/tatisticsFlow/top10";

interface TopTenProps {
  type: number;
}

// 1:ip流量top10  2:协议流量
const { type = 1 } = defineProps<TopTenProps>();

const options = ref([
  {
    name: "上行流量",
    value: 1,
  },
  {
    name: "下行流量",
    value: 2,
  },
]);

const title = computed(() => {
  return unref(type) === 1 ? "IP流量TOP10" : "协议流量TOP10";
});
const currentTab = ref(1);
const list = ref();

watch(currentTab, () => {
  init();
});

function handleInterfaceData(list, isIp) {
  if (!list.length) return [];
  const total = Number(list[0]?.flow.replace("G", ""));
  return list.map((item) => {
    const value = Number(item.flow.replace("G", ""));
    const percentage = (value / total) * 100;
    return {
      name: isIp ? item.ip : item.agreementType,
      percentage,
      value,
    };
  });
}

const init = async () => {
  const isIp = unref(type) === 1;
  const isUp = unref(currentTab) === 1;

  const res = (await http.get(`${isIp ? IP_API : AGRE_API}`)) as any;
  if (res.code === 200 && res.data) {
    const result = isUp ? res.data?.up : res.data?.down;
    list.value = handleInterfaceData(result, isIp);
    console.log("list.value", list.value);
  }
};

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

<template>
  <CommonCard :title="title" class="traffic-top-ten">
    <RoundTab class="custom-round-tab" v-model="currentTab" :options="options"></RoundTab>
    <div class="progress-box">
      <ProgressBarItem v-for="(item, index) in list" :key="`${item.value}-${item.name}-${index}`" :name="item.name"
        :value="item.value" :percentage="item.percentage" unit="GB"></ProgressBarItem>
    </div>
  </CommonCard>
</template>

<style lang="scss" scoped>
:deep(.custom-round-tab) {
  position: static !important;
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-top: 16px !important;

  .custom-round-tab-item {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
  }
}

.traffic-top-ten {
  height: 100%;
}

.progress-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>
