<template>
    <div class="column is-one-third">
        <div class="fixed-right">
            <table v-show="mostrar_tabla" class="table is-striped is-bordered tabla-chismosa is-narrow">
                <thead>
                <tr>
                    <th>Producto</th>
                    <th>Cantidad</th>
                    <th><abbr title="Precio Total">$</abbr></th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
                    <th class="has-text-right">{{ cantidad_bonos_transporte }}</th>
                    <th class="has-text-right">{{ total_bonos_transporte }}</th>
                </tr>
                <tr v-if="this.$root.devoluciones">
                    <th><p>Devoluciones</p></th>
                    <td>
                        <abbr :title="notas_devoluciones">{{ notas_devoluciones_abbr }}</abbr>
                        <button @click.capture="modificarDevoluciones()" class="button is-warning is-small">
                            <span class="icon">
                                <i class="fas fa-edit"></i>
                            </span>
                        </button>
                    </td>
                    <th class="has-text-right">-{{ devoluciones }}</th>
                </tr>
                <tr>
                    <th>Total total</th>
                    <th></th>
                    <th class="has-text-right">{{ total }}</th>
                </tr>
                </tfoot>
                <tbody>
                <pedidos-producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></pedidos-producto-row>
                </tbody>
            </table>
            <p class="has-text-centered" v-show="!mostrar_tabla">
                Compa, todavía no agregaste nada a la chismosa.
            </p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mostrar_tabla: false,
                cantidad_bonos_transporte: 0,
                total_bonos_transporte: 0,
                devoluciones: 0,
                notas_devoluciones: "",
                notas_devoluciones_abbr: "",
                total: 0,
                productos: [],
            }
        },
        mounted() {
            Event.$on('pedido-actualizado', this.pedidoActualizado);
            Event.$on('toggle-chismosa', this.pedidoActualizado);
        },
        methods: {
            pedidoActualizado: function() {
                this.mostrar_tabla = this.$root.productos.length > 0;
                this.cantidad_bonos_transporte = this.cantidadBonosDeTransporte();
                this.total_bonos_transporte = this.totalBonosDeTransporte();
                this.devoluciones = this.$root.pedido.devoluciones_total;
                this.notas_devoluciones = this.$root.pedido.devoluciones_notas;
                this.notas_devoluciones_abbr = this.notas_devoluciones.substring(0, 15);
                if (this.notas_devoluciones.length > 15) {
                    this.notas_devoluciones_abbr += "...";
                }
                this.total = this.$limpiarInt(this.$root.devoluciones ? this.$root.pedido.total_menos_devoluciones : this.$root.pedido.total);
                this.productos = this.$root.productos
            },
            modificarDevoluciones: function() {
                Event.$emit("modificar-devoluciones");
            },
            cantidadBonosDeTransporte: function() {
                return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte) / 15
            },
            totalBonosDeTransporte: function() {
                return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte)
            },
        },
    }
</script>

<style>
    .tabla-chismosa {
        width: 100%;
    }
    .fixed-right {
        position: fixed;
        overflow-y: auto;
        max-height: 81vh;
        margin-right: 20px;
    }
</style>