import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Input, Modal } from "antd";
import MyPopconfirm from "@/components/MyPopconfirm";
import { A7_APIthemeSave } from "@/store/action/A7school";
import { MessageFu } from "@/utils/message";

type Props = {
  editInfo: { id: number; name: string };
  upTableFu: () => void;
  closeFu: () => void;
};

function A7tEdit({ editInfo, upTableFu, closeFu }: Props) {
  const [text, setText] = useState("");

  useEffect(() => {
    if (editInfo.name) setText(editInfo.name);
  }, [editInfo.name]);

  const btnOkFu = useCallback(async () => {
    const res = await A7_APIthemeSave({
      id: editInfo.id > 0 ? editInfo.id : null,
      name: text,
      display:1,
      type: "dict-person",
    });
    if (res.code === 0) {
      MessageFu.success(editInfo.id > 0 ? "编辑成功!" : "新增成功!");
      upTableFu();
      closeFu();
    }
  }, [closeFu, editInfo.id, text, upTableFu]);

  return (
    <Modal
      wrapClassName={styles.A7tEdit}
      open={true}
      title={(editInfo.id > 0 ? "编辑" : "新增") + "采访主题"}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A7tMain">
        <div className="A7tErow">
          <div className="A7tErow1">
            <span>* </span>采访主题：
          </div>
          <div className="A7tErow2">
            <Input
              value={text}
              onChange={(e) => setText(e.target.value.replace(/\s+/g, ""))}
              placeholder="请输入文字"
              showCount
              maxLength={20}
            />
          </div>
        </div>

        <div className="A7tEbtn">
          <Button type="primary" onClick={btnOkFu} disabled={text.length <= 0}>
            提交
          </Button>
          &emsp;
          <MyPopconfirm txtK="取消" onConfirm={closeFu} />
        </div>
      </div>
    </Modal>
  );
}

const MemoA7tEdit = React.memo(A7tEdit);

export default MemoA7tEdit;
