import React, { useState } from 'react';
import { Form, Input, Button, message, Divider } from 'antd';
import { UserOutlined, LockOutlined, LoadingOutlined } from '@ant-design/icons';
import styles from './index.less';
import Footer from '@/components/Footer';
import UserAPI from '@/api/User';
import { history, useModel } from '@umijs/max';
import md5 from 'js-md5';

const Login: React.FC = () => {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const { refresh } = useModel('@@initialState');

  /**
   * 用户登录
   * @param params
   */
  const onUserLogin = async (params: UserTypes.LoginParams) => {
    // if (isLoading) return;
    setIsLoading(true);
    const md5_str = md5(params.pwd);
    params.pwd = md5_str;
     UserAPI.Login(params).then((response: MyResponse.Content)=>{
      setIsLoading(false);
      if (response.statusCode===200) {
        refresh();
        history.push('/');
        message.success('登录成功！');
      } else {
        setIsLoading(false);
        message.error(response.errors || '登录失败！');
      }
     }).catch(()=>{
      setIsLoading(false);
     })
  };

  return (
    <div className={styles.container}>
      
      <div className={styles.content}>
        <div className={styles.login_box}>
        <div className={styles.login_header}>
          {/* <div className={styles.login_logo}>
						<img src={LogoImg}></img>
					</div> */}
          <div className={styles.login_logo_name}></div>
        </div>
       
        <div className={styles.login_input}>
        <div className={styles.login_logo_name}>胖子天骄中控管理系统</div>
        <Divider/>
                <Form name="basic" onFinish={onUserLogin} >
                 
                  <Form.Item name="account" style={{width:'90%'}} rules={[{ required: true, message: '请输入用户名！' }]}>
                    <Input
                   bordered={false}
                      size="large"
                      prefix={<UserOutlined color='white' />}
                      placeholder="请输入用户名！"
                      className={styles.from_Input}
                      allowClear
                    />
                  </Form.Item>
                  <Divider/>
                  <Form.Item name="pwd" style={{width:'90%'}}  rules={[{ required: true, message: '请输入密码！' }]}>
                    <Input.Password
                    bordered={false}
                      size="large"
                      prefix={<LockOutlined color='white' />}
                      placeholder="请输入密码！"
                      className={styles.from_Input}
                      allowClear
                    />
          
                  </Form.Item>
                  <Divider/>
                  <Form.Item style={{height:'80px',width:'90%'}}>
                    <Button
                      type="primary"
                      htmlType="submit"
                      style={{ width: '90%' }}
                      icon={isLoading ? <LoadingOutlined /> : null}
                    >
                      登录
                    </Button>
                  </Form.Item>
                </Form>
        </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default Login;
