import { ScrollBoard } from "@jiaminghi/data-view-react";
import React, { useState, useEffect } from "react";
import line4_bg from "../../../public/img/table4.png";
import line5_bg from "../../../public/img/table5.png";
import { useMemo } from "react";

const statusBgc = function (state) {
  if (state === 4) {
    return { width: "100%", "--bgUrl--": `url(${line4_bg})` };
  } else if (state === 5) {
    return { width: "100%", "--bgUrl--": `url(${line5_bg})` };
  }
};

export default (props) => {
  const { title, headTitle, data } = props;
  const config = useMemo(() => {
    let configArr = [];
    if (title === "待入库任务") {
      data?.forEach((it) => {
        let arr = [
          it?.taskNo ?? "--",
          it?.materieName ?? "--",
          it?.materieControlNo ?? "--",
          it?.targetStorePositionName ?? "--",
        ];
        configArr.push(arr);
      });
    } else if (title === "待出库任务") {
      data?.forEach((it) => {
        let arr = [
          it?.taskNo ?? "--",
          it?.materieName ?? "--",
          it?.materieControlNo ?? "--",
          it?.sourceStorePositionName ?? "--",
          it?.targetStorePositionName ?? "--",
        ];
        configArr.push(arr);
      });
    } else if (title === "库存统计") {
      data?.forEach((it) => {
        let arr = [
          it?.materieCode ?? "--",
          it?.materieName ?? "--",
          it?.specificationModel ?? "--",
          it?.totalNum ?? "--",
          it?.width ?? "--",
        ];
        configArr.push(arr);
      });
    }

    return {
      data: configArr,
    };
  }, [data, title]);
  return (
    <>
      <div className="data-content">
        <div className="content-header">{title}</div>
        <div className="content-title">
          {headTitle?.map((it, i) => {
            return <span key={i}>{it}</span>;
          })}
        </div>
        <ScrollBoard
          align={["center"]}
          config={config}
          style={statusBgc(headTitle?.length)}
          rowNum={"7"}
        />
      </div>
    </>
  );
};
