import React from 'react';
import { Form, Icon, Input, Button, Tabs, Alert } from 'antd';
import './index.less';
// import Geetest from '@src/components/Geetest';
import Page from '../../containers/Page';
import Block from '../../components/Block';
import { User } from '../../stores/user';
import { asyncSMessage } from '../../services/AsyncTools';

export default class extends Page {
  initData() {
    this.toGeetest();
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        User.login(values)
          .then(() => {
            asyncSMessage('登录成功!');
            linkTo('/');
          })
          .catch(error => {
            this.setState({ err: error.message });
          });
      }
    });
  }

  toGeetest() {
    // this.props.geetest()
    //   .then(data => {
    //     this.setState({ geetest: data })
    //   })
  }

  changeCaptcha() {
    this.setState({ time: new Date().getTime() });
  }

  renderView() {
    const { getFieldDecorator } = this.props.form;
    const { err } = this.state;
    return (
      <Block full center color="none">
        <h1 className="title">{this.props.core.name}</h1>
        {/* <div className="desc" /> */}
        <Tabs defaultActiveKey="1">
          <Tabs.TabPane tab="账号密码登录" key="1">
            <Form onSubmit={e => this.handleSubmit(e)} className="login-form">
              {err && (
                <Form.Item>
                  <Alert type="error" showIcon message={err} closable onClose={() => this.setState({ err: '' })} />
                </Form.Item>
              )}
              <Form.Item>
                {getFieldDecorator('username', {
                  rules: [{ required: true, message: '请输入用户名!' }],
                })(<Input size="large" prefix={<Icon type="user" />} placeholder="用户名" />)}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: '请输入密码!' }],
                })(<Input size="large" prefix={<Icon type="lock" />} type="password" placeholder="密码" />)}
              </Form.Item>
              {/* <Geetest
                gt={this.state.geetest.gt}
                challenge={this.state.geetest.challenge}
                success={this.state.geetest.success}
                new_captcha={this.state.geetest.new_captcha}
                width={'400px'}
                onSuccess={data => {
                  console.log(data);
                  this.geetest = data;
                }}
              /> */}
              <Form.Item>
                <Button
                  loading={this.props.core.loading}
                  type="primary"
                  size="large"
                  htmlType="submit"
                  className="login-form-button"
                >
                  <Icon type="login" />
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Tabs.TabPane>
        </Tabs>
      </Block>
    );
  }
}
