import * as echarts from "echarts";

export const initEcharts1 = (mainRef, chartInstance, data) => {
  chartInstance.current = echarts.init(mainRef.current);

  const angle = 0;
  const outerRidus1 = 0.8;
  const outerRidus2 = 0.85;

  const colors = {
    重大风险: "#FF0000",
    较大风险: "#FF7900",
    一般风险: "#FEAD00",
    低风险: "#0078FF",
  };

  const option = {
    legend: {
      data: ["重大风险", "较大风险", "一般风险", "低风险"],
      orient: "vertical",
      right: "20px",
      y: "center",
      itemGap: 30,
      formatter: (params) => {
        let value;
        let valueStyle;
        switch (params) {
          case "重大风险":
            value = data.majorRiskCount;
            valueStyle = "major_value";
            break;
          case "较大风险":
            value = data.greaterRiskCount;
            valueStyle = "greater_value";
            break;
          case "一般风险":
            value = data.generalRiskCount;
            valueStyle = "general_value";
            break;
          case "低风险":
            value = data.lowRiskCount;
            valueStyle = "low_value";
            break;
          default:
            value = 0;
            valueStyle = "default_value";
        }

        return `{text|${params}: }{${valueStyle}|${value}}`;
      },
      textStyle: {
        rich: {
          major_value: {
            color: colors["重大风险"],
            fontSize: 16,
            fontWeight: "bold",
            padding: [0, 0, 0, 2],
          },
          greater_value: {
            color: colors["较大风险"],
            fontSize: 16,
            fontWeight: "bold",
            padding: [0, 0, 0, 2],
          },
          general_value: {
            color: colors["一般风险"],
            fontSize: 16,
            fontWeight: "bold",
            padding: [0, 0, 0, 2],
          },
          low_value: {
            color: colors["低风险"],
            fontSize: 16,
            fontWeight: "bold",
            padding: [0, 0, 0, 2],
          },
          default_value: {
            color: "#999",
            fontSize: 16,
            fontWeight: "bold",
            padding: [0, 0, 0, 2],
          },
          text: {
            color: "#000",
            fontSize: 16,
            padding: [0, 0, 0, 5],
          },
        },
      },
    },
    tooltip: {
      show: true,
    },
    series: [
      {
        type: "pie",
        radius: ["75%", "55%"],
        center: ["35%", "50%"],
        emphasis: {
          scale: false,
        },
        data: [
          {
            value: data.majorRiskCount,
            name: "重大风险",
            itemStyle: {
              color: colors["重大风险"],
            },
          },
          {
            value: data.greaterRiskCount,
            name: "较大风险",
            itemStyle: {
              color: colors["较大风险"],
            },
          },
          {
            value: data.generalRiskCount,
            name: "一般风险",
            itemStyle: {
              color: colors["一般风险"],
            },
          },
          {
            value: data.lowRiskCount,
            name: "低风险",
            itemStyle: {
              color: colors["低风险"],
            },
          },
        ],
        label: {
          show: false,
        },
      },
      {
        type: "pie",
        radius: ["60%", "40%"],
        center: ["35%", "50%"],
        emphasis: {
          scale: false,
        },
        z: 10,
        label: {
          position: "center",
          formatter: () => {
            return "";
          },
        },
        data: [
          {
            value: data.majorRiskCount,
            name: "重大风险",
            itemStyle: {
              color: colors["重大风险"],
              opacity: 0.5,
            },
          },
          {
            value: data.greaterRiskCount,
            name: "较大风险",
            itemStyle: {
              color: colors["较大风险"],
              opacity: 0.5,
            },
          },
          {
            value: data.generalRiskCount,
            name: "一般风险",
            itemStyle: {
              color: colors["一般风险"],
              opacity: 0.5,
            },
          },
          {
            value: data.lowRiskCount,
            name: "低风险",
            itemStyle: {
              color: colors["低风险"],
              opacity: 0.5,
            },
          },
        ],
        labelLine: {
          show: false,
        },
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem(params, api) {
          const pieCenterX = api.getWidth() * 0.35;
          const pieCenterY = api.getHeight() * 0.5;

          return {
            type: "arc",
            shape: {
              cx: pieCenterX,
              cy: pieCenterY,
              r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,
              startAngle: ((0 + angle) * Math.PI) / 180,
              endAngle: ((90 + angle) * Math.PI) / 180,
            },
            style: {
              stroke: colors["重大风险"],
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem(params, api) {
          const pieCenterX = api.getWidth() * 0.35;
          const pieCenterY = api.getHeight() * 0.5;
          const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
          const point = getCirlPoint(pieCenterX, pieCenterY, r, 0 + angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: colors["重大风险"],
              fill: colors["重大风险"],
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem(params, api) {
          const pieCenterX = api.getWidth() * 0.35;
          const pieCenterY = api.getHeight() * 0.5;

          return {
            type: "arc",
            shape: {
              cx: pieCenterX,
              cy: pieCenterY,
              r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,
              startAngle: ((180 + angle) * Math.PI) / 180,
              endAngle: ((270 + angle) * Math.PI) / 180,
            },
            style: {
              stroke: colors["较大风险"],
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem(params, api) {
          const pieCenterX = api.getWidth() * 0.35;
          const pieCenterY = api.getHeight() * 0.5;
          const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
          const point = getCirlPoint(pieCenterX, pieCenterY, r, 180 + angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: colors["较大风险"],
              fill: colors["较大风险"],
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem(params, api) {
          const pieCenterX = api.getWidth() * 0.35;
          const pieCenterY = api.getHeight() * 0.5;

          return {
            type: "arc",
            shape: {
              cx: pieCenterX,
              cy: pieCenterY,
              r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,
              startAngle: ((250 + -angle) * Math.PI) / 180,
              endAngle: ((10 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: colors["一般风险"],
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem(params, api) {
          const pieCenterX = api.getWidth() * 0.35;
          const pieCenterY = api.getHeight() * 0.5;
          const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2;
          const point = getCirlPoint(pieCenterX, pieCenterY, r, 250 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: colors["一般风险"],
              fill: colors["一般风险"],
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem(params, api) {
          const pieCenterX = api.getWidth() * 0.35;
          const pieCenterY = api.getHeight() * 0.5;

          return {
            type: "arc",
            shape: {
              cx: pieCenterX,
              cy: pieCenterY,
              r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,
              startAngle: ((70 + -angle) * Math.PI) / 180,
              endAngle: ((200 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: colors["低风险"],
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem(params, api) {
          const pieCenterX = api.getWidth() * 0.35;
          const pieCenterY = api.getHeight() * 0.5;
          const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2;
          const point = getCirlPoint(pieCenterX, pieCenterY, r, 70 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: colors["低风险"],
              fill: colors["低风险"],
            },
            silent: true,
          };
        },
        data: [0],
      },
    ],
  };

  function getCirlPoint(x0, y0, r, angle) {
    const x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
    const y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
    return {
      x: x1,
      y: y1,
    };
  }

  chartInstance.current.setOption(option);
};

export const initEcharts2 = (mainRef, chartInstance, data) => {
  chartInstance.current = echarts.init(mainRef.current);

  const option = {
    color: ["#F1C416", "#0AFCFF"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      top: 40,
      padding: "0 0 10 0",
      containLabel: true,
    },
    legend: {
      right: 10,
      top: 10,
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
      textStyle: {
        color: "#465683",
        fontStyle: "normal",
        fontFamily: "微软雅黑",
        fontSize: 12,
      },
    },
    dataZoom: [
      {
        type: "slider",
        height: 6,
        bottom: "6%",
        show: true,
        start: 0,
        end: 50,
        handleSize: 3,
        handleStyle: {
          color: "#465683",
        },
        xAxisIndex: [0],
        filterMode: "filter",
        showDetail: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        boundaryGap: true,
        data: data.map(item => item.name),
        axisLabel: {
          interval: 0,
          margin: 15,
          color: "#465683",
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#465683",
            opacity: 0.2,
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 5,
        axisLabel: {
          color: "#465683",
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 12,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#465683"],
            opacity: 0.06,
          },
        },
      },
    ],
    series: [
      {
        name: "已整改",
        type: "pictorialBar",
        symbol: "roundRect",
        symbolOffset: [-5, 0],
        symbolMargin: "1",
        barWidth: "10%",
        barMaxWidth: "20%",
        animationDelay: (dataIndex, params) => {
          return params.index * 50;
        },
        itemStyle: {
          color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: "#FF9600",
              },
              {
                offset: 1,
                color: "#F0E203",
              },
            ]);
          },
        },
        z: 1,
        barGap: 0,
        symbolRepeat: true,
        symbolSize: [14, 5],
        data: data.map(item => item.unitCount),
        animationEasing: "elasticOut",
        stack: "2",
      },
      {
        name: "已验收",
        type: "pictorialBar",
        symbol: "roundRect",
        barWidth: "10%",
        symbolOffset: [5, 0],
        barMaxWidth: "20%",
        symbolMargin: "1",
        animationDelay: (dataIndex, params) => {
          return params.index * 50;
        },
        itemStyle: {
          color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: "#19D4FE",
              },
              {
                offset: 1,
                color: "#089FFD",
              },
            ]);
          },
        },
        z: 1,
        barGap: 0,
        symbolRepeat: true,
        symbolSize: [14, 5],
        data: data.map(item => item.personnelCount),
        animationEasing: "elasticOut",
        stack: "1",
      },
    ],
  };

  chartInstance.current.setOption(option);
};

export const initEcharts3 = (mainRef, chartInstance, data) => {
  chartInstance.current = echarts.init(mainRef.current);

  const colorList1 = ["#FF6B6B", "", "#FFD93D", "", "#6BCF7F", "", "#4ECDC4", "", "#A084CA", "", "#FF9AA2", ""];
  const colorList2 = ["rgba(255,107,107, 0.6)", "", "rgba(255,217,61, 0.6)", "", "rgba(107,207,127, 0.6)", "", "rgba(78,205,196, 0.6)", "", "rgba(160,132,202, 0.6)", "", "rgba(255,154,162, 0.6)", ""];

  const optionData = [];
  data.forEach((item) => {
    optionData.push({ value: item.value, name: item.name });
    optionData.push({ name: "", value: 1, itemStyle: { color: "transparent" } });
  });

  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: true,
      orient: "vertical",
      right: "10%",
      top: "center",
      textStyle: {
        color: "#3F4554",
        fontSize: 12,
      },
      data: data.map(item => item.name),
    },
    series: [
      {
        type: "pie",
        zlevel: 3,
        radius: ["30%", "70%"],
        center: ["25%", "50%"],
        itemStyle: {
          color(params) {
            return colorList1[params.dataIndex];
          },
        },
        label: {
          show: false,
        },
        data: optionData,
      },
      {
        type: "pie",
        zlevel: 1,
        silent: true,
        radius: ["73%", "80%"],
        center: ["25%", "50%"],
        itemStyle: {
          color(params) {
            return colorList2[params.dataIndex];
          },
        },
        label: {
          show: false,
        },
        data: optionData,
      },
      {
        type: "pie",
        radius: ["85%", "86%"],
        center: ["25%", "50%"],
        emphasis: {
          scale: false,
        },
        clockwise: false,
        itemStyle: {
          shadowBlur: 1,
          shadowColor: "rgba(15, 79, 150,1)",
          color: "rgba(23,138,173,1)",
        },
        label: {
          show: false,
        },
        data: [0],
      },
    ],
  };

  chartInstance.current.setOption(option);
};

export const initEcharts4 = (mainRef, chartInstance, data) => {
  chartInstance.current = echarts.init(mainRef.current);

  const option = {
    grid: {
      containLabel: true,
      bottom: "5%",
      left: "-15%",
      top: "10%",
      right: "5%",
    },
    xAxis: {
      type: "value",
      max: 100,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        data: data.map(item => item.name),
        inverse: true,
        position: "left",
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: "category",
        data: data.map(item => item.value),
        inverse: true,
        position: "right",
        axisLabel: {
          show: true,
          margin: -30,
          fontSize: 14,
          align: "top",
          verticalAlign: "bottom",
          padding: [0, 0, 10, 0],
          color: "#465683",
          formatter(value) {
            return `${value}%`;
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: "category",
        inverse: true,
        position: "left",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: data.map(item => item.name),
        axisLabel: {
          show: true,
          margin: -2,
          fontSize: 14,
          align: "top",
          verticalAlign: "bottom",
          padding: [0, 0, 10, 0],
          color: "#465683",
        },
      },
    ],
    series: [
      {
        data: data.map(item => item.value),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: "#0096F8" },
            { offset: 1, color: "#1CD0E7" },
          ]),
          borderRadius: 30,
        },
        type: "bar",
        barWidth: 10,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(255,255,255,0.5)",
          borderRadius: 30,
        },
      },
    ],
  };

  chartInstance.current.setOption(option);
};

export const initEcharts5 = (mainRef, chartInstance, data) => {
  chartInstance.current = echarts.init(mainRef.current);

  const option = {
    color: ["#007CFA", "#009944"],
    title: [
      {
        text: "同比:下降5%",
        x: 10,
        y: 10,
        textStyle: {
          fontSize: 14,
          color: "#465683",
        },
      },
      {
        text: "环比:提升6%",
        x: 150,
        y: 10,
        textStyle: {
          fontSize: 14,
          color: "#465683",
        },
      },
    ],
    tooltip: {
      trigger: "axis",
    },
    legend: {
      right: 10,
      top: 10,
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
      textStyle: {
        color: "#465683",
        fontStyle: "normal",
        fontFamily: "微软雅黑",
        fontSize: 12,
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      top: 40,
      padding: "0 0 10 0",
      containLabel: true,
    },
    dataZoom: [
      {
        type: "slider",
        height: 6,
        bottom: "6%",
        show: true,
        start: 0,
        end: 50,
        handleSize: 3,
        handleStyle: {
          color: "#465683",
        },
        xAxisIndex: [0],
        filterMode: "filter",
        showDetail: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        boundaryGap: true,
        data: data.map(item => item.department),
        axisLabel: {
          interval: 0,
          margin: 15,
          color: "#465683",
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#465683",
            opacity: 0.2,
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 5,
        axisLabel: {
          color: "#465683",
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 12,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#465683"],
            opacity: 0.06,
          },
        },
      },
    ],
    series: [
      {
        name: "同比",
        type: "line",
        data: data.map(item => item.yearOnYear),
      },
      {
        name: "环比",
        type: "line",
        data: data.map(item => item.monthOnMonth),
      },
    ],
  };

  chartInstance.current.setOption(option);
};