<template>
    <nav v-if="pedidoDefinido" 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, mapGetters, mapMutations, mapState } from "vuex";

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

<style>
nav.breadcrumb.is-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 3.25rem;
    height: 2.75rem;
    z-index: 5;
}
</style>