<template>
  <div ref="chartRef" :id="props.id" class="pieChart"></div>
</template>
<script setup lang="ts">
  import * as echarts from 'echarts/core';
  import { GraphicComponent } from 'echarts/components';
  import { PieChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  import { onMounted, onUnmounted, ref, watch } from 'vue';
  import type { PieChartData } from '../types';

  const props = defineProps<{
    data: PieChartData[];
    id: string;
  }>();

  echarts.use([PieChart, GraphicComponent, CanvasRenderer]);
  const chartRef = ref<HTMLElement | null>(null);

  const sum = ref(props.data.reduce((acc, cur) => acc + cur.value, 0));
  let chartElement;

  onMounted(() => {
    chartElement = echarts.init(chartRef.value!);
    if (chartElement) {
      initChart(chartElement);
      drawChart(chartElement);
    }
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    if (chartElement) {
      chartElement.dispose();
    }
  });

  const drawChart = (doughnut: echarts.ECharts) => {
    const chartOption = {
      series: [
        {
          data: props.data,
        },
      ],
    };
    doughnut.setOption(chartOption);
  };

  const initChart = (doughnut: echarts.ECharts) => {
    const chartOption = {
      graphic: [
        {
          type: 'group',
          width: '60%',
          children: [
            {
              type: 'text',
              left: 'center',
              top: '90px',
              z: 10,
              style: {
                text: `${sum.value}`,
                fill: '#1777ff',
                fontSize: 25,
                fontWeight: 'bold',
              },
            },
            {
              type: 'text',
              left: 'center',
              top: '125px',
              z: 10,
              style: {
                text: '总人数',
                fill: '#1777ff',
                fontSize: 14,
              },
            },
          ],
        },

        {
          type: 'text',
          left: '5%',
          bottom: '5px',
          z: 10,
          style: {
            text: '说明：常驻外部人员及临时项目报备人员除外',
            fill: '#CCCDD0',
            fontSize: 14,
          },
        },
      ],
      // legend: {
      //   orient: 'vertical',
      //   top: 'center',
      //   right: '20%',
      //   icon: 'circle',
      //   formatter: (name) => {
      //     const item = props.data.find((item) => item.name === name);
      //     return `{a|${name}} ` + (item?.id === 1 ? `{b|${item.value}} ` : `{c|${item?.value}} `) + `{a|人}`;
      //   },
      //   textStyle: {
      //     rich: {
      //       a: {
      //         fontSize: 14,
      //         color: '#8B8B8B',
      //       },
      //       b: {
      //         fontSize: 14,
      //         color: '#3777FD',
      //       },
      //       c: {
      //         fontSize: 14,
      //         color: '#F1C7A3',
      //       },
      //     },
      //   },
      // },
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['30%', '50%'],
          clockwise: true,
          avoidLabelOverlap: false,
          // padAngle: 5, // 升级到5.5.0后，padAngle参数生效，但是存在数据为0时间距仍然存在的问题，先注释
          label: {
            show: false,
          },
          emphasis: {
            itemStyle: {
              borderColor: '#f3f3f3',
              borderWidth: 5,
            },
          },
          data: props.data,
          itemStyle: {
            normal: {
              color: function (params) {
                const colorList = [
                  ['#3777FD', '#52A8FF'],
                  ['#F1C7A3', '#F19570'],
                ];
                const index = params.dataIndex;
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colorList[index][0],
                  },
                  {
                    offset: 1,
                    color: colorList[index][1],
                  },
                ]);
              },
            },
          },
        },
      ],
    };
    doughnut.setOption(chartOption);
    window.addEventListener('resize', handleResize);
  };
  // 处理窗口大小变化
  const handleResize = () => {
    if (chartElement) {
      chartElement.resize();
    }
  };

  watch(
    () => props.data,
    () => {
      sum.value = props.data.reduce((acc, cur) => acc + cur.value, 0);
      drawChart(chartElement);
    },
  );
</script>

<style scoped lang="scss">
  .pieChart {
    height: 100%;
  }
</style>
