<template>
    <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
        <tabs-secciones :tabs="tabs" :tabInicial="tabActiva"/>
        <div class="block pb-6"
             id="pedidos-comisiones-seccion"
             :class="seccionActiva === 'pedidos-comisiones-seccion' ? 'is-active' : 'is-hidden'">
            <div class="block" id="pedidos-comisiones-tabla-y-dropdown">
                <dropdown-descargar/>
            </div>
        </div>
        <div class="block pb-6"
             id="canasta-comisiones-seccion"
             :class="seccionActiva === 'canasta-comisiones-seccion' ? 'is-active' : 'is-hidden'">
            <canasta-seccion/>
        </div>
        <div class="block pb-6"
             id="saldos-comisiones-seccion"
             :class="seccionActiva === 'saldos-comisiones-seccion' ? 'is-active' : 'is-hidden'">
            <saldos-seccion/>
        </div>
    </div>
</template>

<script>
import TabsSecciones from "../comunes/TabsSecciones.vue";
import DropdownDescargar from "./DropdownDescargar.vue";
import InputFileButton from "../comunes/InputFileButton.vue";
import CanastaSeccion from "./canasta/CanastaSeccion.vue";
import SaldosSeccion from "./saldos/SaldosSeccion.vue";
import { mapActions } from "vuex";

export default {
    name: "ComisionesBody",
    components: {
        SaldosSeccion,
        CanastaSeccion,
        TabsSecciones,
        DropdownDescargar,
        InputFileButton,
    },
    data() {
        return {
            tabs: [
                { id: "pedidos-comisiones", nombre: "Pedidos" },
                { id: "canasta-comisiones", nombre: "Canasta" },
                { id: "saldos-comisiones", nombre: "Saldos" },
            ],
            tabActiva: "pedidos-comisiones",
            seccionActiva: "pedidos-comisiones-seccion",
        }
    },
    methods: {
        ...mapActions('comisiones', ['getGruposDeCompra']),
        setSeccionActiva(tabId) {
            this.tabActiva = tabId;
            this.seccionActiva = tabId + "-seccion";
        },
    },
    async mounted() {
        await this.getGruposDeCompra();
    },
}
</script>