/**
 * Created by qingkong on 2018/5/2
 */
import React from 'react';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import { message, Form, Input, Button } from 'antd';
import { getItem } from '../../utils/index';

const FormItem = Form.Item;

@withRouter
@inject('login')
@observer
class Login extends React.Component {
  componentDidMount() {
    this.goDashboard();
  }

  onSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.login(values);
      } else {
        message.error('请填完列表的必选项!');
      }
    });
  }

  onKeyDown = e => {
    if (e && e.keyCode === 13) {
      this.onSubmit();
    }
  }

  goDashboard = () => {
    if (getItem('token')) this.props.history.replace('/home');
  }

  login = async values => {
    await this.props.login.login(values);
    message.success('登录成功');
    this.goDashboard();
  }

  render() {
    const { loading } = this.props.login;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      colon: false
    };
    return (
      <div className="login-form init-form">
        <Form hideRequiredMark>
          <FormItem label="用户名：" {...formItemLayout}>
            {getFieldDecorator('username', {
              rules: [{
                required: true,
                message: '用户名不能为空',
              }],
            })(
              <Input
                onKeyDown={this.onKeyDown}
                // prefix={<i className="iconfont icon-yonghu1" />}
                placeholder="点击输入用户名"
              />
            )}
          </FormItem>
          <FormItem label="密码：" className="password" {...formItemLayout}>
            {getFieldDecorator('password', {
              rules: [{
                required: true,
                message: '密码不能为空',
              }],
            })(
              <Input
                onKeyDown={this.onKeyDown}
                // prefix={<i className="iconfont icon-mima1" />}
                type="password"
                placeholder="点击输入密码"
              />
            )}
          </FormItem>
          <FormItem className="form-bottom">
            <Button onClick={this.onSubmit} loading={loading} className="submit-btn">登录</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const WrappedLogin = Form.create({})(Login);
export default WrappedLogin;