import { Color } from "echarts";
import { getComVal, LinearGradient, RandomNumber } from "../echart-method";

/** 柱状 */
export class Columnar {
  /** 柱条宽度 */
  static barWidth = 20;

  /**
   * 生成柱状模拟数据
   * @returns 柱状模拟数据
   */
  /**
   * 生成柱状模拟数据
   * @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;
  }
  /**
   * 生成多柱状模拟数据
   * @returns 多柱状模拟数据
   */
  /**
   * 生成多柱状模拟数据
   * @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("color_data")[0],
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: {
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            /** 文字显示位置 */
            position: "top",
            color: getComVal("font_color"),
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /** 柱状图1 */
  /**
   * 柱状图1
   * @param data 模拟数据
   * @returns 柱状图1配置项
   */
  static columnar1(data: any) {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: getComVal("color_data")[0],
      /** 绘图颜色 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            /** 文字显示位置 */
            position: "top",
            color: getComVal("font_color"),
          },
          showBackground: true,
          backgroundStyle: {
            color: getComVal("color_data")[0],
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图2
   * @param data 模拟数据
   * @returns 柱状图2配置项
   */
  /**
   * 柱状图2
   * @param data 模拟数据
   * @param index 变色位置
   * @param color 要变的颜色
   * @returns 柱状图2配置项
   */
  static columnar2(data: any, index: number, color?: Color) {
    let colArr: any[] = []; // 系列数组
    let dataArr = Object.values(data); // 数据值
    for (let i = 0; i < dataArr.length; i++) {
      if (i == index - 1) {
        colArr.push({
          value: dataArr[i],
          itemstyle: {
            color: color ? color : getComVal("color_data")[1],
          },
        });
      } else {
        colArr.push(dataArr[i]);
      }
    }
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: getComVal("color_data")[0],
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
      },
      yAxis: {
        name: "Y",
        type: "value",
      },
      series: [
        {
          barWidth: this.barWidth,
          data: colArr,
          type: "bar",
        },
      ],
    };
    return option;
  }
  /** 柱状3 */
  /**
   * 柱状图3
   * @param data 模拟数据
   * @returns 柱状图3配置项
   */
  static columnar3(data: any) {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: getComVal("color_data")[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("color_data")[0],
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: {
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            position: "top",
            color: getComVal("font_color"),
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图5
   * @param data 模拟数据
   * @param gradientColor 渐变颜色组
   * @returns 柱状图5配置项
   */
  static columnar5(data: any, gradientColor: string[]) {
    let _gradientColor = gradientColor
      ? gradientColor
      : getComVal("color_data");
    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: {
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            /** 文字显示位置 */
            position: "top",
            color: getComVal("font_color"),
          },
          barWidth: this.barWidth,
        },
      ],
    };
    return option;
  }
  /**
   * 柱状图6
   * @param data 模拟数据
   * @param color 颜色
   * @returns
   */
  static columnar6(data: any, color: any) {
    if (color == null) {
      color = getComVal("color_data");
    }
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: {
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "bar",
          label: {
            show: true,
            /** 文字显示位置 */
            position: "top",
            color: getComVal("font_color"),
          },
          itemStyle: {
            normal: {
              color: function (params: any) {
                return color[params.dataIndex];
              },
            },
          },
          barWidth: this.barWidth,
        },
      ],
    };
    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("color_data"),
      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;
  }
}
