import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import md5 from "md5";
import { Button, Form, Input, Radio, Select, Row, Col, message } from "antd";
import { login } from "@/services/login";
import "./style.less";

export default (props) => {
  const navigate = useNavigate();
  const [loading, setLoading] = React.useState(false);

  const [form] = Form.useForm();
  const onFinish = (values) => {
    setLoading(true);
    login({
      loginName: values.loginName,
      loginType: "platform.pc",
      password: md5(values.password),
    })
      .then((res) => {
        setLoading(true);
        try {
          navigate("/authentication");
        } catch (e) {
          message.error(e);
        }
        setLoading(false);
      })
      .catch((err) => {
        // console.log('----err--', err);
        setLoading(false);
      });

    setLoading(false);
  }

  return (
    <div className="qlogin-right-box">
      <div className="qlogin-right-title">登录你的Qbit账户</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="password"
          rules={[{ required: true }]}
        >
          <Input.Password
            placeholder="请输入密码"
            style={{ borderRadius: "4px" }}
          />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            size="large"
            style={{ width: "100%", marginTop: "24px", borderRadius: "4px", height: '3em' }}
            htmlType="submit"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <div>还没有Qbit账户？</div><Button type="link" onClick={() => navigate('/qRegister')}>立即注册</Button>
      </div>
    </div>
  )
}