<template>
    <div class="columns ml-3 mr-3">
        <categorias-container :class="chismosaActiva ? 'hide-below-1024' : ''"></categorias-container>
        <productos-container :class="chismosaActiva ? 'hide-below-1024' : ''"></productos-container>
        <chismosa v-show="chismosaActiva"></chismosa>
    </div>
</template>

<script>
import { mapActions } from "vuex";
import Chismosa from "./Chismosa.vue";
import ProductosContainer from "./ProductosContainer.vue";
import CategoriasContainer from "./CategoriasContainer.vue";

export default {
    components: { CategoriasContainer, ProductosContainer, Chismosa },
    data() {
        return {
            chismosaActiva: false,
        }
    },
    methods: {
        ...mapActions('productos',["init"]),
        ...mapActions('pedido',["getPedido"]),
        ...mapActions('barrio',["getGrupoDeCompra"]),
    },
    async mounted() {
        await this.init();
        await this.getGrupoDeCompra();
        await this.getPedido();
        Event.$on('toggle-chismosa', (activa) => {
            this.chismosaActiva = activa;
        });
    },
}
</script>