/**
 * Author: llw
 * Date: 2020-7-16
 * Description: [登录页面]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { IconFontConfig } from '@/common';
import { Form, Button, Input } from 'antd';
import loginless from './index.less';
import {aesEncrypt} from '@/utils/encrypt';

const Loginform = props => {
  const { loading, dispatch } = props;
  

  const handleSubmit = values => {
    const loginData = {
      username: values.username,
      password: aesEncrypt(values.password)
    };
    dispatch({
      type: 'login/login',
      payload: loginData,
    });
  };
  
  return (
    <div className={loginless.main}>
      <Form onFinish={handleSubmit}>
        <Form.Item 
          name="username" 
          rules={[{ required: true, message: '请输入您的用户名' }]}
        >
          <Input 
            size="large" 
            placeholder="请输入您的用户名" 
            prefix={<IconFontConfig type="icon-user" />}
          />
        </Form.Item>
        <Form.Item 
          name="password" 
          rules={[{ required: true, message: '请输入您的密码' }]}
        >
          <Input.Password 
            size="large" 
            visibilityToggle={false} 
            placeholder="请输入您的密码" 
            prefix={<IconFontConfig type="icon-password" />}
          />
        </Form.Item>
        <Button
          block
          size="large"
          type="primary"
          htmlType="submit"
          loading={loading}
          className={loginless.loginbtn}
        >
          登录
        </Button>
      </Form>
    </div>
  );
};

export default connect(({ login, loading }) => ({
  login,
  loading: loading.effects['login/login'],
}))(Loginform);