import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import SwitchButton from "../Component/SwitchButton";
import ScrollBoard from "./../../Component/ScrollBoard";
import { useState } from "react";
import getOptions from "../../Component/BarChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
import {selectLine4After} from "./../../../store/LinePageSlice"
function LeftDown() {
  const data = useAppSelector(selectLine4After);
  // console.log('页面数据：',data)
  const nameList = [
    { name: "表单", ename: "table" },
    { name: "柱状", ename: "chart" },
  ];
  const [activeName, setActiveName] = useState<string>(nameList[0].ename);
  const handleButtonChange = (activeName: string) => {
    setActiveName(activeName);
  };
  const configDay = {
    header: ["序号", "工序类型", "报废数量"],
    headerHeight: 30,
    rowNum: 4,
    align: ["center", "left", "left"],
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [73, 200, 107],
    data: [
      ["1", "磨边后", 224],
      ["2", "包装1", 322],
      ["3", "包装2", 66],
    ],
  };
  const configWeek = {
    header: ["序号", "工序类型", "报废数量"],
    headerHeight: 30,
    rowNum: 4,
    align: ["center", "left", "left"],
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [73, 200, 107],
    data: [
      ["1", "磨边后", 1119],
      ["2", "包装1", 1798],
      ["3", "包装2", 435],
    ],
  };
  const configMonth = {
    header: ["序号", "工序类型", "报废数量"],
    headerHeight: 30,
    rowNum: 4,
    align: ["center", "left", "left"],
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [73, 200, 107],
    data: [
      ["1", "磨边后", 5004],
      ["2", "包装1", 9122],
      ["3", "包装2", 1924],
    ],
  };
  const color1 = ["#9DD5FF", "#1295FF"];
  const color2 = ["#85F6E9", "#2EC6B4"];
  // @ts-ignore
  let xData1: string[] = [];
  let xData2: string[] = [];
  let xData3: string[] = [];
  let dataProps1: number[] = [];
  let dataProps2: number[] = [];
  let dataProps3: number[] = [];
  let arr1: any = [];
  let arr2: any = [];
  let arr3: any = [];
  // @ts-ignore
  if (data.todayProductionScraps && data.todayProductionScraps.length > 0) {
    // @ts-ignore
    data.todayProductionScraps.forEach((item,index)=>{
      let arrInner = [];
      arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
      arr1.push(arrInner);
      xData1.push(item.sectionName);
      dataProps1.push(item.scrapNum || 0);
    })
  }else{
    dataProps1 = []
  }
  // @ts-ignore
  if (data.weekProductionScraps && data.weekProductionScraps.length > 0) {
    // @ts-ignore
    data.weekProductionScraps.forEach((item,index)=>{
      let arrInner = [];
      arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
      arr2.push(arrInner);
      xData2.push(item.sectionName);
      dataProps2.push(item.scrapNum || 0);
    })
  }else{
    dataProps2 = []
  }
  // @ts-ignore
  if (data.monthProductionScraps && data.monthProductionScraps.length > 0) {
    // @ts-ignore
    data.monthProductionScraps.forEach((item,index)=>{
      let arrInner = [];
      arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
      arr3.push(arrInner);
      xData3.push(item.sectionName);
      dataProps3.push(item.scrapNum || 0);
    })
  }else{
    dataProps3 = []
  }
  configDay.data = arr1;
  configWeek.data = arr2;
  configMonth.data = arr3;
  const options1 = getOptions(dataProps1,xData1, color1);
  const options2 = getOptions(dataProps2,xData2, color2);
  const options3 = getOptions(dataProps3,xData3, color1);
  return (
    <div className="left_down">
      <TitleBox title={"left_down"} />
      <div className="left_up_switch">
        <SwitchButton nameList={nameList} onChange={handleButtonChange} />
      </div>
      <div style={{ padding: "10px", height: "555px" }}>
        <div className="left_down_title flex-row">
          <div className="left_down_box1 flex-col" />
          <span className="left_down_text">当天</span>
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="left_down_content">
          {activeName === "table" ? (
            arr1.length > 0 ? <ScrollBoard
              config={configDay}
              style={{ width: "380px", height: "150px" }}
            />:(<p
              style={{
                color: "#cccf",
                fontSize: "24px",
                userSelect: "none",
                textAlign: "center",
                paddingTop: "50px",
                margin:0
              }}
            >
              暂无数据
            </p>)
          ) : dataProps1.length>0 ? (
            <ReactECharts option={options1} style={{ height: "100%" }} />
          ) : (
            <p
              style={{
                color: "#cccf",
                fontSize: "24px",
                userSelect: "none",
                textAlign: "center",
                paddingTop: "50px",
                margin:0
              }}
            >
              暂无数据
            </p>
          )}
        </div>
        <div className="left_down_title flex-row">
          <div className="left_down_box1 flex-col" />
          <span className="left_down_text">本周</span>
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="left_down_content">
          {activeName === "table" ? (
            arr2.length > 0 ? <ScrollBoard
              config={configWeek}
              style={{ width: "380px", height: "150px" }}
            />:(<p
              style={{
                color: "#cccf",
                fontSize: "24px",
                userSelect: "none",
                textAlign: "center",
                paddingTop: "50px",
                margin:0
              }}
            >
              暂无数据
            </p>)
          ) : dataProps2.length>0 ? (
            <ReactECharts option={options2} style={{ height: "100%" }} />
          ) : (
            <p
              style={{
                color: "#cccf",
                fontSize: "24px",
                userSelect: "none",
                textAlign: "center",
                paddingTop: "50px",
                margin:0
              }}
            >
              暂无数据
            </p>
          )}
        </div>
        <div className="left_down_title flex-row">
          <div className="left_down_box1 flex-col" />
          <span className="left_down_text">本月</span>
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="left_down_content">
          {activeName === "table" ? (
            arr3.length > 0 ? <ScrollBoard
              config={configMonth}
              style={{ width: "380px", height: "150px" }}
            />:(<p
              style={{
                color: "#cccf",
                fontSize: "24px",
                userSelect: "none",
                textAlign: "center",
                paddingTop: "50px",
                margin:0
              }}
            >
              暂无数据
            </p>)
          ) : dataProps3.length>0 ? (
            <ReactECharts option={options3} style={{ height: "100%" }} />
          ) : (
            <p
              style={{
                color: "#cccf",
                fontSize: "24px",
                userSelect: "none",
                textAlign: "center",
                paddingTop: "50px",
                margin:0
              }}
            >
              暂无数据
            </p>
          )}
        </div>
      </div>
    </div>
  );
}
export default LeftDown;