<template>
	<div class="adminui-topbar">
		<div class="left-panel">
			<el-breadcrumb separator-icon="el-icon-arrow-right" class="hidden-sm-and-down">
				<template v-for="item in breadList" :key="item.title" >
					<el-breadcrumb-item v-if="item.path!='/' &&  !item.meta.hiddenBreadcrumb" :key="item.meta.title"><el-icon class="icon" v-if="item.meta.icon"><component :is="item.meta.icon" /></el-icon>{{item.meta.title}}</el-breadcrumb-item>
				</template>
			</el-breadcrumb>
		</div>
		<div class="center-panel"></div>
		<div class="right-panel">
			<slot></slot>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			breadList: []
		}
	},
	created() {
		this.getBreadcrumb();
	},
	watch: {
		$route() {
			this.getBreadcrumb();
		}
	},
	methods: {
		getBreadcrumb(){
			this.breadList = []
			var menu = this.$router.sc_getMenu()
			this.getParentId(this.$TOOL.tree_to_list(menu), this.$route.meta.parent_id)
			this.breadList.push(this.$route)
		},
		getParentId(menuList, id){
			menuList.map(item => {
				if(item.id == id){
					if(item.parent_id != 0){
						this.getParentId(menuList, item.parent_id)
					}
					this.breadList.push(item)
				}
			})
		}
	}
}
</script>

<style scoped>
	.el-breadcrumb {margin-left: 15px;}
	.el-breadcrumb .el-breadcrumb__inner .icon {font-size: 14px;margin-right: 5px;float: left;}
	.breadcrumb-enter-active,.breadcrumb-leave-active {transition: all 0.3s;}
	.breadcrumb-enter-from,.breadcrumb-leave-active {opacity: 0;transform: translateX(20px);}
	.breadcrumb-leave-active {position: absolute;}
</style>
