<style lang="scss" scoped>

</style>
<template>
    <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group name="breadcrumb">
            <template>
                <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.id">
                    <span
                        v-if="item.redirect==='noRedirect'||index===levelList.length-1"
                        class="no-redirect"
                    >{{ item.name }}</span>
                    <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
                </el-breadcrumb-item>
            </template>
        </transition-group>
    </el-breadcrumb>
</template>

<script>
    import pathToRegexp from 'path-to-regexp';
    import {getFirstNav} from '@/utils';

    export default {
        data() {
            return {
                levelList: null
            };
        },
        watch: {
            $route(route) {
                // if you go to the redirect page, do not update the breadcrumbs
                if (route.path.startsWith('/redirect/')) {
                    return;
                }
                this.getBreadcrumb();
            }
        },
        created() {
            this.getBreadcrumb();
        },
        methods: {
            getBreadcrumb() {
                // only show routes with meta.title
                const crumbList = this.$store.state.permission.crumbList;
                const matched = [{id: '*', name: '启效', routeUrl: '/'}].concat(crumbList);
                this.levelList = matched.filter(
                    item => item.name
                );
            },
            isDashboard(route) {
                const name = route && route.name;
                if (!name) {
                    return false;
                }
                return (
                    name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
                );
            },
            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) {
                let location = item.routeUrl;
                if (!location && item.childList) {
                    location = getFirstNav(item.childList);
                }
                if (location) {
                    this.$router.push(location);
                }
            }
        }
    };
</script>