import '@/assets/styles/base.css'
// 关于路由
import React, { useCallback, useEffect, useRef } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import history, { isMobiileFu } from './utils/history'
import SpinLoding from './components/SpinLoding'
// import { Image } from 'antd'
// import { useSelector } from 'react-redux'
// import store, { RootState } from './store'
// import MessageCom from './components/Message'
// import LookDom from './components/LookDom'
import NotFound from '@/components/NotFound'
const A1home = React.lazy(() => import('./pages/A1home'))

// 设计图按照 1920 X 919 来开发
const planSize = {
  width: isMobiileFu() ? 414 : 1920,
  height: isMobiileFu() ? 736 : 919
}

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

  const rootRef = useRef<any>(null)

  // 移动端存下来 最小屏幕数据 防止打开输入框的时候压缩高度
  const moBaseObj = useRef({
    num: 0,
    scaleH: 0,
    moveY: 0
  })

  const pageFullChangeFu = useCallback(() => {
    let width = document.documentElement.clientWidth
    let height = document.documentElement.clientHeight

    // 屏幕改变的时候改变字体大小，这个项目暂时用不上
    // // 1920 = 16px
    // const bei = 1920 / 16;
    // let res = Math.round(width / bei);
    // if (res <= 10) res = 10;
    // rootRef.current.style.setProperty("--fontNum", res + "px");

    // 移动端开发 宽度限制最大500px
    if (planSize.width <= 500) {
      width = width >= 500 ? 500 : width
      rootRef.current.style.margin = '0 auto'
    }

    const sizeW = width / planSize.width
    let sizeH = height / planSize.height

    const moveX = (planSize.width - width) / 2
    let moveY = (planSize.height - height) / 2

    // 移动端
    if (height < moBaseObj.current.num) {
      // 打开了键盘
      document.querySelector('body')!.style.overflow = 'auto'
      sizeH = moBaseObj.current.scaleH
      moveY = moBaseObj.current.moveY
    } else document.querySelector('body')!.style.overflow = 'hidden'

    // console.log("-------", width, moveX);
    rootRef.current.style.transform = `translate(${-moveX}px,${-moveY}px) scale(${sizeW},${sizeH})`
  }, [])

  useEffect(() => {
    rootRef.current = document.querySelector('#root')
    rootRef.current.style.width = planSize.width + 'px'
    rootRef.current.style.height = planSize.height + 'px'

    // 移动端
    if (planSize.width <= 500) {
      const height = document.documentElement.clientHeight

      moBaseObj.current = {
        num: height,
        scaleH: height / planSize.height,
        moveY: (planSize.height - height) / 2
      }
    }

    pageFullChangeFu()

    window.addEventListener('resize', pageFullChangeFu, false)
  }, [pageFullChangeFu])

  return (
    <>
      {/* 关于路由 */}
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            <Route path='/' component={A1home} exact />
            <Route path='*' component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>

      {/* 所有图片点击预览查看大图 */}
      {/* <Image
        preview={{
          visible: lookBigImg.show,
          src: lookBigImg.url,
          onVisibleChange: value => {
            // 清除仓库信息
            store.dispatch({
              type: 'layout/lookBigImg',
              payload: { url: '', show: false }
            })
          }
        }}
      /> */}

      {/* 查看视频音频 */}
      {/* <LookDom /> */}

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