<template>
    <div class="container table-container chismosa-container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
        <table v-show="this.subpedido.productos.length != 0" class="table is-fullwidth 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 de Transporte">B. Transporte</abbr></th>
                <th>{{ this.subpedido.bonos_de_transporte }}</th>
                <th>{{ this.subpedido.subtotal_bonos_de_transporte }}</th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Total total</th>
                <th></th>
                <th>{{ this.subpedido.total }}</th>
                <th></th>
                <th></th>
            </tr>
            </tfoot>
            <tbody>
            <producto-row v-for="producto in this.subpedido.productos" :producto="producto" :key="producto.id"></producto-row>
            </tbody>
        </table>
        <p class="has-text-centered" v-show="this.subpedido.productos.length == 0">Compa, todavía no agregaste nada a la chismosa.</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                subpedido: {
                    productos:[]
                },
                init: true,
                visible: false
            }
        },
        computed: {
            animation: function() {
                return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
            }
        },
        beforeCreate() {
            axios.get("/subpedidos/obtener_sesion").then(response => {
                this.subpedido = response.data.subpedido;
                this.fetchSubpedido();
            });
        },
        methods: {
            fetchSubpedido() {
                axios.get("/api/subpedidos/" + this.subpedido.id)
                    .then(response => {
                        this.subpedido = response.data.data;
                    });
            }
        },
        mounted() {
            Event.$on('sync-chismosa', (subpedido) =>  {
                this.subpedido = subpedido;
            });
            Event.$on('toggle-chismosa', () => {
                this.init = false;
                this.visible = !this.visible;
                var main = document.getElementById("main");
                if (this.visible) main.classList.add("chisma-abierta");
                else main.classList.remove("chisma-abierta");
            });
        }
    }
</script>

<style>
    .chismosa-container {
        top: 6.5rem;
        max-height: 21rem;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
        position: fixed;    
        z-index: 15;
    }
</style>