import '@/assets/styles/base.css'
// 关于路由
import React, { useCallback, useEffect } from 'react'
import { createHashRouter, RouterProvider } from 'react-router-dom'
import { isMobileFu } from './utils/history'
import SpinLoding from './components/SpinLoding'
import AsyncSpinLoding from './components/AsyncSpinLoding'

import MessageCom from './components/Message'

import screenImg from '@/assets/img/landtip.png'
import NotFound from './components/NotFound'

const A1home = React.lazy(() => import('./pages/A1home'))
const A2show = React.lazy(() => import('./pages/A2show'))
const A3wear = React.lazy(() => import('./pages/A3wear'))
const A0model = React.lazy(() => import('./pages/A0model'))

export default function App() {
  // 从仓库中获取查看图片的信息
  // const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)

  const rootDomFu = useCallback(() => {
    const rootDom: HTMLDivElement = document.querySelector('#root')!
    if (rootDom) {
      rootDom.style.height = window.innerHeight + 'px'
    }
  }, [])

  useEffect(() => {
    window.addEventListener('resize', rootDomFu, true)
    rootDomFu()
  }, [rootDomFu])

  const router = createHashRouter([
    {
      path: '/show',
      element: <A2show />
    },
    {
      path: '/wear',
      element: <A3wear />
    },
    {
      path: '/model',
      element: <A0model />
    },
    {
      index: true,
      element: <A1home />
    },
    {
      path: '*',
      element: <NotFound /> // 或者你的 NotFound 组件
    }
  ])

  return (
    <>
      {/* 关于路由 */}

      <React.Suspense fallback={<SpinLoding />}>
        <RouterProvider
          router={router}
          fallbackElement={<SpinLoding />} // 路由自身懒加载时的回退UI
        />
      </React.Suspense>

      {/* 发送请求的加载组件 */}
      <AsyncSpinLoding />

      {/* antd 轻提示 ---兼容360浏览器 */}
      <MessageCom />

      {/* 横屏提示 */}
      {isMobileFu() ? (
        <div id='ScreenChange'>
          <img src={screenImg} alt='' />
          <p>请在竖屏模式浏览</p>
        </div>
      ) : null}
    </>
  )
}