import { useRoutes, Navigate } from 'react-router-dom'
import { lazy, Suspense } from 'react'
const Login = lazy(() => import('./views/login/Index'))
const Layout = lazy(() => import('./views/layout/Index'))
const UserList = lazy(() => import('./views/user/Index'))
const MovieList = lazy(() => import('./views/movie/Index'))
const MovieAdd = lazy(() => import('./views/movie/add'))

// 异步加载lazy需要组合Suspense包裹使用
function elem(dom: any) {
  return (
    <Suspense>{dom}</Suspense>
  )
}
export default () => {
  const routes = useRoutes([
    {
      path: '/login',
      element: <Login />
    },
    {
      path: '/',
      element: <Layout />,
      children: [
        {
          path: '/',
          element: <Navigate to="/userlist" />,
          errorElement: (<div>出错了！</div>)
        },
        {
          path: 'userlist',
          element: elem(<UserList />),
          errorElement: (<div>出错了！</div>)
        },
        {
          path: 'movielist',
          element: elem(<MovieList />)
        },
        {
          path: 'movieAdd',
          element: elem(<MovieAdd />)
        }
      ]
    },
    {
      path: '*',
      element: (<div style={{display: 'flex', justifyContent:'center', alignItems: 'center'}}><span style={{color: '#666', fontSize: 200}}>404</span></div>)
    }
  ])
  return (routes)
}