import * as echarts from "echarts";
import { defaultData, colorLibrary, defaultMultipleDataWithName } from "../assets/common";
import { getDataWithoutName, getMultipleDataWithName, val, splitLineX, splitLineY, colorOpacity, linearGradient, adaptiveS } from "../methods/methods";

/** 柱 */
export class Bar {
  /** 柱条宽度 */
  static barWidth = adaptiveS(20);

  /**
   * 获取单柱数据
   * @param xAxis x轴
   * @param range 数据范围
   * @returns obj
   */
  static getSingleBarData(xAxis: string[], range?: number[]) {
    return getDataWithoutName(xAxis, range);
  }
  /**
   * 获取多柱数据
   * @param xAxis x轴
   * @param name 名称
   * @param range 数据范围
   * @return obj
   */
  static getMultipleBarData(xAxis: string[], name: string[], range?: number[]) {
    return getMultipleDataWithName(xAxis, name, range);
  }

  /**
   * 柱0
   * @param data 数据
   * @param color 柱颜色
   * @returns option
   */
  static bar0(data?: any, color?: any) {
    const d = data ? data : defaultData;
    const c = color ? color : val("colorData");

    const option = {
      backgroundColor: val("backgroundColor"),
      color: c,
      grid: val("grid"),
      tooltip: { trigger: "item" },
      title: val("title"),
      xAxis: {
        type: "category",
        data: Object.keys(d),
        splitLine: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        type: "value",
        splitLine: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: [
        {
          data: Object.values(d),
          type: "bar",
          label: {
            show: true,
            position: "top",
            color: val("fontColor"),
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱1
   * @param data 数据
   * @param barColor 柱颜色
   * @param barBgColor 柱背景色
   * @returns option
   */
  static bar1(data?: any, barColor?: any, barBgColor?: any) {
    const d = data ? data : defaultData;
    const _barColor = barColor ? barColor : val("colorData");
    const _barBgColor = barBgColor ? barBgColor : colorOpacity(val("colorData")[0], 0.1);

    const o = {
      backgroundColor: val("backgroundColor"),
      color: _barColor,
      grid: val("grid"),
      tooltip: { trigger: "item" },
      legend: val("legend"),
      title: val("title"),
      xAxis: {
        name: "",
        type: "category",
        data: Object.keys(d),
        splitLine: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        name: "",
        type: "value",
        splitLine: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: [
        {
          data: Object.values(d),
          type: "bar",
          label: {
            show: true,
            position: "top",
            color: val("fontColor"),
          },
          // 柱背景
          showBackground: true,
          backgroundStyle: {
            color: _barBgColor,
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return o;
  }
  /**
   * 柱2
   * @param data 数据
   * @param index 变色柱(数组下标从0开始)
   * @param color 要变的颜色
   * @returns option
   */
  static bar2(data?: any, index?: number, color?: any) {
    const d = data ? data : defaultData;
    const i = index ? index : 0;
    const c = color ? color : val("colorData");
    const arr: any[] = Object.values(d); // 添加柱变色
    let t = 0;

    for (let v = 0; v < Object.values(d).length; v++) {
      if (i === v) {
        t = arr[v];
        arr[v] = {
          value: t,
          itemStyle: {
            color: c,
          },
        };
      }
    }

    const option = {
      backgroundColor: val("backgroundColor"),
      color: val("colorData"),
      grid: val("grid"),
      tooltip: { trigger: "item" },
      legend: val("legend"),
      title: val("title"),
      xAxis: {
        name: "",
        type: "category",
        data: Object.keys(d),
        splitLine: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        name: "",
        type: "value",
        splitLine: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: [
        {
          type: "bar",
          data: arr,
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱3
   * @param data 数据
   * @param color 颜色
   * @returns option
   */
  static bar3(data?: any, color?: any) {
    const d = data ? data : defaultData;
    const c = color ? color : val("colorData");

    const option = {
      backgroundColor: val("backgroundColor"),
      color: c,
      grid: val("grid"),
      tooltip: { trigger: "item" },
      legend: val("legend"),
      title: val("title"),
      xAxis: {
        name: "",
        type: "value",
        splitLine: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        name: "",
        data: Object.keys(d),
        splitLine: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: [
        {
          type: "bar",
          data: Object.values(d),
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱4
   * @param data 数据
   * @param color 颜色
   * @returns option
   */
  static bar4(data?: any, color?: any) {
    const d = data ? data : defaultData;
    const c = color ? color : val("colorData");
    const option = {
      backgroundColor: val("backgroundColor"),
      color: linearGradient(c),
      grid: val("grid"),
      tooltip: { trigger: "item" },
      legend: val("legend"),
      title: val("title"),
      xAxis: {
        name: "",
        type: "category",
        data: Object.keys(d),
        splitLine: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        name: "",
        type: "value",
        splitLine: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: [
        {
          type: "bar",
          label: {
            show: true,
            position: "top",
            color: val("fontColor"),
          },
          data: Object.values(d),
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱5
   * @param data 数据
   * @param color 颜色
   * @returns option
   */
  static bar5(data?: any, color?: any) {
    const d = data ? data : defaultData;
    const c = color ? color : val("colorData");
    const o = {
      backgroundColor: val("backgroundColor"),
      grid: val("grid"),
      tooltip: { trigger: "item" },
      legend: val("legend"),
      title: val("title"),
      xAxis: {
        name: "",
        type: "category",
        data: Object.keys(d),
        splitLine: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        name: "",
        type: "value",
        splitLine: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: [
        {
          data: Object.values(d),
          type: "bar",
          barWidth: this.barWidth,
          label: {
            show: true,
            position: "top",
            color: val("fontColor"),
          },
          itemStyle: {
            color: (params: any) => {
              const i = params.dataIndex;
              return c[i] ? c[i] : colorLibrary[Math.floor(Math.random() * colorLibrary.length)];
            },
          },
        },
      ],
    };

    return o;
  }
  /**
   * 柱6
   * @param data 数据
   * @param colorArr 颜色组
   * @param barBgColor 柱背景色
   * @param yMax y轴最大值
   * @returns option
   */
  static bar6(data?: any, colorArr?: any[], barBgColor?: any, yMax?: number) {
    const d = data ? data : defaultData;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const _yMax = yMax ? yMax : 10;
    const _barBgColor = barBgColor ? barBgColor : "rgba(77, 128, 254, 0.2)";
    const back: number[] = []; // 背景柱条

    Object.keys(d).forEach(() => {
      back.push(_yMax);
    });

    const option = {
      backgroundColor: val("backgroundColor"),
      grid: val("grid"),
      tooltip: { trigger: "item" },
      animation: true,
      xAxis: {
        data: Object.keys(d),
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: splitLineX(),
        axisLabel: {
          show: true,
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        type: "value",
        gridIndex: 0,
        min: 0,
        max: _yMax,
        interval: 1,
        splitLine: splitLineY(),
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: [
        // 柱
        {
          type: "bar",
          barWidth: this.barWidth,
          showBackground: true,
          backgroundStyle: {
            color: _barBgColor,
          },
          itemStyle: {
            label: {
              show: false,
              position: "top",
              color: val("fontColor"),
              fontSize: adaptiveS(10),
            },
            color: linearGradient(_colorArr),
          },
          data: Object.values(d),
        },
        //  分隔线
        {
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: val("backgroundColor"),
            },
          },
          symbolRepeat: "fixed",
          symbolMargin: 10,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [30, 2],
          symbolPosition: "start",
          symbolOffset: [0, 20],
          data: back,
          zlevel: 1,
        },
      ],
    };
    return option;
  }

  /**
   * 柱7
   * @param data 数据
   * @param colorArr 颜色组
   * @param borderColor 边框颜色
   * @param shadowColor 阴影颜色
   * @returns otpion
   */
  static bar7(data?: any, colorArr?: any[], borderColor?: any, shadowColor?: any) {
    const d = data ? data : defaultData;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const border_color = borderColor ? borderColor : linearGradient(val("colorData"));
    const shadow_color = shadowColor ? shadowColor : "rgba(10, 254, 232, 1)";

    const option = {
      backgroundColor: val("backgroundColor"),
      title: val("title"),
      grid: val("grid"),
      tooltip: { trigger: "item" },
      xAxis: {
        type: "category",
        data: Object.keys(d),
        splitLine: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        type: "value",
        splitLine: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: [
        {
          type: "bar",
          label: {
            show: true,
            position: "top",
            color: val("fontColor"),
          },
          data: Object.values(d),
          barWidth: this.barWidth,
          showBackground: true,
          itemStyle: {
            borderWidth: 1,
            borderColor: border_color,
            shadowColor: shadow_color,
            shadowBlur: 8,
            color: linearGradient(_colorArr),
          },
        },
      ],
    };

    return option;
  }
  /**
   * 柱8
   * @param data 数据
   * @param colorArr 柱颜色
   * @param gridColor 网格颜色
   * @returns option
   */
  static bar8(data?: any, colorArr?: any, gridColor?: any) {
    const d = data ? data : defaultData;
    const _colorArr = colorArr ? colorArr : linearGradient(val("colorData"));
    const _gridColor = gridColor ? gridColor : val("backgroundColor");

    const option = {
      backgroundColor: val("backgroundColor"),
      color: val("colorData"),
      grid: {
        backgroundColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: _gridColor },
          { offset: 1, color: colorOpacity(_gridColor, 0) },
        ]),
        ...val("grid"),
      },
      tooltip: { trigger: "item" },
      title: val("title"),
      xAxis: {
        type: "category",
        data: Object.keys(d),
        splitLine: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        type: "value",
        splitLine: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: [
        {
          data: Object.values(d),
          type: "bar",
          label: {
            show: true,
            position: "top",
            color: val("fontColor"),
          },
          itemStyle: {
            color: _colorArr,
          },
          barWidth: this.barWidth,
        },
      ],
    };

    return option;
  }
  /**
   * 多柱0
   * @param obj 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static multipleBar0(obj?: any, colorArr?: any[]) {
    const o = obj ? obj : defaultMultipleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const s: any[] = [];

    o.data.forEach((e: any) => {
      s.push({
        type: "bar",
        name: e.name,
        data: e.value,
        barWidth: this.barWidth,
      });
    });

    const option = {
      backgroundColor: val("backgroundColor"),
      legend: {
        top: "3%",
      },
      grid: val("grid"),
      tooltip: { trigger: "axis" },
      color: _colorArr,
      title: val("title"),
      xAxis: {
        type: "category",
        data: o.xAxis,
        splitLine: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        splitLine: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      series: s,
    };
    return option;
  }
  /**
   * 多柱1
   * @param obj 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static multipleBar1(obj?: any, colorArr?: any[]) {
    const o = obj ? obj : defaultMultipleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const s: any[] = [];

    o.data.forEach((e: any) => {
      s.push({
        type: "bar",
        name: e.name,
        data: e.value,
        barWidth: this.barWidth,
      });
    });

    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      grid: val("grid"),
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: val("legend"),
      xAxis: {
        type: "value",
        splitLineX: splitLineX(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
      },
      yAxis: {
        type: "category",
        splitLineY: splitLineY(),
        axisLabel: {
          fontSize: adaptiveS(10),
          color: val("fontColor"),
        },
        data: o.xAxis,
      },
      series: s,
    };
    return option;
  }
  /**
   * 多柱状2
   * @param obj 数据
   * @param colorArr 颜色组
   * @returns
   */
  static multipleBar2(obj?: any, colorArr?: any[]) {
    const o = obj ? obj : defaultMultipleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const s: any[] = [];

    o.data.forEach((e: any) => {
      s.push({
        name: e.name,
        type: "bar",
        stack: "total", // 堆叠图
        barWidth: this.barWidth,
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: val("backgroundColor"),
        },
        data: e.value,
      });
    });
    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      tooltip: {
        trigger: "item",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        left: "1%",
        top: "0%",
        icon: "rect",
        itemGap: adaptiveS(30),
        itemHeight: adaptiveS(5),
        itemWidth: adaptiveS(14),
        textStyle: {
          fontSize: adaptiveS(14),
          color: val("fontColor"),
        },
      },
      grid: val("grid"),
      yAxis: {
        type: "value",
        splitLine: splitLineY(),
        axisLabel: {
          color: val("fontColor"),
          fontSize: adaptiveS(10),
        },
      },
      xAxis: {
        type: "category",
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: val("fontColor"),
          fontSize: adaptiveS(10),
        },
        axisTick: {
          alignWithLabel: true,
        },
        data: o.xAxis,
      },
      series: s,
    };

    return option;
  }
}