<template>
    <div>
        <pedidos-main v-if="show_faltantes_y_sobrantes"/>
        <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop" v-else>
            <tabs-secciones :tabs="tabs" :tabInicial="tabActiva"/>
            <div class="block" id="pedidos-seccion"
                :class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
                <div class="block pb-6" id="pedidos-tabla-y-dropdown" v-if="hayPedidos">
                    <div class="is-flex is-justify-content-space-between mb-3">
                        <button class="button is-danger" @click="abrirFaltantesYSobrantes">
                            <span class="icon">
                                <i class="fa fa-refresh"></i>
                            </span>
                            <span>Faltantes y Sobrantes</span>
                        </button>
                        <dropdown-descargar/>
                    </div>
                    <tabla-pedidos/>
                </div>
                <p class="has-text-centered" v-else>
                    Todavía no hay ningún pedido para administrar.
                </p>
            </div>
            <div class="block pb-6" id="caracteristicas-seccion"
                 :class="seccionActiva === 'caracteristicas-seccion' ? 'is-active' : 'is-hidden'">
                <caracteristicas-opcionales/>
            </div>
        </div>
    </div>
</template>

<script>
import CaracteristicasOpcionales from "./CaracteristicasOpcionales.vue";
import TabsSecciones from "../comunes/TabsSecciones.vue";
import DropdownDescargar from "./DropdownDescargar.vue";
import TablaPedidos from "./TablaPedidos.vue";
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import Canasta from "../pedidos/Canasta.vue";
import PedidosMain from "../pedidos/PedidosMain.vue";
export default {
    name: "AdminBody",
    components: {
        PedidosMain,
        Canasta,
        CaracteristicasOpcionales,
        TabsSecciones,
        DropdownDescargar,
        TablaPedidos,
    },
    data() {
        return {
            tabs: [{ id: "pedidos", nombre: "Pedidos" },
                   { id: "caracteristicas", nombre: "Caracteristicas opcionales" }],
            tabActiva: "pedidos",
            seccionActiva: "pedidos-seccion",
        }
    },
    computed: {
        ...mapGetters('admin', ['hayPedidos']),
        ...mapState('ui', ['show_faltantes_y_sobrantes'])
    },
    methods: {
        ...mapActions('admin', ['getGrupoDeCompra', 'abrirFaltantesYSobrantes']),
        ...mapActions('ui', ['toast']),
        ...mapMutations('ui', ['toggleFaltantesYSobrantes']),
        setSeccionActiva(tabId) {
            this.tabActiva = tabId;
            this.seccionActiva = tabId + "-seccion";
        },
    },
    async mounted() {
        await this.getGrupoDeCompra();
    },
}
</script>

<style>

</style>
