import { useRouter, useCallback } from "next/router";
import "antd/dist/antd.css";

import { Image } from "antd";

import React, { useEffect, useMemo, useState } from "react";
import {
  getShotImgByProductBatchNo,
  getShotImg,
} from "../../../reportUtils/getQueryData";
const { config: { mesUrl } = {} } = global;
import _ from "lodash";

const ListItem = React.memo((props) => {
  const { itemData } = props;
  return (
    <div className="border-t-[1px] border-[#D2D2D2] px-4 pb-2">
      <div className=" flex flex-row space-x-7 py-2">
        <div>
          <label>工序：</label>
          <label>{itemData.operationName}</label>
        </div>
        <div>
          <label>质检单模板名称：</label>
          <label>{itemData.templateName}</label>
        </div>
        <div>
          <label>拍照时间：</label>
          <label>{itemData.imgShotTime}</label>
        </div>
      </div>
      <div className="flex flex-row space-x-7 ">
        <Imag imgurls={itemData.imgPath}></Imag>
      </div>
    </div>
  );
});
function Imag(props) {
  const { imgurls } = props;
  const [imglist, setImgList] = useState([]);
  useEffect(() => {
    setImgList([]);
    imgurls.map((imgsrc) => {
      getShotImg(mesUrl + imgsrc).then((rep) => {
        setImgList((prev) => {
          return [...prev, URL.createObjectURL(rep)];
        });
      });
    });
  }, []);
  return imglist.map((imgsrc) => {
    return (
      <Image
        width={200}
        height={240}
        // className=" w-24 h-32 border"
        src={imgsrc ?? "../img/noImg.png"}
      />
    );
  });
}

const List = React.memo((props) => {
  const { dataSource } = props;
  return (
    <div className=" ">
      {dataSource?.map((item) => {
        return <ListItem itemData={item}></ListItem>;
      })}
    </div>
  );
});
const Header = React.memo((props) => {
  const { productBatchNo } = props;
  return (
    <div className=" py-6 px-4">
      <label className=" ">批次生产单：</label>
      <label>{productBatchNo}</label>
    </div>
  );
});
const getQueryVariable = (name) => {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return decodeURI(r[2]);
  return null;
};

export default function PicView() {
  const [data, setData] = useState([]);
  const [productBatchNo, setProductBatchNo] = useState([]);
  useEffect(() => {
    setProductBatchNo(getQueryVariable("productBatchNo"));
  }, []);
  useEffect(() => {
    getShotImgByProductBatchNo(productBatchNo).then((json) => {
      setData(json);
    });
  }, [productBatchNo]);

  return (
    <div className="font-bold">
      
      <Header productBatchNo={data.productBatchNo}></Header>
      <List dataSource={data.imgItemList}></List>
    </div>
  );
}