Vue.component('chismosa', {
    template: `
        <div class="container">
            <table class="table is-fullwidth">
                <thead>
                <tr>
                    <th><abbr title="Producto">Prod</abbr></th>
                    <th><abbr title="Cantidad">Cant</abbr></th>
                    <th><abbr title="Precio Total">$</abbr></th>
                    <th>Editar</th>
                    <th><abbr title="Eliminar">X</abbr></th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th><abbr title="Bonos de Transporte">BTR</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>
        </div>
    `,
    data() {
        return {
            subpedido: {
                productos:[]
            },
        }
    },
    computed: {
        /* TODO: tener el camino que se había hecho antes de abrir la chismosa para volver atrás */
        miga: function() {
            return {
                nombre: "Chismosa de " + this.subpedido.nombre,
                href: "/chismosa"
            }
        }
    },
    beforeCreate() {
        axios.get("/subpedidos/obtener_sesion").then(response => {
            this.subpedido = response.data.subpedido;
            this.fetchSubpedido();
            Event.$emit("migas-agregar",this.miga);
        });
    },
    methods: {
        fetchSubpedido() {
            axios.get("/api/subpedidos/" + this.subpedido.id)
                .then(response => {
                    this.subpedido = response.data.data;
                });
        }
    }
});

Vue.component('producto-row', {
    template: `
    <tr>
            <th>{{ this.producto.nombre }}</th>
            <td>{{ this.producto.pivot.cantidad }}</td>
            <td>{{ this.producto.pivot.total }}</td>
            <td>ACÁ VA BOTON PA EDITAR</td>
            <td>ACÁ VA BOTON PA BORRAR</td>
    </tr>
    `,
    props: {
        producto: Object
    }
})