<template>
    <Breadcrumb class="brand-curmb" v-if="showBreadcrumb">
        <i class="iconfont icon-alignjustify" aria-hidden="true" @click="$emit('menu-trigger')"></i>
        <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: 'breadcrumbs',
    data() {
        return {
            items: [],
            activeName: '',
            showBreadcrumb: false
        };
    },
    created() {
        this.render(_.get(this.$router, 'history.current'));
    },
    methods: {
        render(to) {
            this.showBreadcrumb = true;
            this.items = [{name: '首页', path: '/'}];
            this.items = this.items.concat(_.map(_.get(to, 'matched', []), match => {
                return {
                    name: match.meta.pageName
                };
            }).filter(m => m.name));
        }
    },
    watch: {
        $route(newRoute) {
            this.showBreadcrumb = false;
            this.$nextTick(() => { // Breadcrumb更新子组件的separator，如果不手动重建Breadcrumb周期，子组件separator不会得到更新
                this.render(newRoute);
            });
        }
    }
};
</script>

<style lang="scss">
.brand-curmb {
    &.bread-collapse {
        .iconfont {
            display: initial !important;
        }
    }

    .iconfont {
        cursor: pointer;
        display: none !important;
    }
}
</style>