<template>
	<div v-bind:class="visible ? 'is-active modal' : 'modal'">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">Devoluciones</p>
                <button class="delete" aria-label="close" @click.capture="cerrar"></button>
            </header>
            <section class="modal-card-body">
                <div class="field has-addons is-centered is-thin-centered">
                    <p class="control">
                        Total:
                        <input id="total" class="input" type="number" v-model="total" style="text-align: center">
                    </p>
                </div>
                <div class="field has-addons is-centered is-thin-centered">
                    <p class="control">
                        Notas:
                        <input id="notas" class="input" type="text" v-model.text="notas">
                    </p>
                </div>
            </section>
            <footer class="modal-card-foot">
                <button class="button is-success" @click="modificar">Aceptar</button>
                <button class="button" @click.capture="cerrar">Cancelar</button>
            </footer>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                total: 0,
                notas: "",
            }
        },
        computed: {
            miga: function() {
                return {
                    nombre: "Devoluciones",
                    href: "#devoluciones",
                }
            },
        },
        methods: {
		    cerrar() {
		        this.visible = false;
		        Event.$emit("migas-pop");
		    },
            modificar() {
                Event.$emit('sync-devoluciones', this.total, this.notas);
                this.cerrar();
            }
        },
        mounted() {
            Event.$on('modificar-devoluciones', () => {
                this.visible = true;
                this.total = this.$root.pedido.devoluciones_total;
                this.notas = this.$root.pedido.devoluciones_notas;
                Event.$emit("migas-agregar", this.miga);
            });
        },
    }
</script>