import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import apiObj from '@api/index';
import './index.less'
import loginIcon from '@images/logo1.png'

const {post,api,interceptors} = apiObj;
function Login({history}) {
    const user = localStorage.getItem('token');
    if(user){
        history.push('/manage');
    }
    function onLogin(data){
        post(api.login,data).then((res)=>{
            if(res.data.code===200){
                const data = res.data.data;
                localStorage.setItem('token',data.token);
                message.success('登录成功',1);
                interceptors();
                history.push('/choose')
            }else{
                message.error(res.data.msg||'数据有误')
            }
        })
    }
    return (
        <div className="login-container clearfix">
            <div className="bg-box">
                <h1>AI病案质控平台</h1>
                {/*<img src={loginBg} alt="背景图片"/>*/}
            </div>
            <div className="content-box">
                <div className="logo">
                    <img src={loginIcon} alt="logo"/>
                    <p className='welcome'>欢迎使用！</p>
                </div>
                <Form className='form-box' layout='vertical' onFinish={onLogin}>
                    <Form.Item
                        label='用户名'
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" autoComplete='off'/>
                    </Form.Item>
                    <Form.Item
                        label='密码'
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入密码"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Login;