<script setup lang="ts">
import { 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 accountChartBar = ref();
const { setOptions } = useECharts(accountChartBar);

// 定义 random 函数
const random = (min: number, max: number): number => {
  return Math.floor(Math.random() * (max - min)) + min;
};

// 注册形状绘制函数
const registerShapeFun = () => {
  const offsetX = 10;
  const offsetY = 5;

  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: (
      ctx: CanvasRenderingContext2D,
      shape: { xAxisPoint: number[]; x: number; y: number }
    ) => {
      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]);
      ctx.lineTo(c1[0], c1[1]);
      ctx.lineTo(c2[0], c2[1]);
      ctx.lineTo(c3[0], c3[1]);
      ctx.closePath();
    }
  });

  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: (
      ctx: CanvasRenderingContext2D,
      shape: { xAxisPoint: number[]; x: number; y: number }
    ) => {
      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]);
      ctx.lineTo(c2[0], c2[1]);
      ctx.lineTo(c3[0], c3[1]);
      ctx.lineTo(c4[0], c4[1]);
      ctx.closePath();
    }
  });

  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: (
      ctx: CanvasRenderingContext2D,
      shape: { x: number; y: number }
    ) => {
      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]);
      ctx.lineTo(c2[0], c2[1]);
      ctx.lineTo(c3[0], c3[1]);
      ctx.lineTo(c4[0], c4[1]);
      ctx.closePath();
    }
  });

  return [CubeLeft, CubeRight, CubeTop];
};

// 生成形状函数
const [CubeLeft, CubeRight, CubeTop] = registerShapeFun();
// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);

// 数据
const colorArr = [
  ["#3B9FFE", "#5070F2", "#5070F2"],
  ["#FFAC06", "#FFDA8D", "#FFB114"]
];

const seriesArr: number[][] = [];
const xAxisData: string[] = [];
const seriesData: any[] = [];

// 生成数据
for (let d = 0; d < 6; d++) {
  xAxisData.push("2023年" + d + 1 + "月");
}

for (let i = 0; i < 2; i++) {
  seriesArr[i] = [];
  for (let x = 0; x < 6; x++) {
    seriesArr[i].push(random(10, 80));
  }
}

for (let index = 0; index < 2; index++) {
  seriesData.push({
    type: "custom",
    name: index === 0 ? "出账金额" : "进账金额",
    renderItem: (params: any, api: any) => {
      const location = api.coord([api.value(0), api.value(1)]);
      return {
        type: "group",
        x: index === 1 ? 18 : -12,
        label: {
          show: true
        },
        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: colorArr[index][0]
                },
                {
                  offset: 1,
                  color: colorArr[index][1]
                }
              ])
            }
          },
          {
            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: colorArr[index][0]
                },
                {
                  offset: 1,
                  color: colorArr[index][1]
                }
              ])
            }
          },
          {
            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: colorArr[index][2]
            }
          }
        ]
      };
    },
    data: seriesArr[index]
  });
}
const yData1 = [100, 70, 20, 90, 50, 180];
const yData2 = [10, 50, 20, 30, 50, 100];

watch(
  () => props,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      // container: ".bar-card",
      // backgroundColor: "rgba(154,174,255,0.1)",
      tooltip: {
        // show: false
        trigger: "axis",
        textStyle: {
          fontSize: 20 // 字体大小
        },
        axisPointer: {
          type: "shadow"
        }
      },
      toolbox: {
        right: 15,
        feature: {
          // dataZoom: { yAxisIndex: "none" }, // 数据区域缩放
          // restore: { show: true }, // 重置
          myFull: {
            // 全屏
            show: false,
            title: "全屏",
            icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
            onclick: e => {
              // 全屏查看
              if (accountChartBar.value.requestFullScreen) {
                // HTML W3C 提议
                accountChartBar.value.requestFullScreen();
              } else if (accountChartBar.value.msRequestFullscreen) {
                // IE11
                accountChartBar.value.msRequestFullScreen();
              } else if (accountChartBar.value.webkitRequestFullScreen) {
                // Webkit
                accountChartBar.value.webkitRequestFullScreen();
              } else if (accountChartBar.value.mozRequestFullScreen) {
                // Firefox
                accountChartBar.value.mozRequestFullScreen();
              }
              // 退出全屏
              if (accountChartBar.value.requestFullScreen) {
                document.exitFullscreen();
              } else if (accountChartBar.value.msRequestFullScreen) {
                document.exitFullscreen();
              } else if (accountChartBar.value.webkitRequestFullScreen) {
                document.webkitCancelFullScreen();
              } else if (accountChartBar.value.mozRequestFullScreen) {
                document.mozCancelFullScreen();
              }
            }
          },
          saveAsImage: {
            show: false,
            title: "保存"
          } // 导出图片
        }
      },
      color: ["#5070F2", "#FFAC06", "#00B58C", "#082FF8"],
      legend: {
        show: true,
        // right: 30,
        bottom: 6,
        itemGap: 30,
        itemWidth: 12,
        itemHeight: 8,
        data: ["出账金额", "进账金额", "出账笔数", "进账笔数"],
        textStyle: {
          fontSize: 12,
          color: "#666"
        }
      },
      grid: {
        top: 60,
        left: 20,
        right: 20,
        bottom: 40,
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(80,112,242,1)"
            }
          },
          boundaryGap: true,
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            inside: false,
            interval: 0,
            rotate: 0,
            // textStyle: {
            color: "#8C8C8C",
            fontWeight: 400,
            fontSize: 12,
            // },
            margin: 15
          },
          data: xAxisData
        }
      ],
      yAxis: [
        {
          type: "value",
          name: `{a|} {b|出入账趋势}`,
          nameTextStyle: {
            color: "#333",
            // align: "center",
            padding: [15, 0, 0, 20],
            // fontSize: 16,
            // fontWeight: "bold",
            verticalAlign: "middle",
            rich: {
              a: {
                backgroundColor: "#5070F2",
                width: 2,
                height: 17,
                verticalAlign: "middle"
              },
              b: {
                padding: [2, 0, 0, 0],
                fontSize: 16,
                fontWeight: "bold"
              }
            }
          },
          nameGap: 40,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#333"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(80,112,242,0.3)"
            }
          },
          axisLabel: {
            // textStyle: {
            color: "#8C8C8C",
            fontWeight: 400,
            fontSize: 12,
            // },
            formatter: "{value}",
            margin: 15
          }
        },
        {
          type: "value",
          // name: "%",
          nameGap: 30,
          position: "right",
          nameTextStyle: {
            color: "#ffffff",
            fontWeight: 400,
            fontSize: 16
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "rgba(239, 247, 253, .1)"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(239, 247, 253, .1)"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 12,
            color: "#8C8C8C"
          },
          min: 0,
          max: Math.ceil(Math.max.apply(null, yData1) / 5) * 5,
          interval: Math.ceil(Math.max.apply(null, yData1) / 4)
        }
      ],
      series: [
        ...seriesData,
        {
          type: "bar",
          name: "出账金额",
          itemStyle: {
            color: "transparent"
          },
          tooltip: {
            show: false
          },
          data: seriesArr[0]
        },
        {
          type: "bar",
          itemStyle: {
            color: "transparent"
          },
          tooltip: {
            show: false
          },
          data: seriesArr[1]
        },
        {
          name: "出账笔数",
          type: "line",
          showSymbol: true,
          // smooth: true,
          symbol: "circle",
          symbolSize: 8,
          yAxisIndex: 1,
          itemStyle: {
            color: "#00B58C"
          },
          lineStyle: {
            width: 2
          },
          // areaStyle: {
          //   normal: {
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       {
          //         offset: 0,
          //         color: "rgba(67, 239, 255, .3)"
          //       },
          //       {
          //         offset: 1,
          //         color: "rgba(1, 17, 49, .3)"
          //       }
          //     ])
          //   }
          // },
          data: yData1
        },
        {
          name: "进账笔数",
          type: "line",
          showSymbol: true,
          // smooth: true,
          symbol: "circle",
          symbolSize: 8,
          yAxisIndex: 1,
          itemStyle: {
            color: "#082FF8"
          },
          lineStyle: {
            width: 2
          },
          // areaStyle: {
          //   normal: {
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       {
          //         offset: 0,
          //         color: "rgba(67, 239, 255, .3)"
          //       },
          //       {
          //         offset: 1,
          //         color: "rgba(1, 17, 49, .3)"
          //       }
          //     ])
          //   }
          // },
          data: yData2
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

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