<script setup lang="ts">
import { useECharts } from "@pureadmin/utils";
import { type PropType, ref, computed, watch, nextTick } from "vue";
import * as echarts from "echarts/core";
import resultDefaultAvatar from "../../../assets/home/resultDefaultAvatar.png";
import excelIcon from "@/assets/home/excel_icon.svg?component";

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

const accountChartGraph = ref();
const { setOptions } = useECharts(accountChartGraph);
const symbol = "image:///asset/get/s/data-1616488906907-TTcSsT2dL.png";

const dataNum = [
  {
    name: "张三三",
    value: { num: 55, type: 0 },
    draggable: false,
    x: 600,
    y: 185,
    symbolSize: 48,
    fixed: true,
    symbol: "image://" + resultDefaultAvatar
  },
  {
    name: "张芳芳",
    value: { num: 55, type: 1 },
    category: 1,
    draggable: false,
    x: 500,
    y: 184
  },
  {
    name: "李四1",
    value: { num: 55, type: 2 },
    category: 1,
    draggable: false,
    x: 700,
    y: 168
  },
  {
    name: "李四2",
    value: { num: 55, type: 3 },
    category: 1,
    draggable: false,
    x: 700,
    y: 198
  }
];
const linkData = [
  { source: 0, target: 1, value: "出账金额" },
  { source: 0, target: 2, value: "出账金额" },
  { source: 0, target: 3, value: "出账金额" }
];
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"
            }
          }
        }
      },
      center: [600, 185],
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true
      },
      series: [
        {
          type: "graph",
          layout: "none", // 图的布局
          symbol: "image://" + resultDefaultAvatar, // 默认是「未感染」
          symbolSize: 48,
          categories: [
            { name: "未感染" },
            { name: "无症状感染" },
            { name: "确诊病例" }
          ],
          label: {
            show: true,
            align: "center",
            fontSize: 14,
            color: "#666",
            formatter: params => {
              return `\n\n\n\n\n\n\n${params.name}`;
            },
            rich: {
              a0: {
                color: "#fff",
                padding: [4, 5],
                backgroundColor: "rgba(255, 86, 76, .45)"
              },
              a1: {
                color: "#fff",
                padding: [4, 5],
                backgroundColor: "rgba(255, 86, 76, .35)"
              }
            }
          },
          edgeSymbol: ["circle", "arrow"],
          edgeSymbolSize: [4, 8],
          edgeLabel: { show: true, formatter: "{c}" },
          data: dataNum,
          links: linkData,
          lineStyle: {
            opacity: 0.9,
            width: 1,
            curveness: 0,
            color: "#5070F2"
          }
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

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