import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { useMount } from "ahooks";
import { Spin } from "antd";
import * as echarts from "echarts";
import { useRef } from "react";
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
import Panel from "../../Panel";
import "./index.less";

/** 负责初始化领域工作统计图表，并在卸载时销毁图表实例。 */
function WorkStatusPanel(props) {
  const chartInstance = useRef(null);
  const chartRef = useRef(null);
  const initEcharts = (main1Ref, chartInstance, data) => {
    chartInstance.current = echarts.init(main1Ref.current);

    const domainTypeName = data.map(item => item.domainTypeName);
    const scoredCount = data.map(item => item.scoredCount);
    const noScoreCount = data.map(item => item.noScoreCount);

    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "10%",
        top: "20%",
        right: "10%",
        bottom: "25%",
      },
      legend: {
        data: ["已评分", "未评分"],
        top: "0%",
        right: "3%",
        textStyle: {
          color: "#FFFFFF",
          fontSize: 12,
        },
      },
      dataZoom: [
        {
          type: "inside",
          xAxisIndex: 0,
          start: 0,
          end: 50,
          zoomOnMouseWheel: "shift",
          moveOnMouseWheel: true,
          moveOnMouseMove: true,
        },
        {
          type: "slider",
          height: 6,
          bottom: "7%",
          show: true,
          start: 0,
          end: 40,
          handleSize: 5,
          handleStyle: {
            color: "#DCE2E8",
          },
          xAxisIndex: [0],
          filterMode: "filter",
          showDetail: false,
        },
      ],
      xAxis: {
        data: domainTypeName,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        axisLabel: {
          show: true,
          color: "#FFFFFF",
          fontSize: 12,
          margin: 12,
        },
      },
      yAxis: [
        {
          type: "value",
          nameTextStyle: {
            color: "#FFFFFF",
            fontSize: 12,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#FFFFFF",
            fontSize: 12,
          },
        },
      ],
      series: [
        {
          name: "已评分",
          type: "bar",
          barWidth: 10,
          yAxisIndex: 0,
          itemStyle: {
            color: "#53ed06",
          },
          data: scoredCount,
        },
        {
          name: "未评分",
          type: "bar",
          barWidth: 10,
          yAxisIndex: 0,
          itemStyle: {
            color: "#FF0606",
          },
          data: noScoreCount,
        },
      ],
    };

    chartInstance.current.setOption(option);
  };
  useMount(() => {
    const loadChartData = async () => {
      const { data = [] } = await props.getProjectTaskScoreCount();
      initEcharts(chartRef, chartInstance, data);
    };

    loadChartData();

    return () => chartInstance.current?.dispose();
  });
  return (
    <Panel
      title="领域工作情况统计"
      className="index-info-left-panel__work-status"
    >
      <Spin spinning={props.biStatistics.getProjectTaskScoreCountLoading}>
        <div ref={chartRef} className="index-info-work-status__chart" />
      </Spin>
    </Panel>
  );
}

export default Connect([NS_BI_STATISTICS], true)(WorkStatusPanel);
