import { Form, Input, Button, Checkbox, message, Col, Row } from 'antd';
import { useNavigate } from 'react-router-dom';
import { passwordLogin } from '../../api';
import '../../index.less';
import loginStore from '../../store/login.store';

function Login (e) {
  let navigate = useNavigate();
  const [form] = Form.useForm();
  let onFinish = async (values) => {
    // let setToken = loginStore.setToken;
    // try {
    //     await setToken({username: values.username, password: values.password})
    //     navigate('/', {replace: true});
    //     message.success('登录成功')
    // } catch {
    //     message.error('登录失败')
    // }
    passwordLogin({username: values.username, password: values.password}).then((e) => {
        if (!e.success) {
            message.error(e.message);
          } else {
            navigate('/home');
            // cookie.save('username', 'wyd');
          }
    })
  };

  let onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  
  return (
    <Form 
    form={form}
    name="basic"
    labelCol={{
        span: 16,
        offset: 4,
    }}
    wrapperCol={{
        span: 16,
        offset: 4,
    }}
    layout='vertical'
    initialValues={{
        remember: true,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
    >
    <Form.Item
        label="账户"
        name="username"
        className='formItemStyle'
        rules={[
        {
            required: true,
            message: '账户名称不能为空!',
        },
        ]}
        style={{marginBottom: '45px'}}
    >
        <Input placeholder='请输入账户'/>
    </Form.Item>

    <Form.Item
        label="密码"
        name="password"
        className='formItemStyle'
        rules={[
        {
            required: true,
            message: '密码不能为空!',
        },
        ]}
    >
        <Input.Password placeholder='请输入密码' bordered={false}/>
    </Form.Item>

    {/* <Form.Item
        name="remember"
        valuePropName="checked"
        style={{marginTop: '38px'}}
    >
      <Checkbox style={{fontSize: '18px'}}>同意<a>服务条款</a></Checkbox>
      <a style={{float: 'right', fontSize: '18px'}}>忘记密码？</a>
    </Form.Item> */}

    <Form.Item style={{marginTop: '68px'}}>
        <Button type="primary" htmlType="submit" style={{height: '72px'}} block>密码登录</Button>
        <a className='new-user' href='/register'>新用户注册</a>
    </Form.Item>
    </Form>
  );
}


export default Login;