import React, {useEffect, useRef} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";

function RightTopChartMonthQ() {
  const ChartRef = useRef(null)
  const AllData = useAppSelector(selectQualityMonitorEntity);
  const LineQualityAll = AllData.monthQualityLineAll;

  let ValueSeries: any[] = [];
  let xAxisData: Array<string> = [];

  for (let item in LineQualityAll) {
    // @ts-ignore
    LineQualityAll[item].map((item) => {
      if (!xAxisData.includes(item.content)) {
        xAxisData.push(item.content)
      }
    })
  }

  for (let LineItem in LineQualityAll) {
    let dataValue: Array<number> = []
    xAxisData.map((TypeItem) => {
      let thisdata = 0
      // @ts-ignore
      LineQualityAll[LineItem].map((item) => {
        if (item.content == TypeItem) {
          thisdata = thisdata + item.num;
        }
      })
      dataValue.push(thisdata)
    })
    ValueSeries.push({
      name: LineItem,
      data: dataValue,
      type: "bar",
      itemStyle: {
        borderRadius: [100, 100, 0, 0]
      }
    })
  }


  useEffect(() => {
    // @ts-ignore
    let chartInstance = echarts.init(ChartRef.current, theme);

    const option = {
      grid: {
        top: "15%",
        bottom: "0%",
        left: "0%",
        right: "0",
        containLabel: true,
      },
      legend: {
        show: true,
        selectedMode: false,
        itemHeight: 8,
        itemWidth: 13,
        textStyle: {
          fontSize: 10,
        }
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        splitLine: {
          show: false,
        },
        axisLabel: {
          width: 1200 / xAxisData.length,
          interval: 0,
          overflow: "truncate",
        }
      },
      yAxis: {
        type: 'value',
        name: intl.get('DefectNumber'),
        scale: false,
        nameTextStyle: {
          align: "left",
          fontSize: 12,
          color: "rgba(255, 255, 255, 1)",
          verticalAlign: "middle",
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        borderWidth: 0,
        textStyle: {
          color: "rgba(255, 255, 255, 1)",
          fontSize: 12
        }
      },
      series: ValueSeries
    }

    chartInstance.setOption(option);
    chartInstance.resize();
  })
  return (
    <div ref={ChartRef} className="chart5"/>
  )
}

export default RightTopChartMonthQ;