<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 11:43:36
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-03-30 10:52:35
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\assetTypeDistribution.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 资产类型分布情况 -->
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import { useECharts } from "../../../hooks/web/useECharts";
import {
  ref,
  watch,
  reactive,
  onMounted,
  computed,
  defineProps,
  toRefs,
  nextTick,
} from "vue";
import { getAssetTypePie } from "../../../api/screen/index";
import { getDataByLegend, handleLargeNumber } from "../utils";
import deptObj from "../../../store/modules/dept";
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(
  chartRef as ref<HTMLDivElement>
);
const dept = deptObj();
//echarts配置项
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: ["87%", "87%"],
      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: ["55%", "71%"], // [ 内边距半径，外边距半径 ]
      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 = [
              "#02C5C6",
              "#2FCC7E",
              "#D34162",
              "#F1A3E1",
              "#FFC65C",
              "#137DFF",
            ];
            return colorList[params.dataIndex];
          },
        },
      },
    },
  ],
  legend: [],
});
//数据初始化
const chartData: any = ref([]);
const total = ref(0);
const init = () => {
  let params = { deptId: dept.id };
  getAssetTypePie(params).then((res) => {
    const { code, data = [] } = res || {};
    if (code == 200) {
      chartData.value = data || [];
      total.value =
        chartData.value &&
        chartData.value.reduce((sum, item) => {
          return sum + item.count;
        }, 0);
      chartData.value &&
        chartData.value.forEach((item) => {
          item.per = (item.count / total.value) * 100 + "%";
          item.value = item.count;
        });
      option.value.title.text = handleLargeNumber(total.value);
      option.value.series[1].data = chartData.value;
      option.value.legend = {
        orient: "vertical",
        top: "middle",
        left: "50%",
        itemGap: 20, //图例之间的间距
        padding: [0, 0, 0, 2], // 图例与饼图间距
        icon: "circle",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          rich: {
            name: {
              padding: [0, 0, 0, 5], //图例 icon 与图例文字间距
              width: 100,
              color: "#FFFFFF",
              fontSize: 16,
              fontWeight: 400,
              align: "left",
              fontFamily: "MicrosoftYaHei",
            },
            value: {
              fontSize: 18,
              fontWeight: 400,
              align: "left",
              color: "#E1E6F9",
              fontFamily: "PangMenZhengDao",
            },
          },
        },
        data: chartData.value,
        formatter: function (param) {
          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.count;
        }
      });
    }
    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%;
  height: 200px;
  margin-top: 30px;
}
::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>
