<template>
    <div class="columns is-mobile is-centered">
        <div class="column is-half">
            <div class="block">
                <tabs-secciones
                    :tabs="tabs"
                    :tabInicial="tabActiva"
                    :clases="['is-centered', 'is-fullwidth']">
                </tabs-secciones>
                <div class="block pb-6" id="faltantes-seccion"
                     :class="seccionActiva === 'faltantes-seccion' ? 'is-active' : 'is-hidden'">
                    <p>{{faltantes ?? 'nada aún'}}</p>
                </div>
                <div class="block pb-6" id="sobrantes-seccion"
                     :class="seccionActiva === 'sobrantes-seccion' ? 'is-active' : 'is-hidden'">
                    <p>{{sobrantes ?? 'nada aún'}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import TabsSecciones from "../comunes/TabsSecciones.vue";
import Chismosa from "../pedidos/Chismosa.vue";

export default {
    name: "FaltantesYSobrantes",
    components: {
        TabsSecciones,
        Chismosa,
    },
    data() {
        return {
            gdc: undefined,
            tabs: [{ id: "faltantes", nombre: "Faltantes" },
                { id: "sobrantes", nombre: "Sobrantes" }],
            tabActiva: "faltantes",
            seccionActiva: "faltantes-seccion",
            faltantes: undefined,
            sobrantes: undefined,
        };
    },
    watch: {
        '$root.gdc' : {
            handler(newValue) {
                if (newValue) {
                    this.gdc = newValue;
                    this.actualizarFaltantes();
                    this.actualizarSobrantes();
                }
            }
        },
    },
    methods: {
        setSeccionActiva(tabId) {
            this.tabActiva = tabId;
            this.seccionActiva = tabId + "-seccion";
        },
        actualizarFaltantes() {
            axios.get(`/api/grupos-de-compra/${this.gdc}/faltantes`)
                .then(response => {
                    this.faltantes = response.data['faltantes'];
                })
        },
        actualizarSobrantes() {
            axios.get(`/api/grupos-de-compra/${this.gdc}/sobrantes`)
                .then(response => {
                    this.sobrantes = response.data['sobrantes'];
                })
        },
    }
}
</script>

<style scoped>

</style>