<template>
    <div class="level-bar-container">
        <el-breadcrumb class="app-levelbar" separator="/">
            <el-breadcrumb-item v-for="(item,key) in matchedRoute" :key="item.path">
                <span v-if='key==0' class="first-level"><Icon :type="item.meta.icon || ''" class="level-icon"></Icon>{{item.meta.title}}</span>
                <span v-else>{{item.meta.title}}</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    computed: {
        matchedRoute() {
            return this.$route.matched.filter(item => {
                return !item.meta.hiddenLevel;
            });
        },
    },
    created() {
    },
    methods: {},
};
</script>
<style>
    .app-levelbar {
        display: inline-block;
        font-size: 12px;
    }

    .level-icon {
        font-size: 15px;
        margin-right: 5px;
        color: #b5b5b5;
    }

    .level-bar-container {
        height: 48px;
        line-height: 48px;
    }

    .first-level {
        color: #b5b5b5 !important;
    }
</style>
