<template>
    <div class="fixed-right mr-3 ml-3">
        <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_transporte }}</th>
                <th class="has-text-right">{{ total_transporte }}</th>
            </tr>
            <tr v-if="grupo_de_compra.devoluciones_habilitadas">
                <th><p>Devoluciones</p></th>
                <td>
                    <abbr :title="devoluciones_notas">{{ notas_abreviadas }}</abbr>
                    <button @click.capture="toggleDevoluciones()" class="button is-warning is-small">
                        <span class="icon">
                            <i class="fas fa-edit"></i>
                        </span>
                    </button>
                </td>
                <th class="has-text-right">-{{ devoluciones_total }}</th>
            </tr>
            <tr>
                <th>Total total</th>
                <th></th>
                <th class="has-text-right">{{ total }}</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="!mostrar_tabla">
            Compa, todavía no agregaste nada a la chismosa.
        </p>
    </div>
</template>

<script>
import ProductoRow from "./ProductoRow.vue";
import { mapMutations, mapState } from "vuex";

export default {
    components: { ProductoRow },
    computed: {
        ...mapState('pedido',[
            "grupo_de_compra",
            "productos",
            "total",
            "total_transporte",
            "cantidad_transporte",
            "devoluciones_total",
            "devoluciones_notas",
        ]),
        notas_abreviadas() {
            return this.devoluciones_notas.substring(0, 15) + (this.devoluciones_notas.length > 15 ? "..." : "");
        },
        mostrar_tabla() {
            return this.productos?.length !== 0;
        },
    },
    methods: {
        ...mapMutations('ui',["toggleDevoluciones"]),
    },
}
</script>

<style>
.tabla-chismosa {
    width: 100%;
}

.fixed-right {
    position: fixed;
    overflow-y: auto;
    max-height: 81vh;
}
</style>