const isObject = obj => {
    if(obj === null) return false
    if(obj instanceof Array) return false
    return typeof obj === 'object'
}

const setData = (target, key, newVal) => {
    if(isObject(newVal)) {
        Object.keys(newVal).map(_key => {
            setData(target[key], _key, newVal[_key])
        })
    } else {
        target[key] = newVal
    }
}

export default {
    namespaced: true,
    state: {
        name: 'if-layout-config',
        version: '1.0.0',
        // 导航栏高度
        navbar: {
            height: '50px',
        },
        // 尺寸
        sidebar: {
            // 默认高度
            width: '200px',
            minWidth: '63px',
        },
        menuStyle: {
            activeTextColor:"#333",
            activeBackgroundColor: '#eee',
            backgroundColor:"#333",
            textColor:"#fff"
            // --el-menu-active-color
        },
        // 是否折叠
        collapse: false,
        // 网站基础信息相关
        SiteInfo: {
            title: "小红马",
            logo: "https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png",
            siteUrl: '/'
        },
        routes: [],
        
        tagsView: {
            cached: [],
            clearCaches: [],
            activeIndex: 0,
            enable: true,
        },
        // 缓存router
        $router: null
        
    },
    mutations: {
        updateConfig(state, payload) {
            Object.keys(payload).map(key => {
                if(isObject(payload[key])){
                    setData(state, key,  payload[key])
                } else {
                    state[key] = payload[key]
                }
            })
        },
        setRoutes(state, routes) {
            state.routes = routes
        },

        cachePage(state, to) {
            const {meta} =to
            if(!state.tagsView.cached.find(page => page.value === to.fullPath)) {
                state.tagsView.cached.push({
                    label: meta.title,
                    value: to.fullPath
                })
            }
            state.tagsView.activeIndex = to.fullPath;
            
            // if(typeof names === 'string')  names = [names];
            // state.tagsView.cached = [{name: 'Error'}]
            // const source = state.routes.filter(i => names.includes(i.name));
            // source.map(target => {
            //     if(state.tagsView.cached.find(i => i.name !== target.name)) {
            //         state.tagsView.cached.push(target);
            //     }
            // })

        },
      
        // 关闭全部
        flushAll(state) {
            state.tagsView.cached.length = 1;
            // TODO 逻辑优化 最少一个标签
        },
        // 关闭指定页面
        async flushPage(state, pages) {
            

            if(!(pages instanceof Array))  pages = [pages];
            const pageKeys = pages.map(i => i.value || i);
            
            state.tagsView.cached = state.tagsView.cached.filter(i => !pageKeys.includes(i.value))

            if(pageKeys.includes(state.tagsView.activeIndex)) {
                let current = state.tagsView.cached[state.tagsView.cached.length - 1]
                if(current) {
                    await state.$router.push(current.value)
                }
            }

            if(!state.tagsView.cached.length) {
                await state.$router.push('/blank')
            }
            // 清空
            state.tagsView.clearCaches = pageKeys
        },

        setTitle(state, title) {
            const {cached, activeIndex} = state.tagsView;
            cached.map(i => {
                (i.value === activeIndex) && (i.label = title)
            })
        },

        setRouter(state, router) {
            state.$router = router
        },

        // 关闭右侧
        flushRightPage(state) {
            const {cached, activeIndex} = state.tagsView;
            state.tagsView.cached = cached.slice(0, activeIndex + 1)
        },
        // 关闭左侧
        flushLeftPage(state) {
            const {cached, activeIndex} = state.tagsView;
            state.tagsView.cached = cached.slice(activeIndex)
        }

    },
    getters: {
        sidebarHeight(state) {
            return `calc(100% - ${state.navbar.height})`
        },
        sidebarWidth(state){
            return state.collapse ? state.sidebar.minWidth : state.sidebar.width
        },

        stylesBase(state) {
            return {
                '--el-menu-active-background-color': state.menuStyle.activeBackgroundColor,
                '--el-menu-active-color': state.menuStyle.activeTextColor
            }
        },
        cachedPages(state) {
            return state.tagsView.cached
        },
        routes(state) {
            return state.routes
        }
    }
}