import React, { useState,useEffect  } from 'react';
import { useIntl, useModel } from 'umi';
import { useHistory } from 'react-router-dom';
import styles from './Welcome.less';
import { logout as outLogin } from '@/services/mgr/api';
const Welcome: React.FC = () => {
  const intl = useIntl();
  const { initialState, setInitialState } = useModel('@@initialState');
  const [kanbanList, setkanbanList] = useState([]);
  
  useEffect(() => {
    if (initialState?.menuList) {
      console.log('sada', initialState?.menuList)
      const menuList = initialState?.menuList
      const item = menuList.find(v => v.name === 'kanban')
      if (item?.children) {
        setkanbanList(item?.children)
        
      }
      
    }
}, []);
  const history = useHistory();
  // 跳转函数
  const goToPlaylist = (link: string) => {
    history.push(link);
  };
  /**
   * 退出登录，并且将当前的 url 保存
   */
  const loginOut = async () => {
    setInitialState((s) => ({ ...s, currentUser: undefined }));
    await outLogin();
    history.replace({ pathname: '/user/login' });
  };
  return (
    <div className={styles.container}>
      <div className={styles.logout} onClick={() => loginOut()}>
        {intl.formatMessage({id:'退出登录'})}
      </div>
      <div className={styles.header}>
        <div className={styles.centerheader}>
          {intl.formatMessage({id:'希迈看板平台'})}
        </div>
      </div>
      <div className={styles.content}>
          {kanbanList.map((route) => (
            <div key={route.name} className={styles.routeItem} onClick={() => goToPlaylist(route.path)}>
              <div className={styles.routeName}>{intl.formatMessage({id: 'menu.kanban.' + route.name})}</div>
              <div className={styles.imgWapper}>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
};

export default Welcome;
