// 创建弹窗
import React, { useRef, useEffect } from 'react';
import { createForm } from '@formily/core';
import { createSchemaField } from '@formily/react';
import Modal, { ModalProps } from '@/components/Modal';
import { Form, FormItem, Input, Select } from '@formily/antd';
import { addUser, updateUser } from '@/services/system/accountManage';

interface AddUserModalPropsType extends ModalProps {
  editModalData: any;
  onCancel: () => void;
  onOk: () => void;
}

const SchemaField = createSchemaField({
  components: {
    FormItem,
    Input,
    Select,
  },
});

const form = createForm({});

const AddUserModal = ({ onOk, onCancel, editModalData, ...rest }: AddUserModalPropsType) => {
  useEffect(() => {
    form.setInitialValues(editModalData);
  });

  const handleOk = async () => {
    onOk();
    const formState = form.getFormState();
    formState.values.role = parseInt(formState.values.role);
    await updateUser(formState.values);
  };

  const handleCancel = () => {
    onCancel();
  };

  return (
    <Modal title="编辑管理账号" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
      <Form form={form} labelCol={4} wrapperCol={18}>
        <SchemaField>
          <SchemaField.String
            name="name"
            title="账号名"
            required
            x-disabled
            x-decorator="FormItem"
            x-component="Input"
            x-component-props={{
              placeholder: '请输入账号名',
            }}
          />
          <SchemaField.String
            name="password"
            title="密码"
            required
            x-decorator="FormItem"
            x-component="Input"
            x-component-props={{
              placeholder: '请输入密码',
            }}
          />
          <SchemaField.String
            name="role"
            title="角色"
            required
            x-decorator="FormItem"
            x-component="Input"
            x-component-props={{
              placeholder: '请选择角色',
            }}
          />
        </SchemaField>
      </Form>
    </Modal>
  );
};

export default AddUserModal;