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) => {
    passwordLogin({phone: values.phone, password: values.password}).then((e) => {
        if (!e.success) {
            message.error(e.message);
          } else {
            let setToken = loginStore;
            setToken.setAuthName(e.data.username);
            setToken.setToken(e.data.token)
            navigate('/home');
          }
    })
  };

  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="phone"
        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: '60px'}} block>密码登录</Button>
        <a className='new-user' href='/register'>新用户注册</a>
    </Form.Item>
    </Form>
  );
}


export default Login;