import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
import ReactDOM from 'react-dom/client';
import reportWebVitals from '../../../reportWebVitals';
import { Provider, observer, useLocalObservable } from "mobx-react";
import globaStore from '@/store'
import weComTaskStore from '@/pages/weComTask/store'
import MainLayout from "@/layout";
import { toJS } from "mobx";
import '../../../global.less'
import routerConfig from "./routerAuto";
import { Suspense, useEffect } from "react";
import { Spin } from "antd";
import { LoadingOutlined } from '@ant-design/icons'

const Main = observer(() => {

    const store = useLocalObservable(() => ({ globaStore, weComTaskStore }))
    useEffect(() => {
        store.globaStore.userInit()//初始化用户信息
        store.weComTaskStore.init()
    }, [])
    
    const menus = toJS(store.globaStore.data.menus)
    return <Provider store={store}>
        <HashRouter
            future={{ v7_relativeSplatPath: true, v7_startTransition: true }}
        >
            <Suspense fallback={<div style={{ width: '100%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}><Spin indicator={<LoadingOutlined spin style={{ fontSize: 48 }} />} size="large" /></div>}>
                <MainLayout data={menus} name='weComTask'>
                    <Routes>
                        {menus?.weComTask?.[0]?.children?.[0]?.path && <Route path='/' element={<Navigate to={menus?.weComTask?.[0]?.children?.[0]?.path} replace />}></Route>}
                        {routerConfig?.map(route => {
                            return <Route path={route.path} element={route.element} key={route.path} ></Route>
                        })}
                    </Routes>
                </MainLayout>
            </Suspense>
        </HashRouter>
    </Provider>
})

ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
).render(<Main />);

reportWebVitals();