<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  computed,
  defineProps,
  toRefs,
  nextTick,
} from "vue";
import type { EChartsOption } from "echarts";
import { useECharts } from "../../../hooks/web/useECharts";
import { getDataByLegend, handleLargeNumber } from "../utils";
import { HEXAGON_ICON } from "../constants";
import { getOpenPortPie } from "../../../api/screen/index";
import deptObj from "../../../store/modules/dept";
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(
  chartRef as ref<HTMLDivElement>
);
const dept = deptObj();
const iconList = [
  `image://${HEXAGON_ICON.RED}`,
  `image://${HEXAGON_ICON.YELLOW}`,
  `image://${HEXAGON_ICON.GREEN}`,
  `image://${HEXAGON_ICON.LIGHGREEN}`,
  `image://${HEXAGON_ICON.BLUE}`,
];
const option = ref({
  title: {
    text: 0,
    left: "24%",
    top: "50%",
    textAlign: "center",
    textBaseline: "middle",
    textStyle: {
      fontSize: 18,
      color: "#DBE2FB",
      fontWeight: 400,
      fontFamily: "PangMenZhengDao",
    },
  },
  tooltip: {
    show: true,
    trigger: "item",
    backgroundColor: "rgba(9,24,50,0.9)",
    borderColor: "#3D94FF",
    textStyle: {
      align: "left",
      color: "rgba(255, 255, 255, 0.8)",
    },
    formatter: function (val) {
      return `<div class='ya-tooltip'>
          <div style="background:${val.color};width: 6px;height: 6px;"></div>
          <div class="ya-data-name">${val.name} </div>
          <div class="ya-data-value"> ${val.value}</div>
        </div>`;
    },
  },
  series: [
    {
      name: "外边框",
      type: "pie",
      clockWise: false,
      hoverAnimation: false,
      tooltip: { show: false },
      emphasis: { disable: true },
      center: ["25%", "50%"],
      radius: ["72%", "72%"],
      label: { normal: { show: false } },
      data: [
        {
          value: 9,
          name: "",
          itemStyle: {
            normal: {
              borderWidth: 3,
              borderDashOffset: 5,
              borderColor: "#FFFFFF11",
            },
          },
        },
      ],
      textStyle: { color: "#FFFFFF" },
    },
    {
      name: "",
      type: "pie",
      center: ["25%", "50%"], // 饼图中心坐标，[ x轴，y轴 ]
      radius: ["45%", "60%"], // [ 内边距半径，外边距半径 ]
      avoidLabelOverlap: false,
      hoverAnimation: true,
      showEmptyCircle: true, // 无数据时显示占位圆
      label: { show: false },
      emphasis: { disable: true },
      labelLine: { show: false },
      data: [],
      itemStyle: {
        normal: {
          borderWidth: 3,
          borderColor: "#000000",
          color: function (params) {
            const colorList = [
              "#EA4668",
              "#FFC65C",
              "#2FCC7E",
              "#02D9D7",
              "#049BFB",
            ];
            return colorList[params.dataIndex];
          },
        },
      },
    },
  ],
  legend: [],
});
const chartData: any = ref([]);
const total = ref(0);
const init = () => {
  let params = { deptId: dept.id };
  getOpenPortPie(params).then((res) => {
    const { code, data = [] } = res || {};
    if (code == 200) {
      total.value =
        data &&
        data.reduce((sum, item) => {
          return sum + item.count;
        }, 0);
      chartData.value = [];
      for (let i = 0; i < data.length; i++) {
        chartData.value.push({
          name: data[i].name,
          value: data[i].count,
          icon: iconList[i],
        });
      }
      chartData.value &&
        chartData.value.forEach((item) => {
          item.per = (item.count / total.value) * 100 + "%";
        });
      option.value.title.text = handleLargeNumber(total.value);
      option.value.series[1].data = chartData.value;
      option.value.legend = {
        orient: "vertical", // 图例的排列方向
        top: "middle", // 图例组件离容器上边界的距离
        left: "50%", // 图例组件离容器左边界的距离
        itemGap: 16, // 同一分组内图例间距
        padding: [0, 0, 0, 15], // 图例内边距，单位px，默认上下左右内边距为5，接收一个数组分别指定上右下左边距。
        itemWidth: 21, // 图例图形宽度
        itemHeight: 24, // 图例高度
        textStyle: {
          rich: {
            name: {
              padding: [0, 0, 0, 10], //图例 icon 与图例文字间距
              width: 72,
              color: "#FFFFFF",
              fontSize: 16,
              fontWeight: 400,
              align: "left",
              fontFamily: "MicrosoftYaHei",
            },
            value: {
              fontSize: 18,
              fontWeight: 400,
              color: "#E1E6F9",
              align: "left",
              fontFamily: "PangMenZhengDao",
            },
          },
        },
        data: chartData.value,
        formatter: function (param) {
          console.log(param, chartData.value, "**()()");
          const { name, value, per } = getDataByLegend(param, chartData.value);
          const handleNum = handleLargeNumber(value);
          return `{name|${name}}{value|${handleNum}}`;
        },
      };
      setOptions(option.value);
    }
  });
};
watch(
  dept,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  let myChart = echarts.init(chartRef.value);
  myChart.on("legendselectchanged", (params) => {
    let selectedTotal = ref(0);
    for (let key in params.selected) {
      chartData.value.forEach((item) => {
        if (!params.selected[key] && item.name == key) {
          selectedTotal.value = selectedTotal.value + item.value;
        }
      });
    }
    let num = total.value - selectedTotal.value;
    option.value.title.text = handleLargeNumber(num);
    myChart.setOption(option.value);
  });
});
</script>
<template>
  <div class="custom-asset-risk" ref="chartRef"></div>
</template>

<style scoped lang="scss">
.custom-asset-risk {
  width: 100%;
  color: #fff;
  height: 243px;
  margin-top: 27px;
}
::v-deep .ya-tooltip {
  display: flex;
  align-items: center;
  padding: 0px 13px;
  box-sizing: border-box;
}
::v-deep .ya-data-name {
  font-size: 11px;
  transform: scale(0.91667);
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 9px;
}
::v-deep .ya-data-value {
  font-size: 13px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #ffffff;
  margin-left: 23px;
}
</style>
