<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 accountChartBehaviorGraph = ref();
const { setOptions } = useECharts(accountChartBehaviorGraph);
const symbol = "image:///asset/get/s/data-1616488906907-TTcSsT2dL.png";

const dataNum = [
  {
    name: "节点1",
    x: 300,
    y: 80,
    value: 200,
    category: 0
  },
  {
    name: "节点2",
    x: 300,
    y: 220,
    value: 30,
    category: 0
  },
  {
    name: "节点3",
    x: 550,
    y: 150,
    value: 40,
    category: 1
  },
  {
    name: "节点4",
    x: 750,
    y: 80,
    value: 25,
    category: 2
  },
  {
    name: "节点5",
    x: 750,
    y: 150,
    value: 25,
    category: 2
  },
  {
    name: "节点6",
    x: 750,
    y: 220,
    value: 25,
    category: 2
  }
];
const linkData = [
  {
    source: "节点3",
    target: "节点1",
    lineStyle: {
      // normal: {
      color: "#5070F2",
      curveness: 0.1
      // }
    }
  },
  {
    source: "节点3",
    target: "节点2",
    lineStyle: {
      // normal: {
      curveness: -0.1,
      color: "#5070F2"
      // }
    }
  },
  {
    source: "节点3",
    target: "节点4",
    lineStyle: {
      // normal: {
      curveness: -0.1,
      color: "#FFAC06"
      // }
    }
  },
  {
    source: "节点3",
    target: "节点5",
    lineStyle: {
      // normal: {
      curveness: 0,
      color: "#FFAC06"
      // }
    }
  },
  {
    source: "节点3",
    target: "节点6",
    lineStyle: {
      // normal: {
      curveness: 0.1,
      color: "#FFAC06"
      // }
    }
  }
];
watch(
  () => props,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      // container: ".bar-card",
      // backgroundColor: "rgba(154,174,255,0.1)",
      // tooltip: {
      //   show: false,
      //   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",
          symbolSize: 48,
          coordinateSystem: null,
          label: {
            // normal: {
            show: false,
            position: "bottom",
            color: "#ffffff"
            // }
          },
          edgeSymbol: ["none", "arrow"],
          edgeSymbolSize: 5,
          categories: [
            {
              name: "资本",
              itemStyle: {
                // normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#3B9FFE"
                  },
                  {
                    offset: 1,
                    color: "#5070F2"
                  }
                ])
                // }
              },
              label: {
                // normal: {
                fontSize: "14"
                // }
              }
            },
            {
              name: "大公司",
              itemStyle: {
                // normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#2832F3"
                  },
                  {
                    offset: 1,
                    color: "#757AFF"
                  }
                ])
                // }
              },
              label: {
                // normal: {
                fontSize: "20"
                // }
              }
            },
            {
              name: "小公司",
              itemStyle: {
                // normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#FFAC06"
                  },
                  {
                    offset: 1,
                    color: "#FFDA8D"
                  }
                ])
                // }
              },
              label: {
                // normal: {
                fontSize: "14"
                // }
              }
            }
          ],
          data: dataNum,
          links: linkData
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

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