import * as echarts from "echarts";

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

  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      left: "center",
      top: "0",
      textStyle: {
        color: "#fff",
      },
    },
    series: [{
      color: ["#4198AF", "#285DF0", "#EA439D", "#F59FBC", "#FCA158", "#03D4B9", "#9FD224", "#13C871", "#FF611C"],
      type: "pie",
      radius: [0, "50%"],
      center: ["50%", "60%"],
      label: {
        textStyle: {
          color: "#fff",
        },
      },
      data,
    }],
  };

  chartInstance.current.setOption(option);
};

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

  const unitPersonnelData = data.map(item => Number.parseInt(item.unitPersonnelCount));
  const relatedPartyPersonnelData = data.map(item => Number.parseInt(item.relatedPartyPersonnelCount));
  const names = data.map(item => item.name);

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
    },
    legend: {
      data: ["单位人员数", "相关方人员数"],
      top: "0%",
      right: "0%",
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      itemWidth: 12,
      itemHeight: 10,
    },
    dataZoom: [
      {
        type: "slider",
        height: 6,
        bottom: "7%",
        show: true,
        start: 0,
        end: 50,
        handleSize: 5,
        handleStyle: {
          color: "#DCE2E8",
        },
        xAxisIndex: [0],
        filterMode: "filter",
        showDetail: false,
      },
    ],
    grid: {
      left: "10%",
      right: "5%",
      top: "15%",
      bottom: "25%",
    },
    xAxis: [
      {
        type: "category",
        data: names,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          color: "#fff",
        },
      },
    ],
    yAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "单位人员数",
        type: "bar",
        backgroundStyle: {
          color: "rgba(216, 229, 247, 0.55)",
          borderRadius: [8, 8, 0, 0],
        },
        itemStyle: {
          borderRadius: [12, 12, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: "rgba(84,173,147,0.2)",
            },
            {
              offset: 0,
              color: "#54AD93",
            },
          ]),
        },
        barWidth: "10",
        data: unitPersonnelData,
      },
      {
        name: "相关方人员数",
        type: "bar",
        backgroundStyle: {
          color: "rgba(216, 229, 247, 0.55)",
          borderRadius: [8, 8, 0, 0],
        },
        itemStyle: {
          borderRadius: [12, 12, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: "rgba(72,117,231,0.2)",
            },
            {
              offset: 0,
              color: "#4875E7",
            },
          ]),
        },
        barWidth: "10",
        data: relatedPartyPersonnelData,
      },
    ],
  };

  chartInstance.current.setOption(option);
};
