<script >
import { defineComponent } from "vue";
import { mapGetters, mapMutations, mapState } from "vuex";
import CategoriasContainer from "./CategoriasContainer.vue";
import ProductosContainer from "./ProductosContainer.vue";
import Chismosa from "./Chismosa.vue";
import DevolucionesModal from "./DevolucionesModal.vue";

export default defineComponent({
    components: { DevolucionesModal, CategoriasContainer, ProductosContainer, Chismosa },
    computed: {
        ...mapState('ui', ["show_chismosa", "show_devoluciones", "tags_interactuada"]),
        ...mapGetters('productos', ["mostrarProductos"]),
    },
    methods: {
        ...mapMutations("ui", ["toggleTags"]),
    },
    mounted() {
        if (!this.tags_interactuada)
            this.toggleTags(false);
    }
})
</script>

<template>
    <div class="columns ml-3 mr-3" v-else>
        <productos-container v-if="mostrarProductos" :class="show_chismosa ? 'hide-below-1024' : ''"/>
        <categorias-container v-else :class="show_chismosa ? 'hide-below-1024' : ''"/>
        <devoluciones-modal v-show="show_devoluciones"/>
    </div>
</template>

<style scoped>

</style>
