<template>
    <el-breadcrumb class="breadcrumb">
        <el-breadcrumb-item
            v-for="item in items" 
            :key="item.title"
            :to="{ path: item.to }"
        >{{item.title}}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>
import MenuMixins from '../mixins/menu.js'

export default {
    data () {
        return {
            items: []
        }
    },
    mixins: [
        MenuMixins
    ],
    mounted () {
        this.init()
    },
    watch: {
        menus: {
            handler (newVal) {
                if (newVal) {
                    this.init()
                }
            },
            deep: true
        }
    },
    methods: {
        init () {
            const items = this.getBreadcrumbs(this.$route.path)
            if (items) {
                this.items = items
            }
        }
    }
}
</script>

<style lang="less" scoped>
.breadcrumb {
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;
}
</style>