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

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

<template>
    <div>
        <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>
</template>

<style scoped>

</style>
