import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Alert, message } from 'antd';
import React, { useState,useEffect} from 'react';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { Link, history, useModel } from 'umi';
import Footer from '@/components/Footer';
import { login } from './service';
import { getMenus } from '@/services/user';



import styles from './index.less';

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login: React.FC = () => {
  const [submitting, setSubmitting] = useState(false);
  const { setInitialState } = useModel('@@initialState');


  const setUserInfo = async (data: API.CurrentUserData) => {
   
      localStorage.setItem('userData',JSON.stringify(data));
      const menuData = await getMenus();
      await setInitialState((s) => ({
        ...s,
        currentUser: data,
        menu:menuData,
      }));
    
  };

  const handleSubmit = async (values: API.LoginParams) => {
    setSubmitting(true);
    try {
      // 登录
      // 医院标识
      let hospSign: any='';
      hospSign = history.location.query?.hospSign;
      const loginResult = await login({ ...values,hospSign});

      if (loginResult) {
        localStorage.setItem('hospSign',hospSign); // 保存医院标识
        message.success('登录成功！');
        await setUserInfo({...loginResult});
        /** 此方法会跳转到 redirect 参数所在的位置 */
        if (!history) {
            console.log('history为false',history);
            location.href = '/'
        };
        const { query } = history.location;
        const { redirect } = query as { redirect: string };
        history.push(redirect || '/');
        return;
      }
      // // 如果失败去设置用户错误信息
      // setUserLoginState({status,msg,data});

    } catch (error) {
         console.log({error});
    }
    setSubmitting(false);
  };

 


  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.top}>
          <div className={styles.header}>
            <Link to="/">
              <img alt="logo" className={styles.logo} src="/logo.png" />
              <span className={styles.title}>医院智慧查检系统</span>
            </Link>
          </div>
         
        </div>
        
        <div className={styles.main}>
          <ProForm
            submitter={{
              searchConfig: {
                submitText: '登录',
              },
              render: (_, dom) => dom.pop(),
              submitButtonProps: {
                loading: submitting,
                size: 'large',
                style: {
                  width: '100%',
                },
              },
            }}
            onFinish={async (values) => {
              await handleSubmit(values as API.LoginParams);
            }}
          >
    
            {status === 'error' && (
              <LoginMessage
                content='账户或密码错误'
              />
            )}
              <>
                <ProFormText
                  name="account"
                  fieldProps={{
                    size: 'large',
                    prefix: <UserOutlined className={styles.prefixIcon} />,
                  }}
                  placeholder='用户名:'
                  rules={[
                    {
                      required: true,
                      message:'请输入用户名!',
                    },
                  ]}
                />
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={styles.prefixIcon} />,
                  }}
                  placeholder='密码:'
                  rules={[
                    {
                      required: true,
                      message:'请输入密码！',
                    },
                  ]}
                />
              </>        
          </ProForm>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default Login;
