import React, { useEffect } from 'react'
import './style.less'
import { useDispatch } from 'react-redux'
import { useData } from '@ttk/app-loader'
import TTKLayout from './components/Layout'
import Header from './components/Header'
import Aside from './components/Menu'
import Tabbar from './components/TabBar'

import { useCommit } from '@ttk/app-loader'
import {fetch} from '@ttk/utils'
import { functionNav } from '@/apps/portal/app-root/action'

const { getAccessToken } = fetch


export default React.memo(Page)
function Page(props) {
  const dispatch = useDispatch()
  const depId = useData('app-root/loginInfo/depId')
  const routes = useData('app-root/functionNav')
  const { history, location } = props
  const commit = useCommit()
//   if (sessionStorage['userInfo']) {
//     commit('app-root/loginInfo', JSON.parse(sessionStorage['userInfo']))
//   }

  useEffect(() => {
    async function init() {
      const token = getAccessToken()
      if (token === undefined || token === '') {
        history.push(`${location.root}/app-login`)
      } else {
        if (routes.count() <= 0){
          await dispatch(functionNav(null, null, { depId }))
        }
        // 跳转到默认首页
        if (history.location.pathname === '/app-root/layout')
          history.push('layout/home')
      }
    }
    init()
  }, [location])

  const newProps = { appName: props.appName, appDataId: props.appDataId }
  return <TTKLayout {...props} 
    layout={props.meta.layout} 
    withTabbar={props.meta.withTabbar} 
    menuWidth={300} 
    minMenuWidth={100} 
    maxMenuWidth={1000}
    header={<Header {...newProps} />}
    tabbar={<Tabbar {...newProps} />} 
    aside={<Aside {...props} />} 
  >
    {props.children}
  </TTKLayout>
}
