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})` };
  }
};

const styleObj = {
  width: "100%",
  height: "100%",
};

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 < 5) {
      //   let l = 5 - 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 < 5) {
      //   let l = 5 - 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 < 5) {
      //   let l = 5 - 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,
      rowNum: 5,
      hoverPause: configArr?.length > 5 ? true : false,
      align: ["center"],
    };
  }, [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>
        {data.length === 0 ? (
          <div style={{ width: "100%", height: "auto",color:'#ffffff80',textAlign:'center',marginTop:'20%' }}>暂无数据</div>
        ) : (
          <ScrollBoard
            config={config}
            style={statusBgc(title)}
            // rowNum={config?.data?.length >= 5 ? 5 : config?.data?.length}
          />
        )}
      </div>
    </>
  );
};
