import React from 'react';
import {
  ProFormText,
  ModalForm,
  ProFormSelect
} from '@ant-design/pro-form';



const UpdateForm = (props) => {
  const { updateModalVisible, updateModalVisibleChange, values, onSubmit } = props;
  return (
    <>
      {
        JSON.stringify(values) !== '{}' && <ModalForm
          title="编辑菜单"
          width="800px"
          initialValues={{ ...values }}
          labelCol={{ span: 5, offset: 3 }}
          layout={'horizontal'}
          visible={updateModalVisible}
          onVisibleChange={(visible) => updateModalVisibleChange(visible)}
          onFinish={(value) => onSubmit({ ...values, ...value })}
        >
          <ProFormText
            label="菜单名称"
            rules={[
              {
                required: true,
                message: '角色名是必填项！',
              },
            ]}
            width="sm"
            name="name"
          />
          <ProFormText
            label="Path"
            rules={[
              {
                required: true,
                message: '菜单路径是必填项！',
              },
            ]}
            width="sm"
            name="path"
          />
          <ProFormText
            label="权限字段"
            rules={[
              {
                required: true,
                message: '权限字段是必填项！',
              },
            ]}
            width="sm"
            name="perms"
          />
          <ProFormSelect
            name="type"
            label="类型"
            width="sm"
            options={[
              { label: '目录', value: 0 },
              { label: '菜单', value: 1 },
              { label: '按钮', value: 2 },
            ]}
            fieldProps={{
              optionItemRender(item) {
                return item.label + ' - ' + item.value;
              },
            }}
            placeholder="请选择类型"
            rules={[{ required: true, message: '请选择类型!' }]}
          />
          <ProFormText
            label="菜单Icon"
            rules={[
              {
                required: false,
              },
            ]}
            width="sm"
            name="icon"
          />
          <ProFormText
            label="菜单排序"
            rules={[
              {
                required: false,
              },
            ]}
            width="sm"
            name="orderNum"
          />
        </ModalForm>
      }
    </>
  );
};

export default UpdateForm;
