import { doFetch } from "@/utils/doFetch";
import React, {
  useState,
  useImperativeHandle,
  forwardRef,
  useRef,
} from "react";
import { useEffect } from "react";
import AutoTable from "@/components/AutoTable";

function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
  let printRef = useRef();
  const [data, setdata] = useState({});
  useImperativeHandle(ref, () => ({
    dom: printRef,
  }));

  useEffect(() => {
    if (val == "detail") {
      doFetch({ url: totalPath, params: totalParams }).then((res) => {
        setdata(res?.data?.data);
      });
    } else {
    }
  }, [val]);

  return (
    val == "detail" && (
      <div
        ref={printRef}
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          zIndex: 999,
          width: "100%",
          height: "100%",
        }}
      >
        <h1
          style={{
            textAlign: "center",
            width: "100%",
            paddingTop: 12,
            paddingBottom: 16,
          }}
        >
          入库工单
        </h1>
        <img
          style={{
            position: "absolute",
            right: 12,
            top: 12,
            width: 86,
            height: "auto",
          }}
          src={data?.qrCodeUrl}
          alt=""
        />

        <div style={{ display: "flex", flexWrap: "wrap", paddingLeft: "2%" }}>
          {totalCard &&
            totalCard[0].itemData
              .filter((it) => !(it.noshow === true))
              .map((it) => {
                return (
                  <div
                    style={{
                      width: it.noshow ?? "32%",
                      backgroundColor: "#f9f9f9",
                      marginRight: "1%",
                      marginBottom: 10,
                      padding: "4px",
                      fontSize: 16,
                      overflow: "hidden",
                    }}
                  >
                    <b>{it.title}: </b>
                    <span>{data[it.key] || "-"}</span>
                  </div>
                );
              })}
        </div>
        <p style={{ margin: 0, padding: "4px 2%", fontSize: 18 }}>
          <b>{totalCard && totalCard[1].cardTitle}</b>
        </p>
        <div style={{ margin: 0, padding: "4px 2%", fontSize: 18 }}>
          <AutoTable
            dataSource={data?.materialList}
            x="96%"
            style={{ marginTop: 8 }}
            withCard={false}
            pagination={"false"}
            columns={[
              {
                title: "物料编码 - 名称",
                dataIndex: "materieName",
                key: "materieName",
                search: false,
                render: (dom, row) => {
                  return (
                    (row.materieCode ?? "") + " - " + (row.materieName ?? "")
                  );
                },
              },
              {
                title: "供应商编号 - 名称",
                dataIndex: "supplierNo",
                key: "supplierNo",
                search: false,
                render: (dom, row) => {
                  return (
                    (row.supplierNo ?? "") + " - " + (row.supplierName ?? "")
                  );
                },
              },
              {
                title: "批次号/SN号",
                dataIndex: "materieControlNo",
                key: "materieControlNo",
                search: false,
              },
              {
                title: "入库数量",
                dataIndex: "instroeNum",
                key: "instroeNum",
                search: false,
              },
              {
                title: "库存单位",
                dataIndex: "productionUnitName",
                key: "productionUnitName",
                search: false,
              },
            ]}
          ></AutoTable>
        </div>
      </div>
    )
  );
}

export default forwardRef(PrintDom);
