import React from 'react'
import { Modal, Icon, Button, Input, Checkbox  } from 'antd'
import { connect } from 'dva'
import './relogin.less'

class Relogin extends React.Component {

    constructor(props) {
        super(props);
        const { main } = props;
        const { currentUser, autoLogin } = main;
        const { account, password } = currentUser;

        this.state = {
            currentUserName: account,
            currentPassword: password,
            autoLogin: autoLogin,
            fetching: false
        }
    }

    onUsernameChange = (e) => {
        this.setState({ currentUserName: e.target.value });
    }
    
    onPasswordChange = (e) => {
        this.setState({ currentPassword: e.target.value });
    }

    onRemanberChange = (e) => {
        this.setState({ autoLogin: e.target.checked });
    }

    onLogin = () => {
        const { currentUserName, currentPassword, autoLogin } = this.state;
        const { dispatch } = this.props;
        this.setState({
            fetching: true
        })
        dispatch({ type: 'main/login', username: currentUserName, password: currentPassword, autoLogin })
        .then((d) => {
            this.setState({
                fetching: false
            })
        }).catch((r) => {
            console.error(r)
        })
    }

    render() {
        const { main, visibleBox, dispatch } = this.props;
        const { autoLogin, fetching } = this.state;
        const { currentUser } = main;
        const { account, password: defaultPassword } = currentUser;

        return <Modal
            title="重新登录"
            className='relogin-box'
            visible={visibleBox}
            footer={null}
            closable={false}
            centered={true}
            width={380}
        >
            <div className="relogin-item">距离上次登录已经超过30分钟，请重新登录</div>
            <Input
                placeholder="用户名"
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                defaultValue={account}
                disabled={true}
                className="relogin-item"
                onChange={this.onUsernameChange}
            ></Input>
            <Input.Password
                placeholder="请输入登录密码"
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                className="relogin-item"
                defaultValue={autoLogin ? defaultPassword : ''}
                rules={[{
                    required: true,
                    whitespace: true,
                    message: "密码不能为空！",
                }]}
                onChange={this.onPasswordChange}
                onPressEnter={(e) => {
                    this.onLogin()
                }}
            ></Input.Password>
            <div className="relogin-item remanber">
                <Checkbox defaultChecked={autoLogin} onChange={this.onRemanberChange}>记住密码</Checkbox>
            </div>
            <div className="relogin-item buttons">
                <Button disabled={fetching} type="primary" onClick={this.onLogin}>
                    {fetching && <Icon type="loading" theme="outlined" />}
                    重新登录
                </Button>
            </div>
            <div style={{ textAlign: 'end' }}>
                <a style={{ textDecoration: 'underline' }} onClick={() => {
                    dispatch({ type: 'main/logout' });
                    dispatch({ type: 'main/redirect', path: '/login' });
                }}>
                    切换用户
                </a>
            </div>
        </Modal>
    }
}

function mapStateToProps({ main }) {
    return { main };
}

export default connect(mapStateToProps)(Relogin)