<template>
    <div>
        <table v-show="productos.length != 0" class="chismosa-tabla table is-narrow is-striped is-bordered">
            <thead>
            <tr>
                <th>Producto</th>
                <th><abbr title="Cantidad">C</abbr></th>
                <th><abbr title="Precio Total">$</abbr></th>
                <th></th>
                <th><abbr title="Eliminar"></abbr></th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th><abbr title="Bonos Solidarios">B. Solidarios</abbr></th>
                <th>{{ cantidadBonos }}</th>
                <th>{{ totalBonos }}</th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
                <th>{{ cantidadBonosDeTransporte }}</th>
                <th>{{ totalBonosDeTransporte }}</th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Total total</th>
                <th></th>
                <th>{{ total }}</th>
                <th></th>
                <th></th>
            </tr>
            </tfoot>
            <tbody>
            <producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></producto-row>
            </tbody>
        </table>
        <p class="has-text-centered" v-show="productos.length == 0">
            Compa, todavía no agregaste nada a la chismosa.
        </p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                subpedido: this.$root.pedido
            }
        },
        computed: {
            productos: function() {
                return this.$root.pedido.productos
            },
            cantidadBonosDeTransporte: function() {
                return this.$root.pedido.subtotal_bonos_de_transporte / 15
            },
            totalBonosDeTransporte: function() {
                return this.$root.pedido.subtotal_bonos_de_transporte
            },
            cantidadBonos: function() {
                return this.$root.pedido.subtotal_bonos / 20
            },
            totalBonos: function() {
                return this.$root.pedido.subtotal_bonos
            },
            total: function() {
                return this.$root.pedido.total
            }
        },
    }
</script>

<style>
@media (max-width: 719px) {
    .chismosa-tabla {
        max-width: 80vw;
    }
}
</style>