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

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

<template>
    <table class="table container">
        <thead>
            <tr>
                <th>Barrio</th>
                <th>Saldo</th>
            </tr>
        </thead>
        <tbody>
            <saldo-row v-for="(gdc,index) in grupos_de_compra"
                       :grupo_de_compra="gdc"
                       :key="index"/>
        </tbody>
    </table>
</template>

<style scoped>

</style>
