import React, {useEffect, useRef, useState} 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 {selectWeekProductionDets} from "../../../store/ProductionMonitoringEntity";

const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]

interface barValue {
  value: number,
  itemStyle: {
    color: string
  }
}

function ChartWeek() {
  const chartRef = useRef(null)
  const ProductionDets = useAppSelector(selectWeekProductionDets);

  useEffect(() => {
    // @ts-ignore
    let chartInstance = echarts.init(chartRef.current, theme);
    const lineNameList: Array<string> = [];
    const outputNumList: Array<barValue> = [];
    ProductionDets.map((item, index) => {
      lineNameList.push(item.lineName);
      outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
    })

    const option = {
      grid: {
        top: "15%",
        bottom: "0%",
        left: "5%",
        right: "5%",
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: lineNameList,
        splitLine: {
          show: false,
        }
      },
      yAxis: {
        type: 'value',
        name: intl.get('Output'),
        scale: false,
        nameTextStyle: {
          align: "right",
          fontSize: 10,
          color: "rgba(255, 255, 255, 1)",
          verticalAlign: "middle",
          padding: [0, 8, 0, 0]
        }
      },
      series: [
        {
          data: outputNumList,
          type: 'bar',
          barWidth: 20,
          symbol: "none",
          label: {
            show: true,
            rotate: 90,
            fontSize: 16,
            color: "rgba(255, 255, 255, 1)",
            offset:[0,22]
          }
        }
      ]
    }

    chartInstance.setOption(option);
    chartInstance.resize();
    return () => {
      chartInstance.dispose()
    }
  })

  return (
    <div ref={chartRef} className="chart1"/>
  );
}

export default ChartWeek;