<template>
	<el-breadcrumb class="app-breadcrumb" separator="/">
		<el-breadcrumb-item v-for="item in levelList" :key="item.path">
			{{item.name}}
		</el-breadcrumb-item>
	</el-breadcrumb>
</template>

<script>
	export default {
		data() {
			return {
				levelList: []
			}
		},
		watch: {
			$route() {
				this.getBreadcrumb()
			}
		},
		created() {
			this.getBreadcrumb()
		},
		methods: {
			getBreadcrumb() {
				let matched = this.$route.matched.filter(item => {
					if (item.name) {
						return true
					}
				})
				const first = matched[0]
				if (first && first.name.trim().toLocaleLowerCase() !== '主页'.toLocaleLowerCase()) {
					matched = [{
						path: '/system/main',
						meta: {
							title: '主页'
						}
					}].concat(matched)
				}
				this.levelList = matched
			},
		}
	}
</script>

<style>
	.app-breadcrumb.el-breadcrumb {
		display: inline-block;
		font-size: 14px;
		line-height: 23px;
	}
</style>
