import React, { useState, useEffect } from 'react';
import { Button, Form, Input } from 'antd';
import { history, useModel } from 'umi';
import { login } from '@/services/sagacare_service/equipment';
import { getUsersInfo } from '@/services/sagacare_service/environment';
import './index.less';
import UserStorage from '@/config/sagacare/sagacare_user';

const Login: React.FC = () => {
  const { refresh } = useModel('@@initialState');

  const onFinish = (values: any) => {
    console.log('Success:', values);
    onSubmit(values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const onSubmit = (values: any) => {
    let params: any = values;
    login(params)
      .then((loginres) => {
        let resData: any = loginres || {};
        if (resData.result === 'success') {
          localStorage.setItem('token', resData.token);
          history.push('/equipment');
          refresh(); //这个方法会调用 getInitialState方法，getInitialState方法获取用户信息
          // getUsersInfo()
          //   .then((userres) => {
          //     if (userres.result === 'success') {
          //       var roles = userres.roles || [];
          //       if (
          //         roles.find((item: any) => {
          //           return item.name == '上格云行政端';
          //         })
          //       ) {
          //         let currentUser = {};
          //         currentUser = {
          //           name: userres.username,
          //           phone: '',
          //           id: userres.userId,
          //         };
          //         var userObj = UserStorage.getInstance();
          //         userObj.setUser(currentUser);
          //         //只有当用户名 密码正确，并且有权限时才跳转
          //         history.push('/equipment');
          //       } else {
          //         localStorage.removeItem('token');
          //       }
          //     } else {
          //       localStorage.removeItem('token');
          //     }
          //   })
          //   .catch(() => {
          //     localStorage.removeItem('token');
          //   });
        } else {
          localStorage.removeItem('token');
        }
      })
      .catch(() => {});
  };
  return (
    <div className="homeContent">
      <div className="home-left">
        <div className="box">
          <img alt="" src={require('@/assets/images/sagalogo.svg')} />
          <div className="logo-text">SagaCare</div>
        </div>
      </div>
      <div className="home-right">
        <div className="box">
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 64,
            }}
            style={{
              maxWidth: 600,
            }}
            initialValues={{
              remember: true,
              username: '',
              password: '',
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: 'Please input your password!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit" className="loginButton">
                提交
              </Button>
            </Form.Item>
          </Form>

          {/* <van-form @submit="onSubmit" class="box-form">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="username"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div>
          <van-button round block native-type="submit"> 提交 </van-button>
        </div>
      </van-form> */}
        </div>
      </div>
    </div>
  );
};
export default Login;
