<template>
    <div class="title-bar-box">
        <el-breadcrumb separator="/" class="app-breadcrumb font16">
            <transition-group name="breadcrumb">
                <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
                    <span v-if="index === levelList.length - 1">{{ item.meta.title }}</span>
                    <!-- <router-link v-else :to="item.path">{{ item.meta.title }}</router-link> -->
                    <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
                </el-breadcrumb-item>
            </transition-group>
        </el-breadcrumb>
    </div>
</template>
<script>
export default {
    data() {
        return {
            levelList: [],
        };
    },
    created() {
        this.getBreadcrumb();
    },
    methods: {
        /**
         * 获取当前路由的层级
         */
        getBreadcrumb() {
            // console.log(this.$route);
            // 找到有meta 并且含有title的路由
            let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
            this.levelList = matched;
        },
        pathCompile(path) {
            // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
            const { params } = this.$route;
            var toPath = pathToRegexp.compile(path);
            return toPath(params);
        },
        /**
         * 路由跳转 如果有重定向跳到重定向 没有就跳当前路径
         */
        handleLink(item) {
            const { redirect, path } = item;
            if (redirect) {
                this.$router.push(redirect);
                return;
            }
            this.$router.push(this.pathCompile(path));
        },
    },
    watch: {
        $route() {
            this.getBreadcrumb();
        },
    },
};
</script>
<style lang="stylus" scoped>
    .app-breadcrumb {
    border-bottom: 2px solid #f0f3f4;
    padding: 13px 10px;
    ::v-deep .el-breadcrumb__inner,
    ::v-deep .el-breadcrumb__separator,
    .el-breadcrumb__inner.is-link,
    .el-breadcrumb__inner a,
    ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
        font-size: 16px;
    font-weight: bold;
    color:#333;
    }
    ::v-deep .el-breadcrumb__separator{
            margin: 0 4px;
    }
}
</style>
