<template>
    <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
        <tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></tabs-secciones>
        <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">
                <dropdown-descargar></dropdown-descargar>
                <tabla-pedidos></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></caracteristicas-opcionales>
        </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 TablaBonos from "./TablaBonos.vue";
import { mapActions, mapGetters } from "vuex";
export default {
    components: {
        CaracteristicasOpcionales,
        TabsSecciones,
        DropdownDescargar,
        TablaPedidos,
        TablaBonos,
    },
    data() {
        return {
            tabs: [{ id: "pedidos", nombre: "Pedidos" },
                   { id: "caracteristicas", nombre: "Caracteristicas opcionales" }],
            tabActiva: "pedidos",
            seccionActiva: "pedidos-seccion",
        }
    },
    computed: {
        ...mapGetters('admin', ['hayPedidos']),
    },
    methods: {
        ...mapActions('admin', ['getGrupoDeCompra']),
        setSeccionActiva(tabId) {
            this.tabActiva = tabId;
            this.seccionActiva = tabId + "-seccion";
        },
    },
    async mounted() {
        await this.getGrupoDeCompra();
    },
}
</script>

<style>

</style>