<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() {
        _.remove(this.$router.beforeHooks, hook => hook.name === 'breadcrumb');
        let that = this;

        this.$router.beforeEach(function breadcrumb(to, from, next) {
            that.showBreadcrumb = false;
            that.$nextTick(() => { // Breadcrumb更新子组件的separator，如果不手动重建Breadcrumb周期，子组件separator不会得到更新
                that.render(to);
            });
            return next();
        });
        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>