<script setup lang="ts">
import { useECharts } from "@pureadmin/utils";
import { type PropType, ref, computed, watch, nextTick } from "vue";
import * as echarts from "echarts/core";

const props = defineProps({
  requireData: {
    type: Array as PropType<Array<number>>,
    default: () => []
  },
  questionData: {
    type: Array as PropType<Array<number>>,
    default: () => []
  }
});

const accountChartPie = ref();
const { setOptions } = useECharts(accountChartPie);

// 定义 random 函数
const random = (min: number, max: number): number => {
  return Math.floor(Math.random() * (max - min)) + min;
};
const yData = [
  { value: "36", name: "银联入账" },
  { value: "48", name: "支付机构提现" },
  { value: "31", name: "电子汇入" },
  { value: "29", name: "消费" },
  { value: "59", name: "转账存入" }
];
const yData2 = [10, 50, 20, 30, 50, 100];

watch(
  () => props,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      // container: ".bar-card",
      // backgroundColor: "rgba(154,174,255,0.1)",
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          console.log(params);
          return params.name + ":" + params.value + "元";
        }
      },
      title: {
        text: "{a|} {b|资金用途}",
        left: 20,
        top: 12,
        textStyle: {
          lineHeight: 24,
          rich: {
            a: {
              backgroundColor: "#5070F2",
              width: 2,
              height: 17,
              verticalAlign: "middle"
            },
            b: {
              padding: [2, 0, 0, 0],
              fontSize: 16,
              color: "#333",
              // color: "333",
              fontWeight: "bold"
            }
          }
        }
      },
      grid: {
        top: 60,
        left: 20,
        right: 20,
        bottom: 40,
        containLabel: true
      },
      series: [
        {
          type: "pie",
          radius: ["20%", "60%"],
          center: ["50%", "50%"],
          itemStyle: {
            // borderRadius: 10,
            // borderWidth: 2,
            color: function (params) {
              const colorList = [
                {
                  c1: "#FFCC4A",
                  c2: "#FF7C09"
                },
                {
                  c1: "#028FF5",
                  c2: "#0032FF"
                },
                {
                  c1: "#06EA7C",
                  c2: "#04FFF2"
                },
                {
                  c1: "#FF7D05",
                  c2: "#FF0103"
                },
                {
                  c1: "#D19EFF",
                  c2: "#8500FF"
                }
              ];
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: colorList[params.dataIndex].c1
                },
                {
                  offset: 1,
                  color: colorList[params.dataIndex].c2
                }
              ]);
            }
          },
          label: {
            lineHeight: 25,
            formatter: function (params) {
              console.log(params);
              return (
                "{title|" +
                params.name +
                "}\n" +
                "{value|" +
                params.value +
                "元" +
                "}"
              );
            },
            rich: {
              title: {
                fontSize: 14,
                fontFamily: "PingFang SC",
                fontWeight: 500,
                color: "#333"
              },
              value: {
                fontSize: 14,
                fontFamily: "PingFang SC",
                fontWeight: 500,
                color: "#333"
              }
            },
            edgeDistance: 10
          },
          labelLine: {
            show: true,
            length2: 10,
            length: 30
          },
          data: yData as any
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div ref="accountChartPie" style="width: 100%; height: 100%" />
</template>
