import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import getOptions from "../../Component/BarLineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
import { selectAllLine } from "./../../../store/LeaderPageSlice";
import { Fragment } from "react/jsx-runtime";
function LeftDown() {
  const data = useAppSelector(selectAllLine);
  interface Detail {
    time: string;
    input: string;
    output: string;
    Yield: string;
  }
  interface DataSource {
    time: string[];
    input: number[];
    output: number[];
    yield: number[];
}
  let dataSource:DataSource = {
    time:[],
    input:[],
    output:[],
    yield:[]
  };
  if (data.numDet && Array.isArray(data.numDet)) {
    (data.numDet as Detail[]).forEach((item: Detail) => {
      dataSource.time.push(item.time);
      dataSource.input.push(Number(item.input));
      dataSource.output.push(Number(item.output));
      dataSource.yield.push(Number(item.Yield));
    })
  }else{
    dataSource.time = []
    dataSource.input = []
    dataSource.output = []
    dataSource.yield = []
  }
  const options1 = getOptions(dataSource);
  return(
    <div className="ld_left_down">
      <TitleBox title={"left_down"} />
      {
        dataSource.time.length>0?(
          <div>
              <div className="top_legend">
              <span className="chart_legend_icon1">投入</span>
              <span className="chart_legend_icon2">产出</span>
              <span><span className="chart_legend_icon3"></span>良品率</span>
            </div>
            <div style={{ width: "402px", height: "288px" }}>
              <ReactECharts option={options1} style={{ height: "100%" }} />
            </div>
          </div>
        ):(<p
          style={{
            color: "#cccf",
            fontSize: "24px",
            userSelect: "none",
            textAlign: "center",
            paddingTop: "50px",
            margin:0
          }}
        >
          暂无数据
        </p>)
      }
      
    </div>
  )
}
export default LeftDown;