import {
  getComVal,
  LinearGradient,
  RandomNumber,
  splitLineX,
  splitLineY,
} from "../echart-method";

/** 柱状图 */
export class Columnar {
  /** 柱条宽度 */
  static barWidth = 20;
  /**
   * 生成柱状模拟数据
   * @param arr x轴坐标名称
   * @returns 柱状模拟数据
   */
  static getColumnarData(arr?: string[]) {
    let stochastic_data: any = {};
    if (arr) {
      arr.forEach((e) => {
        stochastic_data[e] = RandomNumber(
          Math.ceil(Math.random() * 1),
          Math.ceil(Math.random() * 10)
        );
      });
    } else {
      getComVal("week").forEach((a: any) => {
        stochastic_data[a] = RandomNumber(
          Math.ceil(Math.random() * 1),
          Math.ceil(Math.random() * 10)
        );
      });
    }
    return stochastic_data;
  }
  /**
   * 生成多柱状模拟数据
   * @param arr 名称
   * @param length 长度
   * @returns 多柱状模拟数据
   */
  static getMultiColumnarData(arr?: string[], length?: number) {
    let stochastic_data: any = {};
    if (arr) {
      arr.forEach((e) => {
        if (!length) {
          stochastic_data[e] = [
            RandomNumber(0, 100),
            RandomNumber(0, 100),
            RandomNumber(0, 100),
          ];
        } else {
          let tempArr: any[] = [];
          for (let i = 0; i < length; i++) {
            tempArr.push(RandomNumber(0, 100));
          }
        }
      });
    } else {
      getComVal("week").forEach((a: any) => {
        if (!length) {
          stochastic_data[a] = [
            RandomNumber(0, 100),
            RandomNumber(0, 100),
            RandomNumber(0, 100),
            RandomNumber(0, 100),
            RandomNumber(0, 100),
          ];
        } else {
          let tempArr: any[] = [];
          for (let i = 0; i < length; i++) {
            tempArr.push(RandomNumber(0, 100));
          }
          stochastic_data[a] = tempArr;
        }
      });
    }
    return stochastic_data;
  }
  /**
   * 柱状图0
   * @param data 模拟数据
   * @returns 柱状图0配置项
   */
  static columnar0(data: any) {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: getComVal("colorData")[0],
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: splitLineX(),
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: splitLineY(),
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            /** 文字显示位置 */
            position: "top",
            color: getComVal("fontColor"),
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图1
   * @param data 模拟数据
   * @returns 柱状图1配置项
   */
  static columnar1(data: any) {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: getComVal("colorData")[0],
      /** 绘图颜色 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: splitLineX(),
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: splitLineY(),
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            /** 文字显示位置 */
            position: "top",
            color: getComVal("fontColor"),
          },
          showBackground: true,
          backgroundStyle: {
            color: getComVal("colorData")[0],
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图2
   * @param data 模拟数据
   * @param index 变色位置(从0开始)
   * @param color 要变的颜色
   * @returns 柱状图2配置项
   */
  static columnar2(data: any, index: number[], color?: string) {
    let dataArr = Object.values(data); // 数据数组
    let _color = color ? color : getComVal("colorData")[0]; // 要变的颜色
    // 遍历变色位置
    index.forEach((e) => {
      if (dataArr[e]) {
        let val = dataArr[e];
        dataArr[e] = {
          value: val,
          itemStyle: {
            color: _color,
          },
        };
      }
    });

    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: getComVal("colorData")[0],
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: splitLineX(),
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: splitLineY(),
      },
      series: [
        {
          barWidth: this.barWidth,
          data: dataArr,
          type: "bar",
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图3
   * @param data 模拟数据
   * @returns 柱状图3配置项
   */
  static columnar3(data: any) {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: getComVal("colorData")[0],
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: getComVal("legend"),
      /** 标题 */
      title: {},
      xAxis: {
        name: "Y",
        type: "value",
      },
      yAxis: {
        name: "X",
        data: Object.keys(data),
      },
      series: [
        {
          barWidth: this.barWidth,
          type: "bar", // 一定要放这个属性
          data: Object.values(data),
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图4
   * @param data 模拟数据
   * @returns 柱状图4配置项
   */
  static columnar4(data: any) {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: getComVal("colorData")[0],
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: splitLineX(),
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: splitLineY(),
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            position: "top",
            color: getComVal("fontColor"),
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图5
   * @param data 模拟数据
   * @param gradientColor 渐变颜色组
   * @returns 柱状图5配置项
   */
  static columnar5(data: any, gradientColor?: string[]) {
    let _gradientColor = gradientColor ? gradientColor : getComVal("colorData");
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: LinearGradient(_gradientColor),
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: splitLineX(),
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: splitLineY(),
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            /** 文字显示位置 */
            position: "top",
            color: getComVal("fontColor"),
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图6
   * @param data 模拟数据
   * @param color 颜色组
   * @returns 柱状图6配置项
   */
  static columnar6(data: any, color?: string[]) {
    let _color = color ? color : getComVal("colorData");
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: splitLineX(),
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: splitLineY(),
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            /** 文字显示位置 */
            position: "top",
            color: getComVal("fontColor"),
          },
          itemStyle: {
            normal: {
              color: function (params: any) {
                return _color[params.dataIndex];
              },
            },
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图7
   * @param data 模拟数据
   * @param gradientColor 渐变颜色组
   * @param yMax y轴最大值
   * @returns 柱状图7配置项
   */
  static columnar7(data: any, gradientColor?: string[], yMax?: number) {
    let xAxisName = Object.keys(data); // x轴坐标名称
    let _data = Object.values(data); // 数据
    let barBg: number[] = [];
    let _yMax = yMax ? yMax : 10; // y轴最大值
    _data.forEach(() => {
      barBg.push(yMax);
    });
    let _gradientColor = gradientColor ? gradientColor : getComVal("colorData");

    const option = {
      backgroundColor: getComVal("backgroundColor"),
      animation: true,
      grid: getComVal("grid"),
      tooltip: getComVal("tooltip"),
      xAxis: {
        data: xAxisName,
        axisLine: {
          show: false, // 隐藏X轴轴线
        },
        axisTick: {
          show: false, // 隐藏X轴刻度
        },
        splitLine: splitLineX(),
        axisLabel: {
          show: true,
          fontSize: 13,
          color: getComVal("fontColor"), // X轴文字颜色
        },
      },
      yAxis: [
        {
          type: "value",
          gridIndex: 0,
          min: 0,
          max: _yMax,
          interval: 1,
          splitLine: splitLineY(),
          axisTick: {
            show: false,
          },
          // y轴线
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)",
            },
          },
          axisLabel: {
            show: true,
            fontSize: 13,
            textStyle: {
              color: getComVal("fontColor"),
            },
          },
        },
      ],
      series: [
        {
          name: "",
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(49, 56, 60, 0.2)",
          },
          barWidth: this.barWidth,
          itemStyle: {
            label: {
              show: false,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            color: LinearGradient(_gradientColor),
          },
          data: _data,
          z: 10,
          zlevel: 0,
        },
        {
          // 分隔
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: getComVal("backgroundColor"),
            },
          },
          symbolRepeat: "fixed",
          symbolMargin: 10,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [23, 3],
          symbolPosition: "start",
          symbolOffset: [1, 1],
          data: barBg,
          z: 0,
          zlevel: 1,
        },
      ],
    };

    return option;
  }
  /**
   * 多条柱状图0
   * @param data 模拟数据
   * @returns 多条柱状图1配置项
   */
  static multiColumnar0(data: any) {
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      legend: {
        top: "3%",
      },
      grid: getComVal("grid"),
      tooltip: {},
      color: getComVal("colorData"),
      title: {},
      dataset: {
        dimensions: ["product", "one", "two", "three"],
        source: [
          {
            product: "Matcha Latte",
            one: data.one[0],
            two: data.two[0],
            three: data.three[0],
          },
          {
            product: "Milk Tea",
            one: data.one[1],
            two: data.two[1],
            three: data.three[1],
          },
          {
            product: "Cheese Cocoa",
            one: data.one[2],
            two: data.two[2],
            three: data.three[2],
          },
        ],
      },
      xAxis: {
        type: "category",
      },
      yAxis: {},
      series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
    };
    return option;
  }
}
