<template>
    <div>
        <table class="table is-fullwidth is-striped is-bordered">
            <thead>
            <tr>
                <th>Núcleo</th>
                <th v-if="devoluciones_habilitadas"><abbr title="Total sin tomar en cuenta las devoluciones">Total parcial $</abbr></th>
                <th v-if="devoluciones_habilitadas"><abbr title="Devoluciones correspondientes al núcleo">Devoluciones $</abbr></th>
                <th><abbr title="Total a Pagar por el núleo">{{ devoluciones_habilitadas ? 'Total real' : 'Total' }} $</abbr></th>
                <th class="is-1"><abbr title="Pagado">Pagado</abbr></th>
            </tr>
        </thead>
        <tbody>
            <fila-pedido
                v-for="pedido in pedidos"
                :pedido_id="pedido.id"
                :key="pedido.id">
            </fila-pedido>
        </tbody>
        </table>
        <table class="table is-striped is-bordered">
            <tr>
                <th colspan="2" class="has-background-black has-text-white has-text-centered">TOTALES</th>
            </tr>
            <tr>
                <th>Total a recaudar:</th>
                <td class="has-text-right">$ {{ total_a_recaudar }}</td>
            </tr>
            <tr>
                <th>Total bonos barriales:</th>
                <td class="has-text-right">$ {{ total_barrial }}</td>
            </tr>
            <tr v-if="devoluciones_habilitadas">
                <th>Total devoluciones:</th>
                <td class="has-text-right">- $ {{ total_devoluciones }}</td>
            </tr>
            <tr>
                <th>Cantidad bonos de transporte:</th>
                <td class="has-text-right">{{ cantidad_transporte }}</td>
            </tr>
            <tr>
                <th>Total bonos de transporte:</th>
                <td class="has-text-right">$ {{ total_transporte }}</td>
            </tr>
            <tr>
                <th>Total a depositar:</th>
                <td class="has-text-right">$ {{ total_a_transferir }}</td>
            </tr>
        </table>
    </div>
</template>

<script>
import FilaPedido from "./FilaPedido.vue";
import { mapGetters, mapState } from "vuex";
export default {
    components: {
        FilaPedido
    },
    computed: {
        ...mapState('admin', [
            "devoluciones_habilitadas",
            "pedidos",
            "total_a_recaudar",
            "total_barrial",
            "total_devoluciones",
            "cantidad_transporte",
            "total_transporte",
            "total_a_transferir",
        ]),
        ...mapGetters('admin', ['pedidosAprobados']),
    },
}
</script>

<style></style>