import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { CopyrightOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Checkbox, Alert, Select } from 'antd';
import Login from '@/components/Login';
import { clearToken } from '@/utils/utils';
import Link from 'umi/link';
import GlobalFooter from '@/components/GlobalFooter';
import DocumentTitle from 'react-document-title';
import logo from '@/assets/logo.png';
import { queryDepV2 } from '@/services/api';
import styles from './Login.less';
const { Option } = Select;

const { Tab, UserName, Password, Submit } = Login;
const links = [
  {
    key: 'help',
    title: formatMessage({ id: 'layout.user.link.help' }),
    href: '',
  },
  {
    key: 'privacy',
    title: formatMessage({ id: 'layout.user.link.privacy' }),
    href: '',
  },
  {
    key: 'terms',
    title: formatMessage({ id: 'layout.user.link.terms' }),
    href: '',
  },
];

const copyright = (
  <Fragment>
    Copyright <CopyrightOutlined /> 金科环境股份有限公司
  </Fragment>
);

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['purchaseLogin/login'],
}))
@Form.create()
class LoginPage extends Component {
  state = {
    type: 'account',
    loginType: localStorage.type,
    autoLogin: true,
    depList: [],
    userName: '',
    depId: undefined,
  };

  componentDidMount = () => {
    clearToken();
  };

  onTabChange = type => {
    this.setState({ type });
  };
  onHandleBLur = async name => {
    const { dispatch } = this.props;
    const { userName } = this.state;
    if (!name || name == userName) return;
    var res = await queryDepV2({
      userName: name,
    });
    if (res) {
      this.setState({
        userName: name,
        depList: res.data,
        depId: undefined,
      });
    }
  };
  handleSubmit = (err, values) => {
    const { type, depId } = this.state;
    const {
      login,
      submitting,
      location: {
        query: { referrer },
      },
    } = this.props;
    if (!depId) {
      message.error('请选择部门');
      return;
    }
    if (!err) {
      const { dispatch } = this.props;
      dispatch({
        type: 'purchaseLogin/login',
        payload: {
          ...values,
          type,
          DepId: depId + '',
          referrer: referrer && decodeURIComponent(decodeURIComponent(referrer)),
        },
      });
    }
  };

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };
  changeDep = value => {
    this.setState({
      depId: value,
    });
  };
  renderMessage = content => (
    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
  );

  render() {
    const {
      login,
      submitting,
      location: {
        query: { referrer },
      },
    } = this.props;
    const { type, autoLogin, depList, depId, loginType } = this.state;
    console.log(referrer);
    return (
      <DocumentTitle title={`登录-人日`}>
        <div className={styles.container}>
          <div className={styles.content}>
            <div className={styles.main}>
              <Login
                defaultActiveKey={type}
                onTabChange={this.onTabChange}
                onSubmit={this.handleSubmit}
                ref={form => {
                  this.loginForm = form;
                }}
              >
                {login.status === 'error' &&
                  login.type === 'account' &&
                  !submitting &&
                  this.renderMessage(
                    formatMessage({ id: 'app.login.message-invalid-credentials' })
                  )}
                <div className={styles.inp_box}>
                  <UserName
                    name="UserName"
                    className={styles.inp}
                    placeholder="请输入用户名"
                    rules={[
                      {
                        required: true,
                        message: formatMessage({ id: 'validation.userName.required' }),
                      },
                    ]}
                    onBlur={e => {
                      this.onHandleBLur(e.target.value);
                    }}
                  />
                  <Select
                    value={depId}
                    onChange={this.changeDep}
                    style={{ marginBottom: 20 }}
                    placeholder="请选择部门"
                  >
                    {depList.map(item => (
                      <Option value={item.ID} key={item.ID}>
                        {item.Name}
                      </Option>
                    ))}
                  </Select>
                  <Password
                    name="Password"
                    className={styles.inp}
                    placeholder="请输入密码"
                    rules={[
                      {
                        required: true,
                        message: formatMessage({ id: 'validation.password.required' }),
                      },
                    ]}
                    onPressEnter={e => {
                      e.preventDefault();
                      this.loginForm.validateFields(this.handleSubmit);
                    }}
                  />
                  {/* <div>
                    <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
                      <FormattedMessage id="app.login.remember-me" />
                    </Checkbox>
                    <a style={{ float: 'right' }} href="">
                      <FormattedMessage id="app.login.forgot-password" />
                    </a>
                  </div> */}
                  <Submit loading={submitting}>
                    <FormattedMessage id="app.login.login" />
                  </Submit>
                </div>
              </Login>
            </div>
          </div>
          <GlobalFooter links={links} copyright={copyright} />
        </div>
      </DocumentTitle>
    );
  }
}

export default LoginPage;