import { A1UtableType } from "@/types";
import {
  Button,
  Form,
  FormInstance,
  Input,
  Modal,
  Popconfirm,
  Select,
} from "antd";
import React, { useCallback, useEffect, useRef } from "react";
import styles from "./index.module.scss";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { A1_APIUsave } from "@/store/action/A1Project";
import { MessageFu } from "@/utils/message";

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

function A1UserAdd({ info, closeFu, editFu, addFu }: Props) {
  useEffect(() => {
    if (info.id > 0) {
      FormBoxRef.current?.setFieldsValue({
        dictJobId: info.dictJobId,
        name: info.name,
      });
    }
  }, [info]);

  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null);

  // 从仓库拿 项目职能 下拉框
  const arr1 = useSelector((state: RootState) => state.A2Dict.A2Tab1_1Obj.job);

  // 没有通过校验
  const onFinishFailed = useCallback(() => {}, []);

  // 通过校验点击确定
  const onFinish = useCallback(
    async (value: any) => {
      const res = await A1_APIUsave({
        dictJobId: value.dictJobId,
        name: value.name,
        id: info.id > 0 ? info.id : null,
        projectId: info.projectId,
      });

      if (res.code === 0) {
        if (info.id > 0) {
          MessageFu.success("编辑成功!");
          editFu();
        } else {
          MessageFu.success("新增成功!");
          addFu();
        }
        closeFu();
      }
    },
    [addFu, closeFu, editFu, info.id, info.projectId]
  );

  return (
    <Modal
      wrapClassName={styles.A1UAdd}
      destroyOnClose
      open={true}
      title={info.id === -1 ? "新增成员" : "编辑成员"}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A1UAmain">
        <Form
          scrollToFirstError={true}
          ref={FormBoxRef}
          labelCol={{ span: 5 }}
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="项目职能"
            name="dictJobId"
            rules={[{ required: true, message: "请选择项目职能!" }]}
          >
            <Select
              placeholder="请选择"
              options={arr1.map((v) => ({ label: v.name, value: v.id }))}
            />
          </Form.Item>

          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: "请输入姓名!" }]}
          >
            <Input maxLength={10} showCount placeholder="请输入姓名" />
          </Form.Item>

          <div className="A1UAbtn">
            <Popconfirm
              title="放弃编辑后，信息将不会保存!"
              okText="放弃"
              cancelText="取消"
              onConfirm={closeFu}
              okButtonProps={{ loading: false }}
            >
              <Button>取消</Button>
            </Popconfirm>
            &emsp;
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </div>
        </Form>
      </div>
    </Modal>
  );
}

const MemoA1UserAdd = React.memo(A1UserAdd);

export default MemoA1UserAdd;
