<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/components/OperatorTraffic.vue
 * @Date: 2022-08-27 14:55:15
 * @Description: 
 * @LastEditTime: 2023-08-31 20:24:23
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import CommonCard from "../../../../components/CommonCard/CommonCard.vue";
import CircularDiagram from "../../../../components/chart/CircularDiagram/CircularDiagram.vue";
import { http } from "../../../../utils/https/index";
const _API = "/networkSafeDetect/flowPeview/overAll/operator";

const title = ref("运营商流量统计");
const chartData = ref([]) as any;

const legendFormatter = (name) => {
  if (unref(chartData).length === 0) return name;
  const findItem = unref(chartData).findIndex((item) => item.name === name);
  const _item = unref(chartData)[findItem];
  const percentage = `{subtitle|${_item.value}GB（${_item.percentage}%）}`;
  return name + percentage;
};

const otherOptions = {
  legend: {
    left: "30%",
    height: "55%",
  },
};

function handleInterFaceData(list) {
  const total = list.reduce((total, item) => {
    return total + Number(item.flowCount);
  }, 0);
  return list.map((item) => {
    const percentage = ((Number(item.flowCount) / total) * 100).toFixed(2);
    // console.log(Number(item.flowCount) / total * 100)
    return {
      name: item.operatorType,
      value: Number(item.flowCount),
      percentage,
      valueFormat: `${Number(item.flowCount)}GB (${percentage}%)`,
    };
  });
}

const init = async () => {
  const res = (await http.get(_API)) as any;
  if (res.code === 200 && res.data) {
    const result = handleInterFaceData(res.data);
    chartData.value = result;
  }
};

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

<template>
  <CommonCard :title="title" class="operator-statistical">
    <CircularDiagram :chartData="chartData" labelWidth="self" :name="title" legendClass="operator-statistical-legend"
      :pieCenter="['15%', '55%']" legendLeft="35%" manual :otherOptions="otherOptions" />
  </CommonCard>
</template>

<style lang="scss" scoped></style>
