<template>
	<el-scrollbar wrap-class="scrollbar-wrapper">
		<el-menu :show-timeout="200" :default-active="$route.path" background-color="#fafafa" text-color="#595961" active-text-color="#595961">
			<template v-if="currRouterData.meta.group">
				<div v-for="(group,idx) of currRouterData.meta.group" :key="idx" class="subnav">
					<p class="subnav_title">{{group.title}}</p>
					<sidebar-item v-for="route in currRouterData.children" v-if="route.meta.groupCode === group.code" :key="route.name" :item="route" :base-path="currRouterData.path" />
				</div>
			</template>
			<template v-else>
				<sidebar-item v-for="route in currRouterData.children" :key="route.name" :item="route" :base-path="currRouterData.path" />
			</template>

		</el-menu>
	</el-scrollbar>
</template>

<script>
	import { mapGetters } from 'vuex'
	import SidebarItem from './SidebarItem'

	export default {
		name: "childSidebar",
		props: ["currRouterData"],
		components: {
			SidebarItem
		},
		computed: {
			...mapGetters([
				'permissionRoutes',
				'sidebar'
			]),
			isCollapse() {
				return false
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.subnav {
		border-top: 1px solid #e8e9ea;
		padding-top: 5px;
		.subnav_title {
			margin: 0;
			font-size: 13px;
			padding: 0 20px;
			line-height: 40px;
			font-weight: bold;
			color: #818181;
		}
	}
	
	.subnav:nth-child(1) {
		border: none;
	}
</style>