import React from 'react';
import { connect } from 'dva';
import { Button, Checkbox, Col, Form, Icon, Input, message, Row } from 'antd';
import { routerRedux } from 'dva/router';
import { config } from '../../../utils';
import styles from './index.less';

const { footerText } = config;
const FormItem = Form.Item;

let rememberMe = false;
const storedUserInfo = JSON.parse(localStorage.getItem('login_user'));

if (storedUserInfo) {
  rememberMe = storedUserInfo.rememberMe;
} else {
  rememberMe = false;
}

const Login = ({
                 login,
                 dispatch,
                 form: {
                   getFieldDecorator,
                   validateFieldsAndScroll,
                   getFieldsValue,
                 },
               }) => {
  const { loginLoading, captcha } = login;

  const handleOk = (e) => {
    e.preventDefault();
    const values = getFieldsValue();

    if (values.ent_code === undefined || values.ent_code === '') {
      message.error('企业号必填');
      return 0;
    }
    if (values.login_no === undefined || values.login_no === '') {
      message.error('用户名必填');
      return 0;
    }
    if (values.password === undefined || values.password === '') {
      message.error('密码必填');
      return 0;
    }
    if (values.captcha === undefined || values.captcha === '') {
      message.error('验证码必填');
      return 0;
    }

    dispatch({ type: 'login/login', payload: { ...values, rememberMe } });
  };

  const refreshCaptch = () => {
    dispatch({ type: 'login/getCaptcha' });
  };

  const handleForget = () => {
    dispatch(routerRedux.push('./forgetPW'));
  };

  const handleRegister = () => {
    dispatch(routerRedux.push('./register'));
  };

  const formItemLayout = {
    // labelCol: {
    //   xs: { span: 24 },
    //   sm: { span: 6 },
    // },
    // wrapperCol: {
    //   xs: { span: 24 },
    //   sm: { span: 18 },
    // },
    colon: false,
  };

  const itemStyle = {
    width: '100%',
    height: 45,
    marginBottom: 6,
  };

  const iconStyle = { color: 'rgba(0,0,0,.25)', fontSize: 28 };

  return (
    <div className={styles.page}>
      <div className={styles.panel}>
        <div className={styles.logo}>
          <img alt={'logo'} src={config.loginLogo}/>
          {/*<p>{config.name}</p>*/}
          {/*<p>{config.name}</p>*/}
        </div>
        <Form className={styles.form} onSubmit={handleOk}>
          <FormItem {...formItemLayout}>
            {getFieldDecorator('ent_code', {
              initialValue: storedUserInfo ? storedUserInfo.ent_code : undefined,
              rules: [],
            })(<Input prefix={<Icon type="home" style={iconStyle}/>} style={itemStyle}
                      placeholder={'企业号'}/>)}
          </FormItem>
          <FormItem {...formItemLayout}>
            {getFieldDecorator('login_no', {
              initialValue: storedUserInfo ? storedUserInfo.login_no : undefined,
              rules: [],
            })(<Input prefix={<Icon type="user" style={iconStyle}/>} style={itemStyle}
                      placeholder={'用户名'}/>)}
          </FormItem>
          <FormItem {...formItemLayout}>
            {getFieldDecorator('password', {
              rules: [],
            })(<Input prefix={<Icon type="lock" style={iconStyle}/>} style={itemStyle}
                      type="password" placeholder={'密码'}/>)}
          </FormItem>
          <FormItem>
            <Row gutter={12}>
              <Col span={12}>
                {getFieldDecorator('captcha', {
                  rules: [],
                })(<Input prefix={<Icon type="safety" style={iconStyle}/>} style={itemStyle} placeholder={'验证码'}/>)}
              </Col>
              <Col span={12} onClick={refreshCaptch}>
                <img src={captcha} alt="captcha" className={styles.captcha}/>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button loading={loginLoading} type="primary" size="large" style={itemStyle} htmlType="submit">
              登录
            </Button>
          </FormItem>
          <Row type="flex" justify="space-around" className={styles.forgetPW}>
            <Col span={8}>
              <Checkbox
                defaultChecked={rememberMe}
                onChange={(e) => {
                  // console.log('e', e.target.checked);
                  rememberMe = e.target.checked;
                }}>记住我</Checkbox>
            </Col>
            {/*<Col span={8}>*/}
            {/*<a onClick={handleForget}>*/}
            {/*忘记密码*/}
            {/*</a>*/}
            {/*</Col>*/}
            <Col span={8}>
              <a onClick={handleRegister}>
                供应商注册
              </a>
            </Col>
          </Row>
        </Form>
      </div>
      <div className={styles.footer}>
        {footerText}
      </div>
    </div>
  );
};

export default connect(({ login }) => ({ login }))(Form.create()(Login));
