import '@/assets/styles/base.css'
import MessageCom from './components/Message'
import RouterOrder from './components/RouterOrder'
import AsyncSpinLoding from './components/AsyncSpinLoding'
import { Image } from 'antd'
import { useSelector } from 'react-redux'
import store, { RootState } from './store'

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

  return (
    <div id='App'>
      {/* 关于路由 */}
      <RouterOrder />
      {/* 发送请求的加载组件 */}
      <AsyncSpinLoding />

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

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