import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Button, Checkbox, message, Spin, Icon } from 'antd';
import './adminLogin.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

var Login = React.createClass({
  getInitialState() {
    return {
      user: '',
      password: '',
      checked: '',
      loading: false
    };
  },

  handleSubmit() {
    if (this.state.user === "" || this.state.password === "") {
      message.warning('账号或者密码不能为空！');
    } else {
      this.setState({
        loading: true
      });
      // debugger
      $.ajax({
        method: "POST",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/managesignin",
        data: {
          mobile: this.state.user,
          password: this.state.password,
          remeber: false
        }
      }).done(function (data) {
        if (!data.error.length) {
          localStorage.setItem("userId", data.data.id)
          window.location.href = globalConfig.context + "/RD/admin/index.html";
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)).always(function () {
        this.setState({
          loading: false
        });
      }.bind(this));
    };
  },


  keyboard(event) {
    if (event.keyCode == 13) {
      this.handleSubmit()
    }
  },
  getUser(event) {
    this.setState({ user: event.target.value });
  },

  getPassword(event) {
    this.setState({ password: event.target.value });
  },

  onChange(event) {
    this.setState({ checked: event.target.checked });
  },

  render() {
    return (
      <div className='content'>
        {/* 旋转动画 */}
        <div className="ui_base u_p3d">
          <div className="ball_c"></div>
          <div className="base u_p3d">
            <div className="pan"></div>
            <div className="ball_base u_p3d ball_1">
              <div className="ball"></div>
            </div>
            <div className="ball_base u_p3d ball_2">
              <div className="ball"></div>
            </div>
            <div className="ball_base u_p3d ball_3">
              <div className="ball"></div>
            </div>
            <div className="ball_base u_p3d ball_4">
              <div className="ball"></div>
            </div>
            <div className="ball_base u_p3d ball_5">
              <div className="ball"></div>
            </div>
            <div className="ball_base u_p3d ball_6">
              <div className="ball"></div>
            </div>
          </div>
        </div>

        <div className="login-box">
          <Spin spinning={this.state.loading} className='spin-box'>
            <div className="user-box">
              <Input onChange={this.getUser}
                autocomplete="off"
                onKeyDown={this.keyboard} placeholder="账号" value={this.state.user}
              // prefix={<Icon width={"18px"} type="user" />}
              />
            </div>
            <div className="pw-box">
              <Input onChange={this.getPassword}
                autocomplete="off"
                onKeyDown={this.keyboard} type="password" placeholder="密码" value={this.state.password}
              // prefix={<Icon width={"18px"} type="lock" />}
              />
            </div>
            <Button onClick={this.handleSubmit}>登录</Button>
          </Spin>
        </div>

        <div id="title">科技厚生 正德卓行</div>
      </div>
    );
  }
});

export default Login;