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

/** 混合图表 */
export class MixChart {
  /** 混合图表模拟数据 */
  static getMixChartData(arr?: string[]) {
    let randomData: number[] = [];
    if (arr) {
      arr.forEach((e) => {
        randomData[e] =
          Math.ceil(Math.random() * 99) * (Math.round(Math.random()) ? 1 : -1);
      });
    } else {
      getComVal("xAxisName").forEach((e: any) => {
        randomData[e] =
          Math.ceil(Math.random() * 99) * (Math.round(Math.random()) ? 1 : -1);
      });
    }

    return randomData;
  }
  /**
   * 混合图表0
   * @param data 模拟数据
   * @returns 混合图表0配置项
   */
  static mixChart0(
    data: any,
    data2?: any,
    name?: string,
    color?: echarts.Color,
    name2?: string,
    color2?: echarts.Color
  ) {
    let _data2 = data2 ? data2 : this.getMixChartData();
    let _name = name ? name : "One";
    let _color = color ? color : "#ED589D";
    let _name2 = name2 ? name2 : "Two";
    let _color2 = color2 ? color2 : "#6C63F0";

    const option = {
      backgroundColor: getComVal("backgroundColor"),
      legend: {
        textStyle: {
          color: getComVal("font_color"),
        },
        left: "1%",
        top: "2%",
      },
      grid: getComVal("grid"),
      tooltip: getComVal("tooltip"),
      xAxis: {
        type: "category",
        data: Object.keys(data),
        axisLine: {
          show: true,
          lineStyle: {
            color: "black",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: splitLineX(),
      },
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "black",
            },
          },
          splitLine: splitLineY(),
        },
        {
          type: "value",
          alignTicks: false,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: "{value}%", //以百分比显示
          },
        },
      ],
      series: [
        {
          name: _name,
          data: Object.values(data),
          type: "line",
          smooth: false,
          yAxisIndex: 1,
          itemStyle: {
            color: _color,
          },
        },
        {
          name: _name2,
          data: Object.values(_data2),
          type: "bar",
          barMaxWidth: 30,
          yAxisIndex: 0,
          itemStyle: {
            color: _color2,
          },
          //   markLine: {
          //     data: [{ type: "average", name: "Avg" }],
          //     lineStyle: {
          //       color: "black",
          //     },
          //   },
        },
      ],
    };
    return option;
  }
}
