<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 { fa } from "element-plus/es/locale/index.mjs";

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

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

// var getname = ["SCI", "SSCI", "EI", "ISTP", "AHCI", "ISSHP", "其他"]; //期刊类别名称
// var getvalue = [1811, 868, 320, 208, 190, 120, 100]; //发表论文总数
const getamount = [200, 100, 500, 400, 600, 1000, 900]; //人均发表篇数
const getorderCount = [10, 15, 20, 30, 48, 50, 70]; //总被引用数

//2020年
// var getname2 = ["SCI", "SSCI", "EI", "ISTP", "AHCI", "ISSHP", "其他"]; //期刊类别名称
// var getvalue2 = [2811, 1568, 420, 308, 290, 220, 190]; //发表论文总数
const getamount2 = [100, 300, 500, 700, 900, 1200, 1500]; // 交易金额
const getorderCount2 = [3, 10, 70, 48, 42, 65, 30]; //总被引用数

let datas = [];
for (let i = 0; i < getamount.length; i++) {
  datas.push({
    // name: getname[i],
    // value: getvalue[i],
    amount: getamount[i],
    orderCount: getorderCount[i]
  });
}

let datas2 = [];
for (let i = 0; i < getamount2.length; i++) {
  datas2.push({
    // name: getname2[i],
    // value: getvalue2[i],
    amount: getamount2[i],
    orderCount: getorderCount2[i]
  });
}
function packDatas(datas) {
  let packedDatas = datas.map(data => {
    // let name = data["name"];
    let dispathCount = data["orderCount"];
    let refs = data["amount"];
    // let avt = data["value"];
    return [dispathCount, refs];
  });

  return packedDatas;
}
function packDatas2(datas2) {
  let packedDatas2 = datas2.map(data => {
    // let name = data["name"];
    let dispathCount = data["orderCount"];
    let refs = data["amount"];
    // let avt = data["value"];
    return [dispathCount, refs];
  });

  return packedDatas2;
}
let packedDatas = packDatas(datas);
let packedDatas2 = packDatas2(datas2);

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.value + "元";
        }
      },
      title: {
        text: "{a|} {b|交易金额特征}",
        left: 18,
        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: 80,
        left: 20,
        right: 50,
        bottom: 40,
        containLabel: true
      },
      yAxis: {
        name: "交易金额",
        nameTextStyle: {
          color: "#666",
          padding: [0, 26, 0, 0]
        },
        nameGap: 15,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(80,112,242,0.2)",
            type: "dashed"
          }
        },
        axisLabel: {
          color: "#999"
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DCDCDC"
          }
        }
      },
      xAxis: {
        name: "次数",
        nameTextStyle: {
          color: "#666"
        },
        // data: ["10", "20", "30", "40", "50"],
        axisLabel: {
          color: "#999"
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DCDCDC"
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "rgba(80,112,242,0.2)",
            type: "dashed"
          }
        },
        axisTick: {
          alignWithLabel: false,
          show: false
        }
      },
      series: [
        {
          name: "2010",
          symbolSize: function (data) {
            return data[1] / 20;
          },
          itemStyle: {
            // normal: {
            color: "#9CC8FF",
            borderColor: "#4B95F3",
            borderWidth: 2
            // }
          },
          data: packedDatas,
          type: "scatter"
        },
        {
          name: "2020",
          symbolSize: function (data) {
            return data[1] / 20;
          },
          itemStyle: {
            // normal: {
            color: "#FFD291",
            borderColor: "#F3B14B",
            borderWidth: 2
            // }
          },
          data: packedDatas2,
          type: "scatter"
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

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