import { IfLayout as Layout, IfKeepAlive, IfMicroApp } from './components'
import IfLayoutConfigStore from './store'
import { inject } from 'vue'
import { StoreName } from './hooks';
import createPersistedState from 'vuex-persistedstate'

export {setTitle, closePage} from './hooks';

let cacheConfig;

export default class IfLayoutConfig {
    constructor(app, config) {
        this.app = app;
        this.config = config;
        this.initConfig()
    }
    initConfig() {
        // router, 
        const { store, router: _router, routes, config } = this.config;
        // 注册Model
        store.registerModule(StoreName, IfLayoutConfigStore, { preserveState: false });
        const router = this.setRoutes(routes, _router);

        if (config) this.update(config);
        this.initTagView(router)

        // State数据持久化
        createPersistedState({
            key: 'if_$layout',
            paths: [`${StoreName}.tagsView.cached`]
        })(store)
    }

    // 启用Tag缓存
    initTagView(router) {
        if (!router) {
            console.warn('router miss, TagView功能关闭')
            this.update({ tagsView: { enable: false } });
            return;
        }
        const { store } = this.config
        

        // 设置router缓存
        store.commit(StoreName + '/setRouter', router)

        router.addRoute({
            name: '空页面',
            hidden: true,
            component: Layout,
            path: '/blank'
        })

        router.beforeEach((to, from, next) => {
            if (router.hasRoute(to.name) && to.path != '/blank') {
                store.commit(StoreName + '/cachePage', to)
                next()
            } else {
                next()
            }
        })

    }

    update(config) {
        const { store } = this.config;
        store.commit(StoreName + '/updateConfig', config)
    }

    updateMicroComponent(routes){
        routes.map(route => {
            if(route?.meta?.micro && !route.component) {
                route.component = IfMicroApp
            }
            if(route.children && route.children.length) {
                this.updateMicroComponent(route.children)
            }
        })
    }

    // 设定路由 推荐使用ifAuth
    setRoutes(routes, router) {
        const { store } = this.config;
        this.updateMicroComponent(routes);
        routes && store.commit(StoreName + '/setRoutes', routes)
        return this.createRouter(routes, router);
    }

    createRouter(routes, router){
        if(router) {
            routes.map(route => router.addRoute(route))
        }
        return router
    }

    static install(app, config) {
        const $IfLayoutConfig = new IfLayoutConfig(app, config)
        cacheConfig = $IfLayoutConfig;
        app.provide('IfLayoutConfig', $IfLayoutConfig);

        // 全局注册
        app.component('IfKeepAlive', IfKeepAlive)
        app.component('IfLayout', Layout);

    }
}
export const IfLayout = Layout

export function useLayoutConfig() {
    return cacheConfig || inject('IfLayoutConfig')
}

