<template>
    <div class="container table-container chismosa-container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
        <table v-show="this.subpedidos.length !== 0" class="table is-fullwidth is-striped is-bordered">
            <thead>
                <tr>
                    <th>Núcleo</th>
                    <th><abbr title="Total a Pagar">Total $</abbr></th>
                    <th><abbr title="Aprobacion">Aprobación</abbr></th>
                </tr>
            </thead>
                <tbody>
                    <subpedido-row v-for="subpedido in this.subpedidos"
                                   :subpedido="subpedido" :key="subpedido.id">
                    </subpedido-row>
                </tbody>
        </table>
        <p class="has-text-centered" v-show="this.subpedidos.length === 0">
            Todavía no hay ningún pedido para administrar.
        </p>
    </div>
</template>

<script>
import SubpedidoRow from "./SubpedidoRow";
export default {
    name: "SubpedidosGdc",
    components: {SubpedidoRow},
    data() {
        return {
            gdc: null,
            subpedidos: []
        }
    },
    beforeCreate() {
        axios.get("/admin/obtener_sesion").then(response => {
            this.gdc = response.data.gdc;
            this.fetchSubpedidos();
        });
    },
    methods: {
        fetchSubpedidos() {
            axios.get("/api/subpedidos/resources").then(response => {
                this.subpedidos = response.data.data
            });
        }
    },
    mounted() {
        Event.$on('sync-aprobacion', (_) => {
            this.fetchSubpedidos();
        })
    }
}
</script>

<style scoped>

</style>