<script>
import { mapActions, mapState } from "vuex";
import BarrioRow from "./BarrioRow.vue";

export default {
    name: "TablaBarrios",
    components: { BarrioRow },
    async mounted() {
        await this.getGruposDeCompra();
    },
    methods: {
        ...mapActions("comisiones", ["getGruposDeCompra"]),
    },
    computed: {
        ...mapState("comisiones", ["grupos_de_compra"]),
    }
}
</script>

<template>
    <table class="table is-fullwidth is-striped is-bordered">
        <thead>
            <tr>
                <th>Barrio</th>
                <th>Region</th>
                <th>Saldo</th>
                <th>Pedido</th>
                <th>Modificar</th>
            </tr>
        </thead>
        <tbody>
            <barrio-row v-for="(gdc,index) in grupos_de_compra"
                       :grupo_de_compra="gdc"
                       :key="index"/>
        </tbody>
    </table>
</template>

<style scoped>

</style>
