import React, { useMemo } from "react";
import styles from "./index.module.scss";
import { Modal } from "antd";
import { A1TableType } from "@/types";
import passDecodeFu from "../passDecode";

type Props = {
  data: A1TableType;
  closeModelFu: () => void;
};

function A1Look({ data, closeModelFu }: Props) {
  const infoArr = useMemo(() => {
    const arr: any = [];

    const arr1 = data.contact.split(",");

    arr1.forEach((v) => {
      arr.push({
        name: v.split("-")[0] + " - " + v.split("-")[1],
        zheng: v.split("-")[2] || "无",
      });
    });

    return arr;
  }, [data.contact]);

  return (
    <Modal
      wrapClassName={styles.A1Look}
      destroyOnClose
      open={true}
      title="预约详情"
      onCancel={closeModelFu}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A1MBox">
        <div className="A1MBoxL">申请时间：</div>
        <div className="A1MBoxR">
          <p>{data.createTime}</p>
        </div>
      </div>

      <div className="A1MBox">
        <div className="A1MBoxL">参观展馆：</div>
        <div className="A1MBoxR">
          <p>{data.exhibitionName}</p>
        </div>
      </div>

      <div className="A1MBox">
        <div className="A1MBoxL">所在单位：</div>
        <div className="A1MBoxR">
          <p>{data.unitName}</p>
        </div>
      </div>

      <div className="A1MBox">
        <div className="A1MBoxL">所在部门：</div>
        <div className="A1MBoxR">
          <p>{data.division}</p>
        </div>
      </div>

      <div className="A1MBox">
        <div className="A1MBoxL">预约人：</div>
        <div className="A1MBoxR">
          {infoArr.map((v: any, i: number) => (
            <div className="infoP" key={i}>
              {/* 参观人 */}
              {i === 1 ? <div className="canguanTit">参观人：</div> : null}

              <p>{v.name}</p>
              <p>{passDecodeFu(v.zheng)}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="A1MBox">
        <div className="A1MBoxL">预约日期：</div>
        <div className="A1MBoxR">
          <p>{data.bookDay}</p>
        </div>
      </div>

      <div className="A1MBox">
        <div className="A1MBoxL">入馆时段：</div>
        <div className="A1MBoxR">
          <p>{data.bootTimeScope}</p>
        </div>
      </div>
      <br />
      <br />
    </Modal>
  );
}

const MemoA1Look = React.memo(A1Look);

export default MemoA1Look;
