import { getRoleInfoByIdAPI, roleSaveAPI } from "@/store/action/A4Role";

import { Button, Input, Modal, Popconfirm } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import classNames from "classnames";
import styles from "./index.module.scss";
import { AddRoleType, RoleTableType } from "@/types";
import { MessageFu } from "@/utils/message";
const { TextArea } = Input;

type Props = {
  id: any;
  closePage: () => void;
  upTableList: () => void;
  addTableList: () => void;
};

function RoleAdd({ id, closePage, upTableList, addTableList }: Props) {
  // 角色名称
  const [roleName, setRoleName] = useState("");

  // 角色描述
  const [roleDesc, setRoleDesc] = useState("");

  const getRoleInfoByIdFu = useCallback(async (id: number) => {
    const res = await getRoleInfoByIdAPI(id);
    const info: RoleTableType = res.data.role;
    setRoleName(info.roleName);
    setRoleDesc(info.roleDesc);
  }, []);

  // 如果是编辑
  useEffect(() => {
    if (id) getRoleInfoByIdFu(id);
  }, [getRoleInfoByIdFu, id]);

  // 点击提交
  const btnOkFu = useCallback(async () => {
    if (roleName === "") return MessageFu.warning("请输入角色名称!");

    const obj: AddRoleType = {
      id: id ? id : null,
      roleDesc: roleDesc,
      roleName: roleName,
    };
    const res: any = await roleSaveAPI(obj);

    if (res.code === 0) {
      MessageFu.success(id ? "编辑成功!" : "新增成功!");
      closePage();
      if (id) addTableList();
      else upTableList();
    }
  }, [addTableList, closePage, id, roleDesc, roleName, upTableList]);

  return (
    <Modal
      wrapClassName={styles.roleAdd}
      destroyOnClose
      open={true}
      title={id ? "编辑角色" : "新增角色"}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className={classNames("roleAddMain")}>
        <div className="row">
          <span className="bs rowSpan">角色名称：</span>
          <div className="inputBox">
            <Input
              disabled={id === 2}
              maxLength={10}
              value={roleName}
              onChange={(e) => setRoleName(e.target.value.replace(/\s+/g, ""))}
              showCount
              placeholder="请输入内容，不能重复"
            />
          </div>
        </div>

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

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

const MemoRoleAdd = React.memo(RoleAdd);

export default MemoRoleAdd;
