'use strict';
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { Button, Input, Form, Row, Col, message } from 'antd';
import { login } from '../actions/auth';
import './style.less';

const FormItem = Form.Item;
const Login = props => {
    const { dispatch, user, error, isRequesting } = props
    const [username, setUserName] = useState('')
    const [password, setPassword] = useState('')
    const [inputChanged, setInputChanged] = useState(false)

    useEffect(() => {

    }, [])

    useEffect(() => {
        if (error) {
            message.error(error);
            setPassword('')
        }
    }, [error])

    useEffect(() => {
        user && user.authorized ? dispatch(push('/screen/cockpit')) : null
    }, [user])

    const enterHandler = e => {
        if (e.key === 'Enter') {
            setInputChanged(false)
            dispatch(login(username, password));
        }
    };


    const handleLogin = () => {
        let reg_user = "SuperAdmin";
        let reg_tel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;    //11位手机号码正则
        if (username == reg_user || reg_tel.test(username)) {
            setInputChanged(false)
            dispatch(login(username, password))
            return
        }
        if (username == "" || password == "") {
            setInputChanged(false)
            dispatch(login(username, password))
            return
        }
        setInputChanged(false)
        dispatch(login(username, password))
    }


    return (
        <div className='login'>
            {/* <div className='left'></div> */}
            <div className='right'>
                <div className='loginBox'>
                    <h1>南昌县智慧交通监管系统</h1>
                    <Form onKeyDown={enterHandler}>
                        <FormItem>
                            <div className='loginFormTit'>用户名</div>
                            <Input
                                className='loginInp'
                                type="text"
                                value={username}
                                maxlength={11}
                                onChange={e => {
                                    console.log('e.target.value', e.target.value)
                                    setUserName(e.target.value)
                                    setInputChanged(true)
                                }}
                            />
                        </FormItem>
                        <div className='loginFormTit'>密码</div>
                        <FormItem>
                            <Input
                                className='loginInp'
                                type="password"
                                value={password}

                                onChange={e => {
                                    console.log('setPassword', e.target.value)
                                    setPassword(e.target.value)
                                    setInputChanged(true)
                                }}
                            />
                        </FormItem>
                    </Form>
                    <Button type="primary" className='loginBtn' loading={isRequesting} onClick={handleLogin}>登录</Button>
                </div>
            </div>
        </div>
    );
}

function mapStateToProps(state) {
    const { auth } = state;
    return {
        user: auth.user,
        error: auth.error,
        isRequesting: auth.isRequesting
    }
}

export default connect(mapStateToProps)(Login);