<template>
    <nav class="breadcrumb is-centered has-background-danger-light is-fixed-top"
         aria-label="breadcrumbs" v-show="visible">
        <ul class="mt-4">
            <li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i === migaActiva}">
                <a @click="clickMiga({ miga: miga })"
                   v-text="miga.nombre"
                   :class="{'has-text-danger': i !== migaActiva}">
                </a>
            </li>
        </ul>
    </nav>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";

export default {
    methods: {
        ...mapActions('productos', ["getProductos"]),
        ...mapActions('ui', ["clickMiga"]),
        ...mapMutations('ui', ["addMiga"]),
    },
    computed: {
        ...mapState('ui', ["migas"]),
        visible() {
            return this.migas.length > 0;
        },
        migaActiva() {
            return this.migas.length - 1;
        },
    },
    mounted() {
        this.addMiga({ nombre: 'Categorias', action: 'productos/getProductos' });
    },
}
</script>

<style>
nav.breadcrumb.is-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 2.25rem;
    z-index: 5;
    padding: 0.5rem;
}
</style>