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

/** 饼图 */
export class Pie {
  /**
   * 生成饼图模拟数据
   * @param arr 名称
   * @returns 饼图模拟数据
   */
  static getPieData(arr?: string[]) {
    let stochastic_data: any[] = [];
    if (arr) {
      arr.forEach((e) => {
        stochastic_data.push({
          value: RandomNumber(
            Math.ceil(Math.random() * 1),
            Math.ceil(Math.random() * 10)
          ),
          name: e,
        });
      });
    } else {
      getComVal("week").forEach((a: any) => {
        stochastic_data.push({
          value: RandomNumber(
            Math.ceil(Math.random() * 1),
            Math.ceil(Math.random() * 10)
          ),
          name: a,
        });
      });
    }
    return stochastic_data;
  }
  /**
   * 饼图0
   * @param data 模拟数据
   * @returns 饼图0配置项
   */
  static pie0(data: any) {
    const option = {
      /** 图表背景色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 饼图颜色 */
      color: getComVal("color_data"),
      tooltip: getComVal("tooltip"),
      series: [
        {
          type: "pie",
          radius: "50%",
          data: data,
          /** 鼠标悬浮是否显示缩放效果 */
          emphasis: {
            scale: true,
          },
        },
      ],
    };
    return option;
  }
  /**
   * 饼图1
   * @param data 模拟数据
   * @returns 饼图1配置项
   */
  static pie1(data: any) {
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      tooltip: getComVal("tooltip"),
      series: [
        {
          type: "pie",
          radius: "50%",
          data: data,
          emphasis: {
            /** 鼠标悬浮是否显示缩放效果 */
            scale: true,
          },
        },
      ],
    };
    return option;
  }
  /**
   * 饼图2
   * @param data 模拟数据
   * @returns 饼图2配置项
   */
  static pie2(data: any) {
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      tooltip: getComVal("tooltip"),
      legend: {
        top: "5%",
      },
      series: [
        {
          type: "pie",
          radius: ["15%", "55%"],
          roseType: "area",
          data: data,
          labelLine: {
            length: 8,
          },
          label: {
            show: true,
            formatter: "{b}:{c}",
            backgroundColor: "#F6F8FC",
            rich: {
              b: {
                fontSize: 10,
                lineHeight: 22,
                color: "#985748",
                borderWidth: 1,
              },
              c: {
                fontSize: 10,
                fontWeight: "bold",
                color: "red",
              },
            },
          },
        },
      ],
    };
    return option;
  }
  /**
   * 饼图3
   * @param data 模拟数据
   * @returns 饼图3配置项
   */
  static pie3(data: any) {
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      tooltip: getComVal("tooltip"),
      title: [
        {
          subtext: "文案B",
          left: "25%",
          top: "75%",
          textAlign: "center",
        },
        {
          subtext: "文案B",
          left: "50%",
          top: "75%",
          textAlign: "center",
        },
        {
          subtext: "文案C",
          left: "75%",
          top: "75%",
          textAlign: "center",
        },
      ],
      series: [
        {
          type: "pie",
          center: ["25%", "40%"],
          radius: 40,
          data: data,
          emphasis: {
            scale: true,
          },
        },
        {
          type: "pie",
          center: ["50%", "40%"],
          radius: 40,
          data: data,
          emphasis: {
            scale: true,
          },
        },
        {
          type: "pie",
          center: ["75%", "40%"],
          radius: 40,
          data: data,
          emphasis: {
            scale: true,
          },
        },
      ],
    };
    return option;
  }
  /**
   * 饼图4
   * @param data 模拟数据
   * @returns 饼图4配置项
   */
  static pie4(data: any) {
    let pie4_data_sun = 0;
    data.forEach((e: any) => {
      pie4_data_sun += e.value;
    });

    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      grid: getComVal("grid"),
      title: {
        text: pie4_data_sun as number | string,
        subtext: "数据总量",
        color: "black",
        left: "49%",
        top: "42%",
        textStyle: {
          fontSize: 30,
          fontWeight: "bolder",
          color: getComVal("color_data")[0],
          fontFamily: "Microsoft YaHei",
        },
        subtextStyle: {
          fontSize: 14,
          fontWeight: "bolder",
          color: getComVal("color_data")[1],
        },
        textAlign: "center",
      },
      series: [
        {
          type: "pie",
          radius: ["45%", "65%"],
          data: data,
          label: getComVal("label"),
        },
      ],
    };
    return option;
  }
  /**
   * 饼图5
   * @param data 模拟数据
   * @returns 饼图5配置项
   */
  static pie5(data: any) {
    let pie5_data_sun = 0;
    data.forEach((e: any) => {
      pie5_data_sun += e.value;
    });

    let rzcl = 0;
    let labelItemArr: any[] = [];
    for (let i = 0; i < 100; ++i) {
      labelItemArr.push(
        {
          value: 1,
          name: i,
          itemStyle: { color: i < rzcl ? "#00ACFF" : "#024ADD" },
        },
        {
          value: 3,
          name: "",
          itemStyle: {
            label: { show: false },
            labelLine: { show: false },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        }
      );
    }
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      grid: getComVal("grid"),
      title: {
        text: pie5_data_sun as number | string,
        subtext: "数据总量",
        color: "red",
        left: "49%",
        top: "42%",
        textStyle: {
          fontSize: 20,
          fontWeight: "bolder",
          color: getComVal("color_data")[0],
          fontFamily: "Microsoft YaHei",
        },
        subtextStyle: {
          fontSize: 14,
          fontWeight: "bolder",
          color: getComVal("color_data")[1],
        },
        textAlign: "center",
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "55%"],
          data: data,
          label: {
            show: true,
            formatter: "{d|{d}%}\n{b|{b}}",
            rich: {
              d: {
                color: getComVal("color_data")[0],
                fontWeight: "bold",
              },
              b: {
                color: "#999",
                fontWeight: "300",
              },
            },
          },
          labelLine: {
            length: 40,
          },
          itemstyle: {
            borderWidth: 4,
            borderColor: "red",
          },
          z: 0,
        },
        {
          emphasis: {
            scale: true,
          },
          type: "pie",
          z: 2,
          data: labelItemArr,
          // color: '#000',
          radius: ["66%", "70%"],
          zlevel: -2,
          label: {
            position: "inside",
            show: false,
          },
        },
      ],
    };
    return option;
  }
  /**
   * 饼图6
   * @param data 模拟数据
   * @returns 饼图6配置项
   */
  static pie6(data: any) {
    let radius_data: any = [];
    let total = 10;
    data.forEach((a: any, b: any) => {
      let width = (100 - 20) / data.length;
      let errand = total - a.value;
      let _data = {
        name: a.name,
        type: "pie",
        radius: [width * (b + 1) + "%", width * b + 6 + "%"],
        labelLine: {
          show: false,
        },
        label: {
          show: false,
        },
        data: [
          {
            value: a.value,
            itemStyle: {
              color: getComVal("color_data")[0],
            },
            emphasis: {
              /** 关闭鼠标悬停放大的效果 */
              disabled: true,
            },
          },
          {
            name: errand,
            value: errand,
            itemStyle: {
              color: getComVal("color_data")[b],
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
                formatter: "{a|{a}}\n{d|{d}%}",
                backgroundColor: getComVal("color_data")[0],
                padding: [5, 15],
                position: "outer",
                rich: {
                  a: {
                    fontSize: "14",
                  },
                  d: {
                    fontSize: "16",
                  },
                },
              },
            },
          },
        ],
      };
      radius_data.push(_data);
    });
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      //图例的名字需要和饼图的name一致，才会显示图例
      legend: {
        orient: "vertical",
        x: "5%",
        top: "35%",
        /** 图例的高度 */
        itemHeight: 10,
        /** 图例之间的间距 */
        itemGap: 8,
        data: Object.values(data),
      },
      series: radius_data,
    };
    return option;
  }
  /**
   * 饼图7
   * @param data 模拟数据
   * @returns 饼图7配置项
   */
  static pie7(data: any) {
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      tooltip: getComVal("tooltip"),
      legend: getComVal("legend"),
      series: [
        {
          name: "",
          type: "pie",
          radius: ["45%", "60%"],
          data: data,
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            length: false,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "25",
              fontWeight: "bold",
              formatter: "{d}%",
            },
          },
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
      ],
    };

    return option;
  }
  /**
   * 饼图8
   * @param data 模拟数据
   * @returns 饼图8配置项
   */
  static pie8(data: any) {
    let pie8_data_sun: number = 0;
    data.forEach((e: any) => {
      pie8_data_sun += e.value;
    });
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      tooltip: getComVal("tooltip"),
      legend: getComVal("legend"),
      title: {
        textAlign: "center",
        text: pie8_data_sun,
        subtext: "数据总量",
        color: "red",
        left: "49%",
        top: "42%",
        textStyle: {
          fontSize: 30,
          fontWeight: "bolder",
          color: getComVal("color_data")[0],
          fontFamily: "Microsoft YaHei",
        },
        subtextStyle: {
          fontSize: 14,
          fontWeight: "bolder",
          color: getComVal("color_data")[1],
        },
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: ["45%", "55%"],
          data: data,
          label: {
            show: true,
          },
          labelLine: {
            length: 10,
          },

          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
      ],
    };

    return option;
  }
  /**
   * 饼图9
   * @param data 模拟数据
   * @returns 饼图9配置项
   */
  static pie9(data: any) {
    let pie9_data = {
      name: "数据总量",
      value: 0,
      total: 100,
    };
    data.forEach((e: any) => {
      pie9_data.value += e.value;
    });
    let labelItemArrs: any = [];
    for (let i = 0; i < 100; i++) {
      labelItemArrs.push(
        {
          value: 1,
          name: i,
          itemStyle: {
            color:
              i < pie9_data.value
                ? getComVal("color_data")[0]
                : getComVal("color_data")[1],
          },
        },
        {
          value: 3,
          name: "",
          itemStyle: {
            label: { show: false },
            labelLine: { show: false },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        }
      );
    }
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      tooltip: getComVal("tooltip"),
      title: {
        text: Math.trunc((pie9_data.value / pie9_data.total) * 100) + "%",
        subtext: pie9_data.name,
        color: getComVal("font_color"),
        left: "49%",
        top: "42%",
        textAlign: "center",
        textStyle: {
          fontSize: 30,
          fontWeight: "bolder",
          color: getComVal("color_data")[0],
          fontFamily: "Microsoft YaHei",
        },
        subtextStyle: {
          fontSize: 14,
          fontWeight: "bolder",
          color: getComVal("color_data")[1],
        },
      },
      series: [
        {
          emphasis: {
            scale: true,
          },
          type: "pie",
          z: 2,
          data: labelItemArrs,
          radius: ["68%", "75%"],
          zlevel: -2,
          label: {
            position: "inside",
            show: false,
          },
        },
        {
          name: "",
          type: "pie",
          radius: ["50%", "60%"],
          labelLine: {
            show: false,
          },
          data: [
            {
              value: pie9_data.value,
              itemStyle: { color: getComVal("color_data")[0] },
              emphasis: {
                scale: true,
              },
            },
            {
              value: pie9_data.total - pie9_data.value,
              itemStyle: {
                color: getComVal("color_data")[1],
              },
              emphasis: {
                scale: true,
              },
            },
          ],
        },
      ],
    };

    return option;
  }
  /**
   * 饼图10
   * @param data 模拟数据
   * @returns 饼图10配置项
   */
  static pie10(data: any) {
    const option = {
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data"),
      legend: {
        type: "scroll",
        orient: "vertical",
        right: "20%",
        top: "45%",
        bottom: 20,
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "60%"],
          center: ["40%", "50%"],
          data: data,
          /** 鼠标悬浮是否显示缩放效果 */
          emphasis: {
            scale: true,
          },
        },
      ],
    };
    return option;
  }
}
