import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { Button, Input, Modal, Popconfirm } from "antd";
import { A5TableType } from "@/types";
import TextArea from "antd/es/input/TextArea";
import { MessageFu } from "@/utils/message";
import { A5_APIadd } from "@/store/action/A5Section";
import { A2_APIadd1 } from "@/store/action/A2Dict";

type Props = {
  info: A5TableType;
  closeFu: () => void;
  addFu: () => void;
  myType?: "字典";
};

function A5Add({ info, closeFu, addFu, myType }: Props) {
  const txtRes = useMemo(() => {
    let txt = "部门";
    if (myType === "字典") txt = "字典";
    return txt;
  }, [myType]);

  const [name, setName] = useState("");

  const [description, setDescription] = useState("");

  // 如果是编辑
  useEffect(() => {
    if (info.id !== "-1") {
      setName(info.name);
      setDescription(info.description);
    }
  }, [info]);

  // 点击提交
  const btnOkFu = useCallback(async () => {
    if (!name) return MessageFu.warning(`${txtRes}名称不能为空!`);

    const obj = {
      ...info,
      id: info.id === "-1" ? null : info.id,
      level: info.level ? info.level : 1,
      name,
      description,
      type: myType === "字典" ? "stage" : null,
    };

    const res =
      myType === "字典" ? await A2_APIadd1(obj) : await A5_APIadd(obj);

    if (res.code === 0) {
      MessageFu.success(info.id === "-1" ? "新增成功!" : "编辑成功!");
      addFu();
      closeFu();
    }
  }, [addFu, closeFu, description, info, myType, name, txtRes]);

  // 标题的动态显示
  const A5Tilele = useMemo(() => {
    let txt = "";
    if (info.id === "-1") {
      txt = `新增${myType === "字典" ? "阶段" : "部门"}`;
      if (info.parentId && info.name)
        txt = `新增 ${info.name} 子${myType === "字典" ? "阶段" : "部门"}`;
    } else {
      txt = `编辑${myType === "字典" ? "阶段" : "部门"}`;
      if (info.parentId && info.name) txt = `编辑 ${info.name}`;
    }
    return txt;
  }, [info.id, info.name, info.parentId, myType]);

  return (
    <Modal
      wrapClassName={styles.A5Add}
      destroyOnClose
      open={true}
      title={A5Tilele}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A5AddMain">
        <div className="A5AddRow">
          <span className="bs rowSpan">{txtRes}名称：</span>
          <div className="inputBox">
            <Input
              disabled={info.name === "其它"}
              maxLength={10}
              value={name}
              onChange={(e) => setName(e.target.value.replace(/\s+/g, ""))}
              showCount
              placeholder="请输入内容，不能重复"
            />
          </div>
        </div>

        <div className="A5AddRow">
          <span className="rowSpan">{txtRes}说明：</span>
          <div className="inputBox">
            <TextArea
              rows={4}
              placeholder="请输入内容"
              maxLength={100}
              showCount
              value={description}
              onChange={(e) =>
                setDescription(e.target.value.replace(/\s+/g, ""))
              }
            />
          </div>
        </div>

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

const MemoA5Add = React.memo(A5Add);

export default MemoA5Add;
