import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Modal } from "antd";
import { B1_APIgetInfo } from "@/store/action/B1orderz";
import { B1tableType } from "@/types";

type Props = {
  lookInfo: B1tableType;
  closeFu: () => void;
};

type ListType = {
  name: string;
  num: number;
  phone: number;
  type: "身份证" | "社保卡";
}[];

function B1look({ lookInfo, closeFu }: Props) {
  const [list, setList] = useState<ListType>([]);

  const getInfoFu = useCallback(async () => {
    const res = await B1_APIgetInfo(lookInfo.id);
    if (res.code === 0) {
      const resList = JSON.parse(res.data.rtf || "[]");
      // console.log(123, resList);

      setList(resList);
    }
  }, [lookInfo.id]);

  useEffect(() => {
    getInfoFu();
  }, [getInfoFu]);

  return (
    <Modal
      wrapClassName={styles.B1look}
      open={true}
      title="预约详情"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="B1lRow B1lRow1">
        <div className="B1lRowll">申请时间：</div>
        <div className="B1lRowrr">{lookInfo.createTime}</div>
      </div>
      <div className="B1lRow">
        <div className="B1lRowll">验证状态：</div>
        <div className="B1lRowrr">{lookInfo.status ? "已验证" : "未验证"}</div>
      </div>
      <div className="B1lRow">
        <div className="B1lRowll">预约日期：</div>
        <div className="B1lRowrr">{lookInfo.bookDate}</div>
      </div>
      <div className="B1lRow">
        <div className="B1lRowll">预约时段：</div>
        <div className="B1lRowrr">{lookInfo.time}</div>
      </div>
      <div className="B1lRow B1lRowLast">
        <div className="B1lRowll">预约人数：</div>
        <div className="B1lRowrr">{lookInfo.pcs}</div>
      </div>

      {list.map((v, i) => (
        <div key={i}>
          <div className="B1lRow B1lRow1">
            <div className="B1lRowll">参观人姓名：</div>
            <div className="B1lRowrr">{v.name}</div>
          </div>
          <div className="B1lRow">
            <div className="B1lRowll">参观人电话：</div>
            <div className="B1lRowrr">{v.phone}</div>
          </div>
          <div className="B1lRow B1lRowLast">
            <div className="B1lRowll">{v.type}号：</div>
            <div className="B1lRowrr">{v.num}</div>
          </div>
        </div>
      ))}

      <div className="B1lBtn">
        <Button onClick={closeFu}>关闭</Button>
      </div>
    </Modal>
  );
}

const MemoB1look = React.memo(B1look);

export default MemoB1look;