import * as echarts from "echarts";
import { EChartsOption} from "echarts";
import { lightenColor } from "@shalu/utils";

/*********************************三维柱形图*********************************** */
export const get3dSeries = (series: EChartsOption["series"], index: number, color: EChartsOption["color"]) => {
  const leftShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
      // 侧面宽度
      const WIDTH = 15;
      // 斜角高度
      const OBLIQUE_ANGLE_HEIGHT = 8;
  
      const p1 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
      const p2 = [basicsXAxis - WIDTH, bottomYAxis];
      const p3 = [basicsXAxis, bottomYAxis];
      const p4 = [basicsXAxis, topBasicsYAxis];
  
      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });
  const rightShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
      // 侧面宽度
      const WIDTH = 15;
      // 斜角高度
      const OBLIQUE_ANGLE_HEIGHT = 8;
  
      const p1 = [basicsXAxis, topBasicsYAxis];
      const p2 = [basicsXAxis, bottomYAxis];
      const p3 = [basicsXAxis + WIDTH, bottomYAxis];
      const p4 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
  
      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });
  
  const topShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, basicsXAxis } = shape;
      // 侧面宽度
      const WIDTH = 15;
      // 斜角高度
      const OBLIQUE_ANGLE_HEIGHT = 8;
  
      const p1 = [basicsXAxis, topBasicsYAxis];
      const p2 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
      const p3 = [basicsXAxis, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT * 2];
      const p4 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
  
      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });
  
  echarts.graphic.registerShape("leftShape1", leftShape);
  echarts.graphic.registerShape("rightShape1", rightShape);
  echarts.graphic.registerShape("topShape1", topShape);

  return {
    ...series,
    type: "custom",
    renderItem: (_params: any, api: any) => {
      // 基础坐标

      //api.value(0)可以获取到对应的Index，value(1)获取到y轴value值
      //api.coord可以获取到某个点(索引,value)的坐标
      const basicsCoord = api.coord([api.value(0), api.value(1)]);
      // 顶部基础 y 轴,注意：是从顶部空白处到头部的距离
      const topBasicsYAxis = basicsCoord[1];
      // 基础 x 轴
      const basicsXAxis = basicsCoord[0] + index * 30;
      // 底部 y 轴  注意：y轴的距离都是从canvas左上角开始，到当前点位的距离
      const bottomYAxis = api.coord([api.value(0), 0])[1];

      const basicColor = Array.isArray(color) ? color[index % color.length] : color;
      const topColor = lightenColor(basicColor as string, 20);
      const leftColor = lightenColor(basicColor as string, -40);

      return {
        type: "group",
        children: [
          {
            type: "leftShape1",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              fill: leftColor,
              emphasis: {
                  fill: "yellow", // 鼠标高亮时的填充颜色
              },
            },
          },
          {
            type: "rightShape1",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              fill: basicColor,
              emphasis: {
                  fill: "yellow", // 鼠标高亮时的填充颜色
              },
            },
          },
          {
            type: "topShape1",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              fill: topColor,
            },
          },
        ],
      };
    },
  };
};


/*********************************圆柱体柱形图*********************************** */
export const getCircleSeries = (series: EChartsOption["series"], index: number, color: EChartsOption["color"]) => {
  const barShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
      // 侧面宽度
      const WIDTH = 15;
  
      const p1 = [basicsXAxis - WIDTH, topBasicsYAxis];
      const p2 = [basicsXAxis - WIDTH, bottomYAxis];
      const p3 = [basicsXAxis + WIDTH, bottomYAxis];
      const p4 = [basicsXAxis + WIDTH, topBasicsYAxis];
  
      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });
  
  echarts.graphic.registerShape("barShape1", barShape);
  
  return {
    ...series,
    type: "custom",
    renderItem: (_params: any, api: any) => {
      // 基础坐标

      //api.value(0)可以获取到对应的Index，value(1)获取到y轴value值
      //api.coord可以获取到某个点(索引,value)的坐标
      const basicsCoord = api.coord([api.value(0), api.value(1)]);
      // 顶部基础 y 轴,注意：是从顶部空白处到头部的距离
      const topBasicsYAxis = basicsCoord[1];
      // 基础 x 轴
      const basicsXAxis = basicsCoord[0] + index * 30;
      // 底部 y 轴  注意：y轴的距离都是从canvas左上角开始，到当前点位的距离
      const bottomYAxis = api.coord([api.value(0), 0])[1];

      const basicColor = Array.isArray(color) ? color[index % color.length] : color;

      return {
        type: "group",
        children: [
          {
            type: "barShape1",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              fill: basicColor,
            },
          },
          {
            type: 'ellipse',
            shape: {
              cx: basicsXAxis, // 圆心的 x 坐标
              cy: topBasicsYAxis, // 圆心的 y 坐标
              rx: 15, // 水平半径
              ry: 6  // 垂直半径
            },
            style: {
              fill: lightenColor(basicColor as string, 20), // 填充颜色
            }
          },
          {
            type: 'ellipse',
            shape: {
              cx: basicsXAxis, // 圆心的 x 坐标
              cy: bottomYAxis, // 圆心的 y 坐标
              rx: 15, // 水平半径
              ry: 6  // 垂直半径
            },
            style: {
              fill: basicColor, // 填充颜色
            }
          },
        ],
      };
    },
  };
};

/*********************************三角形柱形图*********************************** */
export const getTriangleSeries = (series: EChartsOption["series"], index: number, color: EChartsOption["color"]) => {
  const barShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
      // 侧面宽度
      const WIDTH = 15;
  
      const p1 = [basicsXAxis, topBasicsYAxis];
      const p2 = [basicsXAxis - WIDTH, bottomYAxis];
      const p3 = [basicsXAxis + WIDTH, bottomYAxis];
      const p4 = [basicsXAxis, topBasicsYAxis];
  
      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });
  
  echarts.graphic.registerShape("barShape2", barShape);
  
  return {
    ...series,
    type: "custom",
    renderItem: (_params: any, api: any) => {
      // 基础坐标

      //api.value(0)可以获取到对应的Index，value(1)获取到y轴value值
      //api.coord可以获取到某个点(索引,value)的坐标
      const basicsCoord = api.coord([api.value(0), api.value(1)]);
      // 顶部基础 y 轴,注意：是从顶部空白处到头部的距离
      const topBasicsYAxis = basicsCoord[1];
      // 基础 x 轴
      const basicsXAxis = basicsCoord[0] + index * 30;
      // 底部 y 轴  注意：y轴的距离都是从canvas左上角开始，到当前点位的距离
      const bottomYAxis = api.coord([api.value(0), 0])[1];

      const basicColor = Array.isArray(color) ? color[index % color.length] : color;

      return {
        type: "group",
        children: [
          {
            type: "barShape2",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              fill: basicColor,
            },
          },
        ],
      };
    },
  };
};

/*********************************三维三角柱形图*********************************** */
export const get3dTriangleSeries = (series: EChartsOption["series"], index: number, color: EChartsOption["color"]) => {
  const leftShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
      // 侧面宽度
      const WIDTH = 15;
  
      const p1 = [basicsXAxis, topBasicsYAxis];
      const p2 = [basicsXAxis - WIDTH, bottomYAxis];
      const p3 = [basicsXAxis, bottomYAxis];
      const p4 = [basicsXAxis, topBasicsYAxis];
  
      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });
  const rightShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
      // 侧面宽度
      const WIDTH = 15;
  
      const p1 = [basicsXAxis, topBasicsYAxis];
      const p2 = [basicsXAxis, bottomYAxis];
      const p3 = [basicsXAxis + WIDTH, bottomYAxis];
      const p4 = [basicsXAxis, topBasicsYAxis];
  
      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
    },
  });
  
  echarts.graphic.registerShape("leftShape3", leftShape);
  echarts.graphic.registerShape("rightShape3", rightShape);

  return {
    ...series,
    type: "custom",
    renderItem: (_params: any, api: any) => {
      // 基础坐标

      //api.value(0)可以获取到对应的Index，value(1)获取到y轴value值
      //api.coord可以获取到某个点(索引,value)的坐标
      const basicsCoord = api.coord([api.value(0), api.value(1)]);
      // 顶部基础 y 轴,注意：是从顶部空白处到头部的距离
      const topBasicsYAxis = basicsCoord[1];
      // 基础 x 轴
      const basicsXAxis = basicsCoord[0] + index * 30;
      // 底部 y 轴  注意：y轴的距离都是从canvas左上角开始，到当前点位的距离
      const bottomYAxis = api.coord([api.value(0), 0])[1];

      const basicColor = Array.isArray(color) ? color[index % color.length] : color;
      const leftColor = lightenColor(basicColor as string, -40);

      return {
        type: "group",
        children: [
          {
            type: "leftShape3",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              fill: leftColor,
              emphasis: {
                  fill: "yellow", // 鼠标高亮时的填充颜色
              },
            },
          },
          {
            type: "rightShape3",
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              fill: basicColor,
              emphasis: {
                  fill: "yellow", // 鼠标高亮时的填充颜色
              },
            },
          },
        ],
      };
    },
  };
};
