<script setup lang="ts">
import { useDark, 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 { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const barChartRef = ref();
const { setOptions } = useECharts(barChartRef, {
  theme
});

const name = [
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月"
];
const value = [100, 500, 400, 600, 700, 200, 450, 670, 900, 450, 670, 900];
// const toolTims = null;
const offsetX = 16;
const offsetY = 8;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - offsetX, shape.y - offsetY];
    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  }
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [xAxisPoint[0], xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
    const c4 = [shape.x + offsetX, shape.y - offsetY];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  }
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
    const c3 = [shape.x, shape.y - offsetX];
    const c4 = [shape.x - offsetX, shape.y - offsetY];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  }
});
// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);

watch(
  () => props,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      container: ".bar-card",
      // color: ["#41b6ff", "#e85f33"],
      // backgroundColor: "#010d3a",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        },
        formatter: function (params) {
          const item = params[1];
          return `${item.name}:${item.value}`;
        }
      },
      grid: {
        top: "8%",
        left: "0%",
        right: "0%",
        bottom: "0%",
        containLabel: true
      },
      // legend: {
      //   data: ["需求人数", "提问数量"],
      //   textStyle: {
      //     color: "#606266",
      //     fontSize: "0.875rem"
      //   },
      //   bottom: 0
      // },
      xAxis: [
        {
          type: "category",
          data: name,
          // X
          axisLine: {
            show: true,
            lineStyle: {
              // width: 1,
              type: "dashed",
              color: "#666"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 14,
            interval: 0
          }
        }
      ],
      yAxis: [
        {
          // name: "人数",
          type: "value",
          // y
          axisLine: {
            show: false,
            lineStyle: {
              // width: 1,
              // fontSize: 12,
              color: "#666666"
            }
          },
          splitLine: {
            show: true,
            // y-line
            lineStyle: {
              // width: 1,
              type: "dashed",
              color: "#DCDCDC"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 14
          }
          // name: "单位: 个"
        }
      ],
      series: [
        {
          // name: "",
          type: "custom",
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)]);
            return {
              type: "group",
              children: [
                {
                  type: "CubeLeft",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#417EFD"
                      },
                      {
                        offset: 1,
                        color: "#0044D2"
                      }
                    ])
                  }
                },
                {
                  type: "CubeRight",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#417EFD"
                      },
                      {
                        offset: 1,
                        color: "#0044D2"
                      }
                    ])
                  }
                },
                {
                  type: "CubeTop",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#0044D2"
                      },
                      {
                        offset: 1,
                        color: "#417EFD"
                      }
                    ])
                  }
                }
              ]
            };
          },
          data: value
        },
        {
          // name: "",
          type: "bar",
          label: {
            // normal: {
            show: false,
            position: "top",
            formatter: e => {
              return `${e.value}人`;
            },
            fontSize: 16,
            color: "#43C4F1",
            offset: [0, -15]
            // }
          },
          itemStyle: {
            color: "transparent"
          },
          tooltip: {},
          data: value
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div ref="barChartRef" style="width: 100%" />
</template>
