import React, { useRef } from 'react';
import { Button, Form } from 'antd';
import {
    ModalForm,
    ProFormText,
} from '@ant-design/pro-form';

export default (props) => {
    const { title, triggerRender, editData = null, onFinish } = props;
    const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
    const initialValues = {};
    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, msg: '重置密码' }, editData, '重置密码')
            }}
            width={500}
        >
            <ProFormText.Password
                rules={[{ required: true, message: '请输入旧密码' },
                { max: 255, message: '旧密码长度不能大于255个字符' },
                {
                    pattern: /^[a-z0-9A-Z_]{6,20}$/, message: '密码由6-20位字母、数字或_组成'
                },
                ]}
                name="oldpassword"
                label="旧密码"
            />

            <ProFormText.Password
                rules={[{ required: true, message: '请输入新密码' },
                { max: 255, message: '新密码长度不能大于255个字符' },
                {
                    pattern: /^[a-z0-9A-Z_]{6,20}$/, message: '密码由6-20位字母、数字或_组成'
                },
                ]}
                name="password"
                label="新密码"
            />


        </ModalForm>
    );
};