<template>
	<div class="sidemenubar">
		
		<el-scrollbar style="height: 100%;">
			<el-menu class="el-menu-vertical-demo" :collapse="collapse" @select="onMenuSelect" @open="onOpen" :unique-opened="true"
			 background-color="#545c64" text-color="#fff"  :default-active="defaultActive">
				<side-menu-item v-for="item in menuTree" :key="item.id" :menu="item"></side-menu-item>
			</el-menu>
		</el-scrollbar>
	</div>
</template>
<script>
	import axios from '@/axios'
	import {
		mapState
	} from 'vuex'
	import SideMenuItem from './SideMenuItem'


	export default {
		data() {
			return {
				isCollapse: true
			}
		},
		components: {
			SideMenuItem
		},
		methods: {
			onMenuSelect: function(index, indexPath) {
				this.$router.push(index)
			},
			onOpen: function(index, indexPath) {
				 if(index.length==3){
					 var url = 'SysMenu/queryByMenuCode.do'
					 var param = {
					 	code: index, 
					 }
					 axios.get(url, param).then(response => {
					 	this.$store.commit('setSecName', '-'+response.data.data.menuName)
					 });
				 }
			}
		},
		computed: {
			...mapState({
				appName: state => state.app.appName,
				themeColor: state => state.app.themeColor,
				collapse: state => state.app.collapse,
				menuTree: state => state.menu.menuTree,
					defaultActive: state => state.tabsbar.activePage.path 
			})
		}
	}
</script>

<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		height: 100%;
	}

	.el-menu--collapse {
		height: 100%;
	}

	.sidemenubar {
		float: left;
		height: 100%;
	}

	.el-scrollbar__wrap {
		overflow-x: hidden;
	}

	.el-scrollbar__view {
		height: 100%;
	}
</style>
