<template>
	<!-- <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]"> -->
	<aside v-if="this.$route.meta.hiddenSiderbar !== true" :class="[this.$route.meta.hiddenSiderbar !== true? ['aui-sidebar',`aui-sidebar--${$store.state.sidebarLayoutSkin}`]:'aui-sidebar.close']">
		<div v-if="this.$route.meta.hiddenSiderbar !== true" :class="[this.$route.meta.hiddenSiderbar !== true? 'aui-sidebar__inner':'aui-sidebar.close']">
			<el-menu
				:default-active="$store.state.sidebarMenuActiveName"
				:collapse="$store.state.sidebarFold"
				:unique-opened="true"
				:collapseTransition="false"
				class="aui-sidebar__menu"
			>
				<sub-menu v-for="menu in unhiddenMenuList" :key="menu.id" :menu="menu" />
			</el-menu>
		</div>
	</aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
export default {
	data() {
		return {
			unhiddenMenuList: []
		}
	},
	components: {
		SubMenu
	},
	mounted() {
		// this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
		this.$nextTick(() => {
			// console.log(`window.SITE_CONFIG['menuList']`, window.SITE_CONFIG['menuList'])
			this.unhiddenMenuList = this.getUnhiddenRoutesListFrom(window.SITE_CONFIG['menuList'])
			/** 本地保存一份，store保存一份，感觉 store 都不需要保存... */
			this.$store.state.sidebarMenuList = this.unhiddenMenuList
		})
	},
	methods: {
		getUnhiddenRoutesListFrom(fullList) {
			const list = []
			if (fullList.length) {
				fullList.forEach(menu => {
					if (menu.sort !== 99) {
						/** 前后端约定，路由排序值为 99 时不在前端的侧边栏展示该路由 */
						const newRouteItem = JSON.parse(JSON.stringify(menu))
						if (menu.children) {
							newRouteItem.children = this.getUnhiddenRoutesListFrom(menu.children)
						}
						list.push(newRouteItem)
					} else {
						// console.log(menu.name, '是应该被隐藏的路由')
					}
				})
			}
			return list
		}
	}
}
</script>
