<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 accountChartBoxPlot = ref();
const { setOptions } = useECharts(accountChartBoxPlot);

watch(
  () => props,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      // container: ".bar-card",
      // backgroundColor: "rgba(154,174,255,0.1)",
      tooltip: {
        trigger: "axis"
      },
      title: {
        text: "{a|} {b|交易金额特征}",
        show: false,
        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
      },
      xAxis: {
        // name: "充电起止SOC区间",
        // nameTextStyle: {
        //   color: "#999",
        //   padding: [0, 0, -20, 0],
        //   verticalAlign: "bottom"
        // },
        // nameGap: -40,
        data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        splitLine: {
          show: false,
          lineStyle: {
            color: "#EFF0F1"
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DCDCDC"
          }
        },
        axisTick: {
          show: true,
          alignWithLabel: true
        },
        axisLabel: {
          show: true,
          // textStyle: {
          color: "#999"
          // },
        }
      },
      yAxis: [
        {
          name: "数量",
          min: 0,
          max: 200,
          nameTextStyle: {
            color: "#999",
            padding: [-15, 0, 0, -33]
            // verticalAlign: "top"
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(80,112,242,0.2)",
              type: "dashed"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#DCDCDC"
            }
          },
          axisLabel: {
            show: true,
            // textStyle: {
            color: "#999"
            // },
          }
        },
        {
          name: "",
          min: 0,
          max: 120,
          nameTextStyle: {
            color: "#999",
            padding: [-15, 0, 0, 0],
            verticalAlign: "top"
          },
          position: "right",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            // textStyle: {
            color: "#999"
            // },
          }
        }
      ],
      series: [
        {
          name: "数量",
          yAxisIndex: 0,
          type: "boxplot",
          silent: true,
          boxWidth: [28, 28],
          // hoverAnimation: false,
          itemStyle: {
            // normal: {
            borderColor: "#1E7FF1",
            borderWidth: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(30, 127, 241, 0.7)" },
              { offset: 1, color: "rgba(30, 127, 241, 0)" }
            ]),
            color0: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(30, 127, 241, 0)" },
              { offset: 1, color: "rgba(30, 127, 241, 0.7)" }
            ])
            // },
          },
          data: [
            [50, 70, 85, 100, 120], // [min,  Q1,  median (or Q2),  Q3,  max]
            [25, 38, 56, 70, 85],
            [35, 45, 60, 86, 100],
            [40, 50, 75, 90, 110],
            [25, 38, 56, 70, 85],
            [50, 70, 85, 100, 120],
            [10, 50, 60, 70, 80]
          ]
        }
        // {
        //   name: "充电电流",
        //   yAxisIndex: 1,
        //   type: "boxplot",
        //   silent: true,
        //   boxWidth: [28, 28],
        //   // hoverAnimation: false,
        //   itemStyle: {
        //     // normal: {
        //     borderColor: "#15D0FC",
        //     borderWidth: 1,
        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       { offset: 0, color: "rgba(21, 208, 252, 0.7)" },
        //       { offset: 1, color: "rgba(21, 208, 252, 0)" }
        //     ]),
        //     color0: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       { offset: 0, color: "rgba(21, 208, 252, 0)" },
        //       { offset: 1, color: "rgba(21, 208, 252, 0.7)" }
        //     ])
        //     // }
        //   },
        //   data: [
        //     [50, 70, 85, 100, 120], // [min,  Q1,  median (or Q2),  Q3,  max]
        //     [25, 38, 56, 70, 85],
        //     [35, 45, 60, 86, 100],
        //     [40, 50, 75, 90, 110]
        //   ]
        // }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

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