import React, { useCallback, useState } from "react";
import styles from "./index.module.scss";
import { Button, Modal, Popconfirm } from "antd";
import TextArea from "antd/es/input/TextArea";
import { MessageFu } from "@/utils/message";
import { A1_APIIdel } from "@/store/action/A1Project";

type Props = {
  mId: number;
  name: string;
  colseFu: () => void;
  delSuFu: () => void;
};

function A1IRemove({ mId, name, colseFu, delSuFu }: Props) {
  const [value, setValue] = useState("");

  // 点击删除
  const delById = useCallback(async () => {
    if (!value) return MessageFu.warning("删除原因不能为空!");

    const obj = {
      id: mId,
      description: value,
    };

    const res = await A1_APIIdel(obj);

    if (res.code === 0) {
      MessageFu.success("删除成功，已移动文件到回收站!");
      delSuFu();
      colseFu();
    }
  }, [colseFu, delSuFu, mId, value]);

  return (
    <Modal
      wrapClassName={styles.A1IRemove}
      destroyOnClose
      open={true}
      title={`删除内控文件-${name}`}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A1IRmain">
        <div className="A1IRmainRow">
          <div className="A1IRmainRow1">
            <span>* </span>删除原因：
          </div>
          <div className="A1IRmainRow2">
            <TextArea
              rows={4}
              placeholder="请输入内容"
              maxLength={100}
              showCount
              value={value}
              onChange={(e) => setValue(e.target.value.replace(/\s+/g, ""))}
            />
            <div className="A1IRmainRow2Tit">
              误删除的文档可联系管理员进行恢复
            </div>
          </div>
        </div>

        <div className="A1IRBtn">
          <Button onClick={colseFu}>取消</Button>
          &emsp;
          <Popconfirm
            disabled={!value}
            title="确定删除吗?"
            okText="删除"
            cancelText="取消"
            onConfirm={delById}
            okButtonProps={{ loading: false }}
          >
            <Button type="primary" disabled={!value}>
              删除
            </Button>
          </Popconfirm>
          &emsp;
        </div>
      </div>
    </Modal>
  );
}

const MemoA1IRemove = React.memo(A1IRemove);

export default MemoA1IRemove;
