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

class LoginForm extends React.Component {
	constructor(props) {
		super(props);

		this.changTab = this.changTab.bind(this);
		this.renderAccountPassword = this.renderAccountPassword.bind(this);
		this.renderComPanyAccount = this.renderComPanyAccount.bind(this);
		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);
	}

	changTab(key) { //切换tabs标签
		const { dispatch, initialize } = this.props;
		if (key == 1) {
			dispatch(initialize({
				'tabKey': key,
				'scope': 'global_access:tenant_admin',
				'username': '',
				'password': '',
				'scopeValue': ' '
			}));
		} else {
			dispatch(initialize({
				'tabKey': key,
				'scope': 'global_access:tenant_admin',
				'username': '',
				'password': 'anything',//手机号和验证码登录时，密码随便给个值就行
				'scopeValue': '',
				'smscode': ''
			}));
		}
	}

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

	myLogin(e) {
		const { dispatch, submit } = this.props;
		if (e.keyCode == 13) {
			dispatch(submit())
		}
	}
	sendSmsCode() {
		const { dispatch, formValues, touch, valid, submit } = this.props;
		// console.log(formValues.username);
		if (formValues.username) {
			const params = {
				mobile: formValues.username,
				type: 'login',
				scope: 'global_access:tenant_admin'
			}
			dispatch(sendQuickLoginSmsCode(params));
			this.setState({
				clickStatus: true
			})
			i = setInterval(this.loop, 1000);
		} else {
			dispatch(submit())
		}
	}

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

	renderAccountPassword() { //账号密码登录
		return (
			<div className={cx(l.login_tab_content, 'login_input')}>
				<InputField type='hidden' name='scope' placeholder='请输入企业账号' onKeyUp={this.myLogin} />
				<InputField type='text' name='username' placeholder='请输入手机号' onKeyUp={this.myLogin} />
				<InputField type='password' name='password' placeholder='请输入密码' onKeyUp={this.myLogin} />
			</div>
		)
	}

	renderComPanyAccount() { //手机验证码登录
		const { clickStatus, countDown } = this.state;
		return (
			<div className={cx(l.login_tab_content, 'login_input')}>
				<InputField type='text' name='username' placeholder='请输入手机号' onKeyUp={this.myLogin} />
				<div style={{ position: 'relative' }}>
					<InputField type='text' name='smscode' placeholder='请输入验证码' onKeyUp={this.myLogin}></InputField>
					{
						!clickStatus ?
							<div className={cx(l.login_verfication_code_active)} onClick={this.sendSmsCode}>获取验证码</div>
							:
							<div className={cx(l.login_verfication_code_inactive)}>重新发送({countDown})</div>
					}
				</div>
			</div>
		)
	}


	render() {

		return (
			<div className={cx('login_container')}>
				<Card>
					<div>
						<Tabs className={cx('login_tab')} defaultActiveKey="1" onChange={this.changTab}>
							<TabPane tab="账号密码登录" key="1">{this.renderAccountPassword()}</TabPane>
							<TabPane tab="快速登陆" key="2">{this.renderComPanyAccount()}</TabPane>
						</Tabs>
						<InputField type='hidden' name='tabKey' />
						<div style={{ color: '#f04134', marginTop: '8px' }}>{this.props.error}</div>
						<Button type="primary" onClick={this.handleLogin}>立即登录</Button>
						<ul className={cx(l.login_foot)}>
							<li>还没有账号？<a href='#/login/register'>免费注册</a></li>
							<li><a href="#/login/forget-password">忘记密码</a></li>
						</ul>
					</div>
				</Card>
			</div>
		)
	}
}


const mapState = (state) => {
	return {
		formValues: getFormValues('login_form')(state),
	}
};

const submitForm = (values, dispatch, props) => {
	if (values.tabKey == 1) {
		values.grant_type = 'password';
	} else {
		values.grant_type = 'smscode'
	}
	values.scope = 'global_access:tenant_admin';

	return dispatch(doLogin(values));
}

const validate = (values, props) => {
	const errors = {};
	if (values.tabKey == 1) {
		if (required(values.username)) {
			errors.username = required(values.username);
		} else if (mobile(values.username)) {
			errors.username = mobile(values.username);
		} else if (required(values.password)) {
			errors.password = required(values.sms_code);
		} else if (minValue(6)(values.password)) {
			errors.password = minValue(6)(values.password);
		} else if (maxLength(16)(values.password)) {
			errors.password = maxLength(16)(values.password);
		}
	} else {
		if (required(values.username)) {
			errors.username = required(values.username);
		} else if (mobile(values.username)) {
			errors.username = mobile(values.username);
		} else if (required(values.sms_code)) {
			errors.sms_code = required(values.sms_code);
		}
	}
	return errors;
}

LoginForm = reduxForm({
	form: 'login_form',
	onSubmit: submitForm,
	validate: validate,
	initialValues: {
		'grant_type': 'password',
		'tabKey': 1,
		'scope': 'global_access:tenant_admin',
		'username': '',
		'password': '',
		'smscode': ''
	}
})(LoginForm);


export default connect(mapState)(LoginForm);