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/LineChartRight/chart.config";
import {useAppSelector} from "./../../../store/hooks"
import {selectLine3After} from "./../../../store/LinePageSlice"
import dayjs from "dayjs";
function RightDown() {
  const data = useAppSelector(selectLine3After);
  // console.log('页面数据：',data)
  // 假数据
  let tempData = [
    {
      type: "day",
      data: {
        time: [] as string[],
        input: [] as number[],
        output: [] as number[],
      },
    },
    {
      type: "week",
      data: {
        time: [] as string[],
        input: [] as number[],
        output: [] as number[],
      },
    },
    {
      type: "month",
      data: {
        time: [] as string[],
        input: [] as number[],
        output: [] as number[],
      },
    },
  ];
  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: 5,
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [120, 130, 130],
    data: [],
  };
  const configWeek = {
    header: ["时间", "投入数量", "产出数量"],
    headerHeight: 30,
    rowNum: 5,
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [120, 130, 130],
    data: [],
  };
  const configMonth = {
    header: ["时间", "投入数量", "产出数量"],
    headerHeight: 30,
    rowNum: 5,
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [120, 130, 130],
    data: [],
  };
  let arr1: any = [];
  let arr2: any = [];
  let arr3: any = [];
  // @ts-ignore
  if (data.todayProductionDets && data.todayProductionDets.length > 0) {
    // @ts-ignore
    data.todayProductionDets.forEach((item,index)=>{
      let arrInner = [];
      arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
      arr1.push(arrInner);
      tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
      tempData[0].data.input.push(item.inputNum);
      tempData[0].data.output.push(item.outputNum);
    })
  }else{
    tempData[0].data.time = []
    tempData[0].data.input = []
    tempData[0].data.output = []
  }
  // @ts-ignore
  if (data.weekProductionDets && data.weekProductionDets.length > 0) {
    // @ts-ignore
    data.weekProductionDets.forEach((item,index)=>{
      let arrInner = [];
      arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
      arr2.push(arrInner);
      tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
      tempData[1].data.input.push(item.inputNum);
      tempData[1].data.output.push(item.outputNum);
    })
  }else{
    tempData[1].data.time = []
    tempData[1].data.input = []
    tempData[1].data.output = []
  }
  // @ts-ignore
  if (data.monthProductionDets && data.monthProductionDets.length > 0) {
    // @ts-ignore
    data.monthProductionDets.forEach((item,index)=>{
      let arrInner = [];
      arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
      arr3.push(arrInner);
      tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
      tempData[2].data.input.push(item.inputNum);
      tempData[2].data.output.push(item.outputNum);
    })
  }else{
    tempData[2].data.time = []
    tempData[2].data.input = []
    tempData[2].data.output = []
  }
  configDay.data = arr1;
  configWeek.data = arr2;
  configMonth.data = arr3;

  const chartData1 = tempData[0].data;
  const chartData2 = tempData[1].data;
  const chartData3 = tempData[2].data;
  const options1 = getOptions(chartData1);
  const options2 = getOptions(chartData2);
  const options3 = getOptions(chartData3);
  return (
    <div className="right_down">
      <TitleBox title={"right_down"} />
      <div className="left_up_switch">
        <SwitchButton nameList={nameList} onChange={handleButtonChange} />
      </div>
      <div style={{ padding: "10px", height: "628px" }}>
        <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="right_down_content">
          {activeName === "table" ? (
            arr1.length>0?<ScrollBoard
              config={configDay}
              style={{ width: "380px", height: "180px" }}
            />:(
              <p
                style={{
                  color: "#cccf",
                  fontSize: "24px",
                  userSelect: "none",
                  textAlign: "center",
                  paddingTop: "50px",
                  margin:0
                }}
              >
                暂无数据
              </p>
            )
          ) : tempData[0].data.time.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="right_down_content">
          {activeName === "table" ? (
            arr2.length>0?<ScrollBoard
              config={configWeek}
              style={{ width: "380px", height: "180px" }}
            />:(
              <p
                style={{
                  color: "#cccf",
                  fontSize: "24px",
                  userSelect: "none",
                  textAlign: "center",
                  paddingTop: "50px",
                  margin:0
                }}
              >
                暂无数据
              </p>
            )
          ) : tempData[1].data.time.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="right_down_content">
          {activeName === "table" ? (
            arr3.length>0?<ScrollBoard
              config={configMonth}
              style={{ width: "380px", height: "180px" }}
            />:(
              <p
                style={{
                  color: "#cccf",
                  fontSize: "24px",
                  userSelect: "none",
                  textAlign: "center",
                  paddingTop: "50px",
                  margin:0
                }}
              >
                暂无数据
              </p>
            )
          ) : tempData[2].data.time.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 RightDown;