<template>
    <div :class="show_devoluciones ? '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="toggleDevoluciones()"></button>
            </header>
            <section class="modal-card-body">
                <div class="field has-addons is-centered is-thin-centered">
                    <p class="control">
                        Total:
                        <input id="totalControl" class="input" type="number" v-model="totalControl"
                               style="text-align: center">
                    </p>
                </div>
                <div class="field has-addons is-centered is-thin-centered">
                    <p class="control">
                        Notas:
                        <input id="notasControl" class="input" type="text" v-model.text="notasControl">
                    </p>
                </div>
            </section>
            <footer class="modal-card-foot">
                <button class="button is-success" @click="modificar">Aceptar</button>
                <button class="button" @click.capture="toggleDevoluciones()">Cancelar</button>
            </footer>
        </div>
    </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";

export default {
    name: 'DevolucionesModal',
    data() {
        return {
            totalControl: 0,
            notasControl: "",
        }
    },
    mounted() {
        this.actualizar();
    },
    watch: {
        cantidadEnChismosa() {
            this.actualizar();
        },
        notasEnChismosa() {
            this.actualizar();
        }
    },
    computed: {
        ...mapState('ui', ["show_devoluciones"]),
        ...mapState('pedido', ["devoluciones_total", "devoluciones_notas"])
    },
    methods: {
        ...mapMutations('ui', ["toggleDevoluciones"]),
        ...mapActions('pedido', ["modificarDevoluciones"]),
        modificar() {
            this.modificarDevoluciones({ monto: this.totalControl, notas: this.notasControl });
            this.toggleDevoluciones();
        },
        actualizar() {
            this.totalControl = this.devoluciones_total;
            this.notasControl = this.devoluciones_notas;
        },
    },
}
</script>
