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

export default defineComponent({
    components: { CartelPedidoAprobado, DevolucionesModal, SubpedidoSelect, CategoriasContainer, ProductosContainer, Chismosa },
    computed: {
        ...mapState('ui',["show_chismosa","show_devoluciones"])
    },
    methods: {
        ...mapActions('productos',["init"]),
    },
    async mounted() {
        await this.init();
    },
})
</script>

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

<style scoped>

</style>
