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

type Props = {
  info: A2Tab1_1;
  closeFu: () => void;
  addFu: () => void;
};

function A2Tab1Add({ info, closeFu, addFu }: Props) {
  const [name, setName] = useState("");

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

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

    const obj = {
      ...info,
      id: info.id === -1 ? null : info.id,
      name,
      description,
    };

    const res = await A2_APIadd1(obj);

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

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

  const A2Tilele = useMemo(() => {
    const type2text = {
      job: "职能",
      status: "状态",
      main: '主体',
      dept: '部门',
      projectBusiness: '业务类型',
      projectScope: '项目范围',
      projectApp: '客户端',
    }
    let txt1 = type2text[info.type];
    let txt2 = info.id === -1 ? "新增" : "编辑";
    return txt2 + txt1;
  }, [info.id, info.type]);

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

        <div className="A2TableAddRow">
          <span className="rowSpan">字典说明：</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="A2TableAddBtn">
          <Popconfirm
            title="放弃编辑后，信息将不会保存!"
            okText="放弃"
            cancelText="取消"
            onConfirm={closeFu}
            okButtonProps={{ loading: false }}
          >
            <Button>取消</Button>
          </Popconfirm>
          &emsp;
          <Button type="primary" onClick={btnOkFu}>
            提交
          </Button>
        </div>
      </div>
    </Modal>
  );
}

const MemoA2Tab1Add = React.memo(A2Tab1Add);

export default MemoA2Tab1Add;
