<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</p>
                </div>
                <div class="block pb-6" id="sobrantes-seccion"
                     :class="seccionActiva === 'sobrantes-seccion' ? 'is-active' : 'is-hidden'">
                    <p>Sobrantes</p>
                </div>
            </div>
        </div>
    </div>

</template>

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

export default {
    name: "FaltantesYSobrantes",
    components: {
        TabsSecciones,
    },
    data() {
        return {
            tabs: [{ id: "faltantes", nombre: "Faltantes" },
                { id: "sobrantes", nombre: "Sobrantes" }],
            tabActiva: "faltantes",
            seccionActiva: "faltantes-seccion",
        };
    },
    methods: {
        setSeccionActiva(tabId) {
            this.tabActiva = tabId;
            this.seccionActiva = tabId + "-seccion";
        },
    }
}
</script>

<style scoped>

</style>
