<!--
 * @Author: your name
 * @Date: 2022-04-01 18:30:52
 * @LastEditTime: 2022-04-18 14:34:20
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \orico_ops_admin\src\components\layout\libs\layout-aside\index.vue
-->
<template>
	<div @mouseleave="handleHideSubMenus">
		<el-scrollbar height="100vh">
			<lv1-menu :menus="menus" @change="handleShowSubMenus" />
		</el-scrollbar>
		<el-scrollbar class="sub-menu" v-if="displaySubMenus">
			<lv2-menu :menus="activedMenu" />
		</el-scrollbar>
	</div>
</template>
<style lang="scss" scoped>
.sub-menu {
	position: fixed;
	top: 0;
	left: 60px;
	width: 210px;
	height: 100%;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 0 24px 24px 0;
	box-shadow: 24px 0 26px -23px rgba(223, 228, 237, 0.6);
}
</style>
<script>
import { mapState } from 'vuex';
import Menu from './menu';
import SubMenu from './submenu';
export default {
	components: {
		'lv1-menu': Menu,
		'lv2-menu': SubMenu,
	},
	data() {
		return {
			displaySubMenus: false,
			activedMenu: [],
		};
	},
	computed: {
		...mapState({
			menus: (state) =>
				JSON.stringify(state) !== '{}' &&
				state.routes.routes &&
				state.routes.routes
					? state.routes.routes
					: [],
		}),
	},
	watch: {
		// 监听路由变化
		$route(to, from) {
			this.displaySubMenus = false;
		},
	},
	mounted() {},
	methods: {
		handleShowSubMenus(menu) {
			this.activedMenu = menu;
			this.displaySubMenus = true;
		},
		handleHideSubMenus() {
			this.activedMenu = [];
			this.displaySubMenus = false;
		},
	},
};
</script>
