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

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

<template>
    <div>
        <nav-migas/>
        <cantidad-ollas v-if="rol === 'ollas'"/>
        <div class="columns">
            <div class="column" :class="{ 'is-two-thirds-desktop': show_chismosa }">
                <slot name="cartel"></slot>
                <canasta/>
            </div>
            <div class="column is-full-touch" v-if="show_chismosa">
                <chismosa/>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>
