import '@/assets/styles/base.css'
// 关于路由
import { useCallback, useEffect, useRef } from 'react'
import MessageCom from './components/Message'
import RouterOrder from './components/RouterOrder'
import screenImg from '@/assets/img/landtip.png'
import AsyncSpinLoding from './components/AsyncSpinLoding'
import { isMobileFu } from './utils/history'

export default function AppM() {
  const setFullFu = useCallback(() => {
    clearTimeout(time.current)
    time.current = window.setTimeout(() => {
      const dom: HTMLDivElement | null = document.querySelector('#root')
      if (dom) {
        dom.style.height = document.documentElement.clientHeight + 'px'
      }
    }, 100)
  }, [])

  const time = useRef(-1)

  useEffect(() => {
    const dom: HTMLDivElement | null = document.querySelector('#root')
    if (dom) {
      dom.style.width = '100vw'
      dom.style.minHeight = 'auto'
      dom.style.height = document.documentElement.clientHeight + 'px'
      dom.style.minWidth = 'auto'
    }
    window.addEventListener('resize', setFullFu, true)

    return () => {
      window.removeEventListener('resize', setFullFu)
    }
  }, [setFullFu])

  return (
    <div id='AppM'>
      {/* 关于路由 */}
      <RouterOrder />

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

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

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