import TitleBox from "../../Component/TitleBox";
import ScrollBoard from "../../../Component/ScrollBoard";
import { useAppSelector } from "../../../../store/hooks";
import { selectOrderCompletionWO } from "../../../../store/HomePageSlice";
function LeftDown() {
  const data = useAppSelector(selectOrderCompletionWO);
  // console.log("222222封装工单完成情况+", data);
  const config = {
    header: ["工单号", "目标产量", "实际投入", "实际产出", "完成度"],
    headerHeight: 40,
    rowNum: 10,
    headerBGC: "rgba(4, 74, 132, 0.2)",
    oddRowBGC: "rgba(4, 74, 132, 0.2)",
    evenRowBGC: "rgba(11, 84, 153, 0.36)",
    columnWidth: [140, 100, 100, 100, 90],
    data: [],
  };
  let arr: any = [];
  data &&
    data.map((item: any, index: any) => {
      let arrInner = [];
      arrInner.push(
        item.workOrderNo ? item.workOrderNo : "-",
        item.planQuantity
          ? item.planQuantity
          : item.planQuantity === 0
          ? item.planQuantity
          : "-",
        item.actualPutIn
          ? item.actualPutIn
          : item.actualPutIn === 0
          ? item.actualPutIn
          : "-",
        item.actualQuantity
          ? item.actualQuantity
          : item.actualQuantity === 0
          ? item.actualQuantity
          : "-",
        item.completeness
          ? item.completeness + "%"
          : item.completeness === 0
          ? item.completeness + "%"
          : "-"
      );
      arr.push(arrInner);
    });
  config.data = arr;
  return (
    <div className="left_left_down">
      <TitleBox title="left_left_down" />
      {data.length !== 0 && (
        <div style={{ marginTop: "15px" }}>
          <ScrollBoard
            config={config}
            style={{ width: "500px", height: "440px" }}
          />
        </div>
      )}
      {data.length === 0 && (
        <p
          style={{
            color: "#cccf",
            fontSize: "24px",
            userSelect: "none",
            textAlign: "center",
            paddingTop: "72px",
          }}
        >
          暂无数据
        </p>
      )}
    </div>
  );
}
export default LeftDown;