import { Button, Checkbox, Form, Input } from 'antd';
import { useEffect } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import Cookies from 'js-cookie';
import './index.scss';
import { InterDataType, InterReqType } from '~/api/interface';
import { BackEndLoginType } from '~/api/interface/commonType';
import { CommonAPI } from '~/api';

// 请求的类型
type ReqType = InterReqType<BackEndLoginType>;
// 返回的类型
type ResType = InterDataType<BackEndLoginType>;

function LoginView() {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
  // @ts-ignore
  const navigate = useNavigate();
  const [form] = Form.useForm<ReqType>();
  // 提交数据
  const onFinish = async (values: ReqType) => {
    const res = await CommonAPI.BackEndLogin({
      accountNo: values?.accountNo,
      passWord: values?.passWord,
    });
    if (res && res.code === '200') {
      console.log('提交数据 --->', res);
    }
    // props
    //   .login(values)
    //   .then(async (res: any) => {
    //     if (res.code === '200') {
    //       getUserRole();
    //     }
    //   })
    //   .catch((err: any) => {
    //     message.error('登录失败，请检查账号信息');
    //   });
  };
  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
  // @ts-ignore
  const onFinishFailed = (errorInfo: any) => {
    // console.log("Failed:", errorInfo);
  };
  useEffect(() => {
    const remember = Cookies.get('remember');
    // console.log("remember--->", remember);
    if (remember === 'true') {
      form.setFieldsValue({
        accountNo: Cookies.get('username'),
        passWord: Cookies.get('password'),
      });
    } else {
      // console.log("执行了-->");
      form.setFieldsValue({
        remember: false,
      });
    }
  }, []);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
  // @ts-ignore
  const getUserRole = async () => {
    // const res: any = await RoleAPI.getListCuserMenuInfo();
    // if (res.result && res.result.length != 0) {
    //   localStorage.setItem('routeList', JSON.stringify(res.result || []));
    //   // console.log("存在的路由--->", getFirstRoute(res.result, route));
    //   history.push(getFirstRoute(res.result, route)[0].path);
    // } else {
    //   message.warning('请先配置权限');
    // }
  };
  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
  // @ts-ignore
  const getFirstRoute = (routeList: any[], list: any) => {
    // return list.reduce((pre: any, cur: any) => {
    //   const bol: boolean = routeList.some((i) => i.id === cur.id);
    //   if (bol && cur.children) {
    //     pre.push(...getFirstRoute(routeList, cur.children));
    //   }
    //   if (bol && !cur.children) {
    //     pre.push(cur);
    //   }
    //   return pre;
    // }, []);
  };
  return (
    <div className='login-warp'>
      <div className='login-view'>
        <div className='login-flex login-content'>
          <div className='login-title'>欢迎来到</div>
          <div className='login-text'>科比特 · 云享飞管理平台</div>
          <div className='login-detail'>让天空为世界所用</div>
        </div>
        <div className='login-flex login-form'>
          <div className='login-image' />
          <div className='login-input'>
            <Form
              name='basic'
              form={form}
              wrapperCol={{ span: 16, offset: 4 }}
              initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete='off'
            >
              <Form.Item name='accountNo' rules={[{ required: true, message: '请输入用户名' }]}>
                <Input size='large' prefix={<UserOutlined />} placeholder='请输入账号' allowClear />
              </Form.Item>

              <Form.Item
                name='passWord'
                className='login-password'
                rules={[{ required: true, message: '请输入密码' }]}
              >
                <Input.Password
                  size='large'
                  prefix={<LockOutlined />}
                  placeholder='请输入密码'
                  allowClear
                />
              </Form.Item>

              <Form.Item
                name='remember'
                className='login-remember'
                valuePropName='checked'
                wrapperCol={{ offset: 4, span: 8 }}
              >
                <Checkbox>记住密码</Checkbox>
              </Form.Item>

              <Form.Item wrapperCol={{ offset: 7, span: 15 }}>
                <Button
                  type='primary'
                  htmlType='submit'
                  shape='round'
                  size='large'
                  className='login-submit'
                >
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
}

export default LoginView;
