import React, { useRef } from 'react';
import { Button, Form } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import {
    ModalForm,
    ProFormSelect,
    ProFormTextArea,
    ProFormDigit,
    ProFormText,
    ProFormSwitch
} from '@ant-design/pro-form';

export default (props) => {
    const { title, triggerRender, editData = null, onFinish, paramsName } = props;
    const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
    const initialValues = editData ? {
        ...editData,
    } : {};
    const [form] = Form.useForm();
    const formRef = useRef();
    return (
        <ModalForm
            formRef={formRef}
            title={title || ''}
            initialValues={initialValues}
            trigger={
                triggerRender ? triggerRender : <Button type="primary" >
                    {title || ''}
                </Button>
            }
            layout="horizontal"
            grid={true}
            {...formItemLayout}
            modalProps={{
                destroyOnClose: true,
                onCancel: () => { },
            }}
            onFinish={async (values) => {
                return onFinish && await onFinish(values, editData, form)
                // return true;
            }}
            width={500}
        >
            <ProFormText
                rules={[{ required: true, message: '请输入姓名' },
                { max: 255, message: '姓名长度不能大于255个字符' },
                ]}
                name="name"
                label="姓名"
            />

            <ProFormText
                rules={[{ required: true, message: '请输入用户名' },
                { max: 255, message: '用户名长度不能大于255个字符' },
                ]}
                name="username"
                label="用户名"
            />

            <ProFormSelect
                disabled={editData}
                rules={[{ required: true, message: '请选择角色' }]}
                options={[
                    { label: '系统管理员', value: '系统管理员' },
                    { label: '数据消费者', value: '数据消费者' },
                ]}
                name="role"
                label="角色"
            />

            <ProFormSwitch name="enabled" label="是否启用"
                fieldProps={
                    { defaultChecked: true }
                }
            />
        </ModalForm>
    );
};