import { ConfigProvider, Modal, Form, Input, Select } from "antd";

const UserRegistration = ({ _this }) => {
  const { userRegisterMode } = _this.state;
  if (!userRegisterMode) return "";

  const [form] = Form.useForm();

  const handleCancel = () => {
    _this.setState({
      userRegisterMode: false,
    });
  };

  const handleOk = () => {
    form.submit();
  };

  const onFinish = values => {
    console.log("=====Success:", values);
  };

  return (
    <ConfigProvider prefixCls="antdV5">
      <Modal
        title="用户注册"
        open={userRegisterMode}
        okText="确认"
        cancelText="取消"
        onOk={handleOk}
        onCancel={handleCancel}
        width={400}
      >
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          labelAlign="left"
        >
          <Form.Item label="用户名" name="username" rules={[{ required: true, message: "未填写用户名!" }]}>
            <Input />
          </Form.Item>

          <Form.Item
            label="手机号"
            name="telenumber"
            rules={[
              { required: true, message: "未填写手机号!" },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: "请输入有效的中国大陆手机号",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="公司名称" name="company" rules={[{ required: true, message: "未选择公司!" }]}>
            <Select
              options={[
                { value: "xly", label: "上海小羚羊" },
                { value: "jinjia", label: "深圳劲嘉" },
                { value: "pushi", label: "四川3D" },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    </ConfigProvider>
  );
};

export default UserRegistration;