import React, {PropTypes} from 'react';
import {Field, reduxForm, SubmissionError, getFormValues} from 'redux-form';
import InputField from './widget/reduxForm/InputField';
import {Button, Tabs,message} from 'antd';
import {connect} from 'react-redux';
const TabPane = Tabs.TabPane;
import cx from 'classnames';
import l from './loginFormLess.les';
import {doLogin, sendLoginSmsCode,changePassword,sendResetPwdSmsCode} from '../redux/actions/authed';
import {required, mobile, minValue, maxLength,number,password} from './widget/reduxForm/validate';
let i = '';

class ForgetPasswordForm extends React.Component {
    constructor(props) {
        super(props);
        this.handleLogin = this.handleLogin.bind(this);
        this.myLogin = this.myLogin.bind(this);
        this.sendSmsCode = this.sendSmsCode.bind(this);
        this.loop = this.loop.bind(this);
        this.state = {
            clickStatus: false,
            countDown: 60
        }
    }
    componentDidMount() {}
    componentWillReceiveProps(nextProps) {}
    componentWillUnmount() {
        window.clearInterval(i);
    }

    handleLogin() { //立即登录
        const {dispatch, submit} = this.props;
        dispatch(submit());
        this.setState({clickStatus: false})
    }

    myLogin(e) {
        const {dispatch, submit} = this.props;
        if (e.keyCode == 13) {
            // console.log('进入回车事件');
            dispatch(submit());
        }
    }

    sendSmsCode() {
        const {dispatch, formValues, touch, valid} = this.props;
        const params = {
            mobile: formValues.mobile,
            type: 'resetpwd',
            scope: 'global_access:tenant_admin'
        }

        const o = required(formValues.mobile);
        const p = mobile(formValues.mobile);
        if(!o&&!p){
          dispatch(sendResetPwdSmsCode(params));
          this.setState({clickStatus: true})
          i = setInterval(this.loop, 1000);
        }
    }

    loop() {
        const {countDown} = this.state;
        if (countDown == 0) {
            this.setState({clickStatus: false, countDown: 60})
        } else {
            let temp = countDown - 1;
            this.setState({countDown: temp})
        }
    }

    goSubmit(){
      const {dispatch,submit}= this.props;
      window.clearInterval(i);
      this.setState({
        clickStatus: false,
        countDown: 60
      })
      dispatch(submit());
    }

    render() {
        const {clickStatus,countDown} = this.state;
        const {handleSubmit} = this.props;
        return (
            <div >
                <Tabs className={cx('login_tab')} defaultActiveKey="1">
                    <TabPane tab="重置密码" key="1">
                        <div className={cx(l.login_tab_content, 'login_input')}>
                            <InputField type='text' name='mobile' placeholder='请输入手机号' onKeyUp={this.myLogin} />
                            <div style={{position:'relative'}}>
                              <InputField type='text' name='sms_code' placeholder='请输入验证码' onKeyUp={this.myLogin}></InputField>
                                {!clickStatus
                                    ? <div className={cx(l.reset_verfication_code_active)} onClick={this.sendSmsCode}>获取验证码</div>
                                    : <div className={cx(l.reset_verfication_code_inactive)}>重新发送({countDown})</div>
    														}

                            </div>
                            <InputField type='password' name='password' placeholder='请输入密码' onKeyUp={this.myLogin}></InputField>
                            <InputField type='password' name='confirmPassword' placeholder='请再次输入密码' onKeyUp={this.myLogin}></InputField>
                        </div>
                    </TabPane>

                </Tabs>
                <InputField type='hidden' name='tabKey'/>
                <div style={{
                    color: '#f04134',
                    marginTop: '8px'
                }}>{this.props.error}</div>
              <Button type="primary" onClick={this.goSubmit.bind(this)}>确定</Button>
                <ul className={cx(l.login_foot)}>
                    <li></li>
                    <li>
                        <a href="#">返回登录</a>
                    </li>
                </ul>
            </div>
        )
    }
}



const submitForm = (values, dispatch, props) => {
			return dispatch(changePassword(values));

}

const validate = (values, props) => {
    const errors = {};
    if (required(values.mobile)) {
        errors.mobile = required(values.mobile);
        console.log(required(values.mobile))
    } else if (mobile(values.mobile)) {
        errors.mobile = mobile(values.mobile);
    } else if (required(values.sms_code)) {
        errors.sms_code = required(values.sms_code);
    } else if (number(values.sms_code)) {
        errors.sms_code = number(values.sms_code);
    } else if (required(values.password)) {
        errors.password = number(values.sms_code);
    } else if (password(values.password)) {
        errors.password = password(values.password);
    } else if (required(values.confirmPassword)) {
        errors.confirmPassword = number(values.confirmPassword);
    } else if (password(values.confirmPassword)) {
        errors.confirmPassword = password(values.confirmPassword);
    } else if (values.password != values.confirmPassword) {
        errors.confirmPassword = '两次输入的密码不一致';
    }
    return errors;
}

ForgetPasswordForm = reduxForm({
    form: 'forget-password',
    onSubmit: submitForm,
		validate,
    initialValues: {
				'mobile':'',
        'scope': 'global_access:tenant_admin',
        'password': '',
    }
})(ForgetPasswordForm);

const mapState = (state) => {
    return {
        formValues: getFormValues('forget-password')(state)
    }
};

export default connect(mapState)(ForgetPasswordForm);