import { defaultSingleDataWithName, colorLibrary } from "../assets/common";
import { getSingleDataWithName, val, adaptiveS, colorOpacity } from "../methods/methods";

/** 饼图 */
export class Pie {
  /**
   * 获取饼图数据
   * @param name 名称
   * @param range 数据范围
   * @returns arr
   */
  static getPieData(name: string[], range?: number[]) {
    return getSingleDataWithName(name, range);
  }

  /**
   * 饼图0
   * @param data 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static pie0(data?: any, colorArr?: any[]) {
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      title: val("title"),
      tooltip: { trigger: "item" },
      series: [
        {
          type: "pie",
          radius: "70%",
          center: ["center", "center"],
          label: val("label"),
          emphasis: {
            scale: true,
          },
          data: d,
        },
      ],
    };

    return option;
  }
  /**
   * 饼图1
   * @param data 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static pie1(data?: any, colorArr?: any[]) {
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      tooltip: { trigger: "item" },
      legend: val("legend"),
      series: [
        {
          type: "pie",
          radius: ["30%", "70%"],
          roseType: "area",
          data: d,
          labelLine: {},
          label: {
            show: true,
            backgourndColor: "transparent",
          },
        },
      ],
    };

    return option;
  }
  /**
   * 饼图2
   * @param data 数据 格式:[data1,data2,data3]
   * @param colorArr 颜色组
   * @param text 小标题 格式:[text1,text2,text3]
   * @returns option
   */
  static pie2(data?: any[], colorArr?: any[], text?: any[]) {
    const d = data ? data : [defaultSingleDataWithName, defaultSingleDataWithName, defaultSingleDataWithName];

    const t = text ? text : ["textA", "textB", "textC"];
    const _colorArr = colorArr ? colorArr : val("colorData");
    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      grid: val("grid"),
      legend: {
        show: false,
      },
      tooltip: { trigger: "item" },
      title: [
        {
          subtext: t[0],
          left: "20%",
          top: "75%",
          textAlign: "center",
        },
        {
          subtext: t[1],
          left: "50%",
          top: "75%",
          textAlign: "center",
        },
        {
          subtext: t[2],
          left: "80%",
          top: "75%",
          textAlign: "center",
        },
      ],
      series: [
        {
          type: "pie",
          center: ["20%", "center"],
          radius: "40%",
          data: d[0],
          labelLine: {
            length: adaptiveS(5),
          },
          emphasis: {
            scale: true,
          },
        },
        {
          type: "pie",
          center: ["center", "center"],
          radius: "40%",
          data: d[1],
          labelLine: {
            length: adaptiveS(5),
          },
          emphasis: {
            scale: true,
          },
        },
        {
          type: "pie",
          center: ["80%", "center"],
          radius: "40%",
          data: d[2],
          labelLine: {
            length: adaptiveS(5),
          },
          emphasis: {
            scale: true,
          },
        },
      ],
    };

    return option;
  }
  /**
   * 饼图3
   * @param data 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static pie3(data?: any, colorArr?: any[]) {
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    let sum = 0;

    d.forEach((e: any) => {
      sum += e.value;
    });

    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      grid: val("grid"),
      legend: {
        type: "scroll",
        orient: "vertical",
        right: "20%",
        top: "center",
      },
      title: {
        text: sum,
        subtext: "数据总量",
        left: "49%",
        top: "42%",
        textStyle: {
          fontSize: adaptiveS(30),
          fontWeight: "bolder",
        },
        subtextStyle: {
          fontSize: adaptiveS(14),
          fontWeight: "bolder",
        },
        textAlign: "center",
      },
      series: [
        {
          type: "pie",
          radius: ["45%", "70%"],
          center: ["center", "center"],
          data: d,
          label: val("label"),
        },
      ],
    };
    return option;
  }
  /**
   * 饼图4
   * @param data 数据
   * @param colorArr 颜色组
   * @param scaleColor 刻度颜色
   * @returns option
   */
  static pie4(data?: any, colorArr?: any[], scaleColor?: any) {
    const index = Math.round(Math.random() * 9);
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const _scaleColor = scaleColor ? scaleColor : colorLibrary[index];
    let sum = 0;
    const scale_data: any[] = [];

    d.forEach((e: any) => {
      sum += e.value;
    });

    for (let i = 0; i < 100; i++) {
      scale_data.push(
        {
          value: 1,
          itemStyle: { color: _scaleColor },
        },
        {
          value: 3,
          itemStyle: {
            color: "transparent",
            borderColor: "transparent",
          },
          label: { show: false },
          labelLine: { show: false },
          color: val("backgroundColor"),
          borderColor: val("backgroundColor"),
          borderWidth: 0,
        }
      );
    }
    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      grid: val("grid"),
      title: {
        text: sum,
        subtext: "数据总量",
        left: "50%",
        top: "45%",
        textStyle: {
          fontSize: adaptiveS(60),
          fontWeight: "bolder",
        },
        subtextStyle: {
          fontSize: adaptiveS(20),
          fontWeight: "bolder",
        },
        textAlign: "center",
      },
      series: [
        {
          type: "pie",
          radius: ["45%", "70%"],
          data: d,
          label: {
            show: true,
            formatter: "{d|{d}%}\n{b|{b}}",
            rich: {
              d: { fontSize: adaptiveS(16), fontWeight: "bold" },
              b: { fontSize: adaptiveS(14), height: 20, fontWeight: "300" },
            },
          },
          labelLine: {
            length: 30,
          },
        },
        // 刻度
        {
          emphasis: {
            scale: true,
          },
          type: "pie",
          data: scale_data,
          radius: ["80%", "85%"],
          label: {
            position: "inside",
            show: false,
          },
        },
      ],
    };
    console.log(option);

    return option;
  }
  /**
   * 饼图5
   * @param data 数据
   * @param colorArr 颜色组
   * @param total 进度总量
   * @returns option
   */
  static pie5(data?: any, colorArr?: any[], total?: number) {
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const t = total ? total : 100;
    const s: any[] = [];
    const w = (100 - 20) / d.length;
    let v = "";

    d.forEach((e: any, index: any) => {
      v = _colorArr[index] ? _colorArr[index] : colorLibrary[index];
      s.push({
        name: e.name,
        type: "pie",
        radius: [w * (index + 1) + "%", w * index + 6 + "%"],
        labelLine: {
          show: false,
        },
        label: {
          show: false,
        },
        data: [
          {
            value: t - e.value,
            itemStyle: {
              color: colorOpacity(v, 0.1),
            },
            emphasis: {
              disabled: true,
            },
          },
          {
            name: e.name,
            value: e.value,
            itemStyle: {
              color: v,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: adaptiveS(14),
                align: "center",
                fontWeight: "bold",
                formatter: "{d}%\n{b|{b}}",
                backgroundColor: colorOpacity(v, 0.5),
                padding: [adaptiveS(5), adaptiveS(10)],
                position: "outer",
                rich: {
                  b: {
                    height: adaptiveS(20),
                  },
                },
              },
            },
          },
        ],
      });
    });

    const option = {
      backgroundColor: val("backgroundColor"),
      grid: val("grid"),
      legend: {
        left: "10%",
        top: "center",
        itemHeight: adaptiveS(10),
        itemGap: adaptiveS(8),
      },
      series: s,
    };

    return option;
  }
  /**
   * 饼图6
   * @param data 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static pie6(data?: any, colorArr?: any[]) {
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");

    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      tooltip: { trigger: "item" },
      legend: val("legend"),
      title: val("title"),
      series: [
        {
          name: "",
          type: "pie",
          radius: ["45%", "70%"],
          center: ["center", "center"],
          data: d,
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            length: false,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "25",
              fontWeight: "bold",
              formatter: "{d}%",
            },
          },
          itemStyle: {
            borderRadius: 10,
            borderColor: "#ffffff",
            borderWidth: 2,
          },
        },
      ],
    };

    return option;
  }
  /**
   * 饼图7
   * @param data 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static pie7(data?: any, colorArr?: any[]) {
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    let sum = 0;

    d.forEach((e: any) => {
      sum += e.value;
    });
    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      tooltip: { trigger: "item" },
      legend: val("legend"),
      title: {
        textAlign: "center",
        text: sum,
        subtext: "数据总量",
        left: "49%",
        top: "42%",
        textStyle: {
          fontSize: 30,
          fontWeight: "bolder",
        },
        subtextStyle: {
          fontSize: 14,
          fontWeight: "bolder",
        },
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: ["45%", "70%"],
          center: ["center", "center"],
          data: d,
          label: {
            show: true,
          },
          labelLine: {},
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
      ],
    };

    return option;
  }
  /**
   * 饼图8
   * @param data 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static pie8(data?: any, colorArr?: any[]) {
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const scale_data: any[] = [];
    let sum = 0;
    let v = 0;
    d.forEach((e: any) => {
      sum += e.value;
    });
    const rate = sum > 100 ? sum / 100 : 100 / sum;
    const isOver = sum > 100 ? true : false;

    // 根据每项数据渲染刻度圆
    d.forEach((e: any, index: number) => {
      for (let i = 0; i < 100; i++) {
        v = Math.round(isOver ? e.value / rate : e.value * rate);
        if (i <= v) {
          scale_data.push(
            {
              value: 1,
              itemStyle: {
                color: val("colorData")[index],
              },
            },
            {
              value: 3,
              itemStyle: {
                label: { show: false },
                labelLine: { show: false },
                color: val("backgroundColor"),
                borderColor: val("backgroundColor"),
                borderWidth: 0,
              },
            }
          );
        } else {
          break;
        }
      }
    });

    const option = {
      backgroundColor: val("backgroundColor"),
      color: _colorArr,
      grid: val("grid"),
      tooltip: { trigger: "item" },
      series: [
        // 刻度
        {
          name: "",
          type: "pie",
          data: scale_data,
          radius: ["80%", "85%"],
          label: {
            position: "center",
            show: false,
          },
        },
        {
          name: "",
          type: "pie",
          radius: ["45%", "70%"],
          labelLine: {
            show: false,
          },
          label: {
            show: false,
            position: "center",
          },
          data: d,
          emphasis: {
            label: {
              show: true,
              fontSize: "25",
              fontWeight: "bold",
              formatter: "{d}%\n占比",
            },
          },
        },
      ],
    };

    return option;
  }
  /**
   * 饼图9
   * @param data 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static pie9(data?: any, colorArr?: any[]) {
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const option = {
      backgroundColor: val("backgroundColor"),
      legend: val("legend"),
      tooltip: { trigger: "item" },
      title: val("title"),
      series: [
        {
          type: "pie",
          radius: ["40%", "85%"],
          center: ["center", "center"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 0,
            borderColor: val("backgroundColor"),
            borderWidth: adaptiveS(10),
            color: function (p: any) {
              return _colorArr[p.dataIndex] ? _colorArr[p.dataIndex] : colorLibrary[p.dataIndex];
            },
          },
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
          data: d,
        },
        {
          hoverAnimation: false,
          type: "pie",
          radius: ["40%", "65%"],
          center: ["center", "center"],
          roseType: "area",
          itemStyle: {
            borderRadius: adaptiveS(10),
            color: "rgba(0, 0, 0, 0.3)",
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [{ value: 100, name: "s" }],
        },
      ],
    };
    return option;
  }
  /**
   * 饼图10
   * @param data 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static pie10(data?: any, colorArr?: any[]) {
    const d = data ? data : defaultSingleDataWithName;
    const _colorArr = colorArr ? colorArr : val("colorData");
    const option = {
      backgroundColor: val("backgroundColor"),
      series: [
        {
          hoverAnimation: false,
          type: "pie",
          radius: ["50%", "80%"],
          itemStyle: {
            borderRadius: adaptiveS(10),
            color: function (p: any) {
              return _colorArr[p.dataIndex] ? _colorArr[p.dataIndex] : colorLibrary[p.dataIndex];
            },
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: d,
        },
        {
          type: "pie",
          radius: ["50%", "100%"],
          itemStyle: {
            borderColor: val("backgroundColor"),
            borderWidth: adaptiveS(10),
            color: function (p: any) {
              return _colorArr[p.dataIndex] ? colorOpacity(_colorArr[p.dataIndex], 0.1) : colorOpacity(colorLibrary[p.dataIndex], 0.1);
            },
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: d,
        },
      ],
    };
    return option;
  }
}