import * as echarts from "echarts";

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

  const waitStartData = data.map(item => Number.parseInt(item.WAIT_START));
  const inProgressData = data.map(item => Number.parseInt(item.IN_PROGRESS));
  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: "10%",
      bottom: "20%",
    },
    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(0,168,255,0.7)",
            },
            {
              offset: 0,
              color: "#00A8FF",
            },
          ]),
        },
        barWidth: "10",
        data: waitStartData,
      },
      {
        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(255,198,124,0.7)",
            },
            {
              offset: 0,
              color: "#FFC67C",
            },
          ]),
        },
        barWidth: "10",
        data: inProgressData,
      },
    ],
  };

  chartInstance.current.setOption(option);
};
