import React, { Component } from 'react';
import { connect } from 'dva';
import Cookies from 'js-cookie';
import { Link, routerRedux } from 'dva/router';
import { Checkbox, Alert, Icon, notification, Modal } from 'antd';
import Login from '@/components/Login';
import styles from './Login.less';
import logoImg from "../../assets/logo.png";
import loginBg from "../../assets/login-bg.png";
import UpdatePassword from "../Buyer/updatePassword/index.js";

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

class LoginPage extends Component {
  constructor(props) {
    super(props);
    this.USE_LOCALPASS_FLAG = "USE_LOCALPASS_FLAG";
    const lastLoginIsRemember = localStorage.getItem("lastLoginIsRemember");
    const lastLoginName = localStorage.getItem("lastLoginName");
    let lastLoginPassword = "";
    if (lastLoginIsRemember === "true" && lastLoginName) {
      lastLoginPassword = this.USE_LOCALPASS_FLAG;
    }
    this.state = {
      type: 'account',
      submitting: false,
      visible: false,
      lastLoginName: lastLoginName || "",
      lastLoginPassword: lastLoginPassword,
      autoLogin: lastLoginIsRemember === "true" ? true : false
    };
  }
  componentWillMount() {
    const { dispatch  } = this.props;
    dispatch({
      type: "login/loginResult",
      payload: null
    });
  }
  onTabChange = type => {
    this.setState({ type });
  };
  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  }
  handleSubmit = (err, values) => {
    if (!err) {
      this.setState({
        submitting: true
      });
      const { dispatch } = this.props;
      dispatch({
        type: 'login/login',
        payload: {
          USE_LOCALPASS_FLAG: this.USE_LOCALPASS_FLAG, // 使用本地缓存密码时，密码input框中默认字符串
          autoLogin: this.state.autoLogin,
          password: values.password,
          username: values.username
        },
      }).finally(() => {
        const { dispatch, loginResult } = this.props;
        const { autoLogin } = this.state;
        Cookies.set('_A_P_userLoginName',values.username);
        if (loginResult && loginResult.status) {
          if (loginResult.status === "1") {
            dispatch(routerRedux.push("./"));
          } else {
            const message = loginResult.message ? JSON.parse(loginResult.message) : {};
            if (message.status == "50012" || message.status == "50006" || message.status == "50007" || message.status == "50009" || message.status == "50010" || message.status == "50011") {
              this.setState({
                visible: true
              });
            } else {
              const msg = message.msg || "请输入正确的用户名、密码";
              this.renderMessage(msg);
            }
            dispatch({
              type: "login/loginResult",
              payload: null
            });
          }
        }
        this.setState({
          submitting: false
        });
      });
    }
  };

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };

  renderMessage = content => {
    notification.error({
      message: '提示',
      description: content,
    });
  };

  render() {
    const { submitting } = this.state;
    const styleLogoImg = {
      backgroundImage: `url(${logoImg})`,
      backgroundRepeat: "no-repeat"
    };
    const styleloginBg = {
      backgroundImage: `url(${loginBg})`,
      backgroundRepeat: "no-repeat"
    };
    const { type } = this.state;
    return (
      <div className={styles.main}>
        <div className={styles.loginTopBg}>
          <div className={styles.loginTopCon}>
            <a href="#" className={styles.logoImg} style={styleLogoImg}></a>
            <div className={styles.logoTxt}>用友渠道云采购门户</div>
          </div>
        </div>
        <div className={styles.loginConBox}>
          <div className={styles.loginBg} style={styleloginBg}>
            <div className={styles.loginCon} style={{ top: "50px" }}>
              <h2 className={styles.loginConTitle}>欢迎登录</h2>
              <div className={styles.loginItemBox}>
                <Login onSubmit={this.handleSubmit.bind(this)}>
                  <UserName name="username" defaultValue={this.state.lastLoginName} placeholder="用户名" />
                  <Password name="password" defaultValue={this.state.lastLoginPassword} placeholder="登录密码" />
                  <Submit loading={submitting}>登录</Submit>
                  <div>
                    <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
                      自动登录
                    </Checkbox>
                    <a href="/wbalone/pages/forgetpassword/index.html" style={{ float: 'right' }} target="_blank">忘记密码</a>
                  </div>
                </Login>
              </div>
            </div>
          </div>
        </div>
        <Modal
          title="修改密码"
          visible={this.state.visible}
          width={700}
          footer={null}
          onCancel={this.handleCancel.bind(this)}
        >
          <UpdatePassword
            hideModel={this.handleCancel.bind(this)}
            width={600}
          />
        </Modal>
      </div>
    );
  }
}

export default connect(state => ({
  loginResult: state.login.loginResult
}))(LoginPage);
