import {ProLayout} from '@ant-design/pro-components'
import React, {useEffect} from 'react'
import {Outlet, useLocation, useNavigate} from 'react-router'
import {menus} from '../route.tsx'

const App: React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()
  return (
    <ProLayout
      token={{
        header: {
          colorBgHeader: '#292f33',
          colorHeaderTitle: '#ffffff',
          colorTextMenu: '#dfdfdf',
          colorTextMenuSecondary: '#dfdfdf',
          colorTextMenuSelected: '#ffffff',
          colorTextMenuActive: '#ffffff',
          colorBgMenuItemSelected: '#22272b',
          colorTextRightActionsItem: '#dfdfdf',
        },
      }}
      logo={<img src="icon.png" alt="logo"/>}
      title="Hudi 服务总台"
      route={menus}
      location={{pathname: location.pathname}}
      menu={{type: 'sub'}}
      menuItemRender={(item, dom) => {
        return <div onClick={() => navigate(item.path || '/')}>{dom}</div>
      }}
      fixSiderbar={true}
      layout="mix"
      splitMenus={true}
      style={{minHeight: '100vh'}}
      contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
    >
      <Outlet/>
    </ProLayout>
  )
}

export default App
