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 line5long_bg from "../../../public/img/table5_long.png";
import { useMemo } from "react";

const statusBgc = function (state) {
  if (state === "待入库任务") {
    return { width: "100%", "--bgUrl--": `url(${line4_bg})` };
  } else if (state === "待出库任务") {
    return { width: "100%", "--bgUrl--": `url(${line5long_bg})` };
  } else if (state === "库存统计") {
    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);
      });
      if (configArr.length < 6) {
        let l = 6 - configArr.length;
        const newArr = Array.from({ length: l }, () => new Array(4).fill(" "));
        console.log(newArr);
        newArr.forEach((it) => {
          configArr.push(it);
        });
        console.log(configArr);
      }
    } else if (title === "待出库任务") {
      data?.forEach((it) => {
        let arr = [
          it?.taskNo ?? "--",
          it?.materieName ?? "--",
          it?.materieControlNo ?? "--",
          it?.sourceStorePositionName ?? "--",
          it?.targetStorePositionName ?? "--",
        ];
        configArr.push(arr);
      });
      if (configArr.length < 6) {
        let l = 6 - configArr.length;
        const newArr = Array.from({ length: l }, () => new Array(5).fill(" "));
        console.log(newArr);
        newArr.forEach((it) => {
          configArr.push(it);
        });
        console.log(configArr);
      }
    } else if (title === "库存统计") {
      data?.forEach((it) => {
        let arr = [
          it?.materieCode ?? "--",
          it?.materieName ?? "--",
          it?.specificationModel ?? "--",
          it?.totalNum ?? "--",
          it?.width ?? "--",
        ];
        configArr.push(arr);
      });
      if (configArr.length < 6) {
        let l = 6 - configArr.length;
        const newArr = Array.from({ length: l }, () => new Array(5).fill(" "));
        console.log(newArr);
        newArr.forEach((it) => {
          configArr.push(it);
        });
        console.log(configArr);
      }
    }

    return {
      data: configArr,
    };
  }, [data, title]);

  console.log(config?.data?.length);
  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(title)}
          // rowNum={config?.data?.length >= 5 ? 5 : config?.data?.length}
          rowNum={5}
          // hoverPause={false}
        />
      </div>
    </>
  );
};
