import { Button, Form, Input, Modal } from 'antd';
import React, { useState } from 'react';

const UserModal = ({ visible, onCreate, onCancel }) => {
    const [form] = Form.useForm();
    const reg_tel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
    return (
        <Modal
            visible={visible}
            title="新建用户"
            okText="新建"
            cancelText="取消"
            onCancel={() => {
                form.resetFields();
                onCancel();
            }}
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {
                        form.resetFields();
                        onCreate(values);
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={{
                    modifier: 'public',
                }}
            >
                <Form.Item
                    name="name"
                    label="姓名"
                    rules={[
                        { required: true, message: '请输入姓名' },
                        { max: 24, message: '姓名不能大于24个字符' },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="phone"
                    label="用户名（手机号）"
                    rules={[
                        { required: true, message: '请输入正确的手机号' },
                        { pattern: reg_tel, message: '请输入正确的手机号' },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="password"
                    label="密码"
                    rules={[
                        { required: true, message: '请填写密码' },
                        { min: 6, message: '请填写至少6位密码' },
                    ]}
                >
                    <Input type="password" />
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default UserModal;