import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import { connect } from 'react-redux';

import * as actions from '../../store/action'

// 引入wcPop弹窗插件
import { wcPop } from '../../assets/js/wcPop/wcPop.js'

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tel: '',
            pwd: '',
            vcode: '',

            vcodeText: '获取验证码',
            disabled: false,
            time: 0
        }
    }

    componentDidMount(){
        if(this.props.token){
            this.props.history.push('/')
        }
    }

    render() {
        return (
            <div className="wcim__lgregWrapper flexbox flex__direction-column">
                ......
            </div>
        )
    }
    

    // 提交表单
    handleSubmit = (e) => {
        e.preventDefault();
        var that = this

        this.state.tel = this.refs.tel.value
        this.state.pwd = this.refs.pwd.value
        this.state.vcode = this.refs.vcode.value

        if (!this.state.tel) {
            wcPop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });
        } else if (!checkTel(this.state.tel)) {
            wcPop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 });
        } else if (!this.state.pwd) {
            wcPop({ content: '密码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });
        } else if (!this.state.vcode) {
            wcPop({ content: '验证码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });
        } else {
            // 获取登录之前的页面地址
            let redirectUrl = this.props.location.state ? this.props.location.state.from.pathname : '/'

            // 设置token
            this.props.authToken(getToken())
            this.props.authUser(this.state.tel)

            wcPop({
                content: '注册成功！', style: 'background:#41b883;color:#fff;', time: 2,
                end: function () {
                    that.props.history.push(redirectUrl)
                }
            });
        }
    }

    // 60s倒计时
    handleVcode = (e) => {
        e.preventDefault();

        this.state.tel = this.refs.tel.value

        if (!this.state.tel) {
            wcPop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });
        } else if (!checkTel(this.state.tel)) {
            wcPop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 });
        } else {
            this.state.time = 60
            this.state.disabled = true
            this.countDown();
        }
    }

    countDown = (e) => {
        if(this.state.time > 0){
            this.state.time--
            this.setState({
                vcodeText: '获取验证码(' + this.state.time + ')'
            })
            // setTimeout(this.countDown, 1000);
            setTimeout(() => {
                this.countDown()
            }, 1000);
        }else{
            this.setState({
                time: 0,
                vcodeText: '获取验证码',
                disabled: false
            })
        }
    }
}

const mapStateToProps = (state) => {
    return {
        ...state.auth
    }
}

export default connect(mapStateToProps, {
    authToken: actions.setToken,
    authUser: act