<template>
    <div id="pedidos-body" class="pb-6 mb-6">
        <pedido-select v-if="!pedidoDefinido"/>
        <div v-else>
            <nav-migas/>
            <div class="columns">
                <div class="column" :class="{ 'is-two-thirds-desktop is-hidden-touch': show_chismosa }">
                    <cartel-pedido-aprobado/>
                    <canasta/>
                </div>
                <div class="column is-full-touch" v-if="show_chismosa">
                    <chismosa/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
import CartelPedidoAprobado from "./CartelPedidoAprobado.vue";
import PedidoSelect from "./PedidoSelect.vue";
import Canasta from "./Canasta.vue";
import NavMigas from "./NavMigas.vue";
import Chismosa from "./Chismosa.vue";

export default {
    name: "PedidosBody",
    components: { Chismosa, NavMigas, CartelPedidoAprobado, PedidoSelect, Canasta },
    computed: {
        ...mapGetters('pedido', ["pedidoDefinido"]),
        ...mapState('ui', ["show_chismosa"]),
    },
    methods: {
        ...mapActions('productos', ["init"]),
    },
    async mounted() {
        await this.init();
    }
}
</script>
