<template>
    <Breadcrumb v-if="showBreadcrumb">
        <Breadcrumb-item v-bind:href="item.path" v-for="item in items" :key="item.name">{{item.name}}</Breadcrumb-item>
    </Breadcrumb>
</template>

<script>
import _ from 'lodash';


export default {
    name: 'breadcrumb',
    data() {
        return {
            items: [],
            activeName: '',
            showBreadcrumb: false
        };
    },
    created() {
        this.$root.$on('route-change', (to) => {
            this.showBreadcrumb = false;
            this.$nextTick(() => { // Breadcrumb更新子组件的separator，如果不手动重建Breadcrumb周期，子组件separator不会得到更新
                this.render(to);
            });
        });
        this.render();
    },
    methods: {
        render(to) {
            this.showBreadcrumb = true;
            this.items = [{name: '首页', path: '/'}];
            let purviews = this.$config.purviews;
            let routeName = to && to.name || this.$router.history.current.name;
            let routes = _.split(routeName, '.');
            
            _.each(routes, route => {
                let findRoute = _.get(purviews, route);

                if (findRoute) {
                    purviews = findRoute.subPurviews;
                    if (findRoute.name) {
                        this.items.push({
                            name: findRoute.name,
                            path: findRoute.path
                        });
                    }
                }
            });
            _.last(this.items).path = '';
        }
    }
};
</script>

<style lang="scss">

</style>