import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Form, Input, Radio, Select, Row, Col, Checkbox } from "antd";
import "./style.less";

export default (props) => {
  const navigate = useNavigate();

  const { Search } = Input;
  const [form] = Form.useForm();
  const onFinish = () => {

  }

  return (
    <div className="qregister-right-box">
      <div className="qregister-right-title">开通Qbit账户</div>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '40px' }}>
        <div>已有账户？</div><Button type="link" onClick={() => navigate('/qLogin')}>去登陆</Button>
      </div>
      <Form
        form={form}
        layout="vertical"
        size="large"
        onFinish={onFinish}
      >
        <Form.Item
          label="手机号"
          name="loginName"
          rules={[{ required: true }]}
        >
          <Input.Group>
            <Row>
              <Col span={8}>
                <Select defaultValue="+86">
                  <Option value="+86" style={{ backgroundColor: '#f5f5f5' }}>+86</Option>
                  <Option value="+852" style={{ backgroundColor: '#f5f5f5' }}>+852</Option>
                </Select>
              </Col>
              <Col span={16}><Input placeholder="请输入手机号" /></Col>
            </Row>
          </Input.Group>
        </Form.Item>

        <Form.Item
          label="验证码"
          name="loginName"
          rules={[{ required: true }]}
        >
          <Input.Group>
            <Row>
              <Col span={15}>
                <Input placeholder="请输入手机验证码" />
              </Col>
              <Col span={9}><Button type="primary">获取验证码</Button></Col>
            </Row>
          </Input.Group>
        </Form.Item>
        <Form.Item
          label="设置密码"
          name="password"
          rules={[{ required: true }]}
        >
          <Input.Password
            placeholder="请设置密码"
            style={{ borderRadius: "4px" }}
          />
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="password"
          rules={[{ required: true }]}
        >
          <Input.Password
            placeholder="请再次输入密码"
            style={{ borderRadius: "4px" }}
          />
        </Form.Item>
        <Form.Item
          label="微信号(选填)"
          name="loginName"
        >
          <Input placeholder="请输入微信号/手机号" style={{ borderRadius: "4px" }} />
        </Form.Item>
        <Form.Item
          label="邀请码(选填)"
          name="loginName"
        >
          <Input placeholder="若有，请输入邀请码" style={{ borderRadius: "4px" }} />
        </Form.Item>
        <Checkbox>
          <div>
            <span>我已阅读并同意</span>
            <a>Qbit General Terms and Conditions</a>和
            <a>Privacy Policies</a>
            {/*<Button type="link">Qbit General Terms and Conditions</Button>
            和<Button type="link">Privacy Policies</Button> */}
          </div>

        </Checkbox>
        <Form.Item>
          <Button
            type="primary"
            size="large"
            style={{ width: "100%", marginTop: "24px", borderRadius: "4px", height: '3em' }}
            htmlType="submit"
          >
            确认开通
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}