import React, { useEffect, useRef, useState} from 'react';
import {
  withRouter
} from 'react-router-dom';
import './Login.less';
import {Input,Popover} from 'antd';
import CheckBeforeSendCode from '../../components/CheckBeforeSendCode';
function Login(props) {
  const [openCheck1, setOpenCheck1] = useState(false);
  const [checkObject1, setCheckObject1] = useState({});
  const [checking1, setChecking1] = useState(false);
  useEffect(() => {
  
  }, [])
  async function checkAccount(code, callback = () => { }) {
  
  }
  function checkSend(code) {
    
  }
  return (
    <div className="login-page" >
      <div className="login-main">
        <div className="left-banner">
          <div><img  src={require("../../common/images/logo.png")} alt="" style={{ width: 60,height:61}} /></div>
          <div class="name">小麦云课堂</div>
          <div class="desc">一键开启直播授课 让知识更有价值</div>
        </div>
        <div className="login-box">
            <div className="login">
              <div className="r">
                <div className="title">
                  手机号登录
                </div>
                <form action="" className="login-form">
                  <div className="form">
                    <div className="username" style={{ marginBottom: 16 }}>
                      <Input
                        type="phone"
                        autoComplete="off"
                        name="account"
                        maxLength={11}
                        placeholder="手机号"
                      />
                    </div>
                  
                    <div className="phoneverify">
                      <Input
                        type="text"
                        id="phoneverify"
                        name="phoneverify"
                        placeholder="验证码"
                        autoComplete="off"
                      />
                      <Popover
                          visible={false}
                          trigger="click"
                          title=""
                          content={<div>
                            <span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span>
                            <CheckBeforeSendCode
                              callback={(data, nc) => {
                                setCheckObject1(nc);
                                checkAccount(1, (userType) => {
                                  handleSendSMSCode(data, userType);
                                  setTimeout(() => {
                                    setOpenCheck1(false);
                                  }, 500)
                                })
                              }}
                            />
                          </div>}
                          onVisibleChange={(value) => {
                            if (!value) {
                              setOpenCheck1(false);
                            }
                          }}
                          placement="bottomRight"
                        >
                          <div
                            className="btn"
                            id="sendVerifyCode"
                            onClick={() => {
                              if (checking1) return;
                              checkSend(1)
                            }}
                          >获取验证码</div>
                        </Popover>
                    </div>
                    <div className="error-message">
                      验证码有误
                    </div>
                    <div className="submit">
                      <div className="btn">
                        <button id='loginIn' type="submit">登录</button>
                      </div>
                    </div>
                    <div className="network-message">
                      <span className="icon iconfont">&#xe834;</span>网络不给力，请<span className="refresh">点击刷新</span>
                    </div>
                  </div>
                </form>
              </div>
            </div>
        </div>
      </div>
    </div>
  )
}

export default withRouter(Login);
