import React, { useCallback, useState } from "react";
import styles from "./index.module.scss";
import UpFileOne from "@/components/Z_upFileOne";
import { Button, Modal, Popconfirm } from "antd";
import { A3_APIaddTable } from "@/store/action/A3Fliqlo";
import { MessageFu } from "@/utils/message";

type Props = {
  pid: number;
  closeFu: () => void;
  addTableFu: () => void;
};

function A3Modal({ pid, closeFu, addTableFu }: Props) {
  // 封面图
  const [cover, setCover] = useState("");

  // 校验
  const [fromCheck, setFromCheck] = useState(false);

  // 点击上传图片的提交
  const btnImgOk = useCallback(async () => {
    setFromCheck(true);
    if (!cover) return;

    const obj = {
      parentId: pid,
      thumb: cover,
    };

    const res = await A3_APIaddTable(obj);

    if (res.code === 0) {
      MessageFu.success("新增成功!");
      addTableFu();
      closeFu();
    }
  }, [addTableFu, closeFu, cover, pid]);

  return (
    <Modal
      wrapClassName={styles.A3FliqloModal}
      destroyOnClose
      open={true}
      title="上传图片"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="e_row">
        <div className="e_rowL">
          <span>* </span>图片：
        </div>
        <div className="e_rowR">
          <UpFileOne
            myUrl="cms/screen/upload"
            cover={cover}
            setCover={(val) => setCover(val)}
            isLook={false}
            coverCheck={fromCheck}
            size={20}
            checkTxt='请上传图片!'
            dirCode={"pingBao"}
          />
        </div>
      </div>

      <div className="A3_fileBtn">
        <Button type="primary" onClick={btnImgOk}>
          提交
        </Button>
        &emsp;
        <Popconfirm
          title="放弃编辑后，信息将不会保存!"
          okText="放弃"
          cancelText="取消"
          onConfirm={() => closeFu()}
        >
          <Button>取消</Button>
        </Popconfirm>
      </div>
    </Modal>
  );
}

const MemoA3Modal = React.memo(A3Modal);

export default MemoA3Modal;
