eiru_pos/src/components/payment/cash/PaymentAmount.vue

<template lang="pug">
    form.payment-amount-form
        .payment-form-separator
            h3 Detalles del Pago
            hr
        .payment-amount-item
            label.payment-label Monto a pagar
            input.payment-input(readonly :value="formatTotal()")
        .payment-amount-item
            label.payment-label Monto recibido
            input.payment-input(:value="paid" v-model="paid" autofocus)
        hr.result-separator
        .payment-amount-item
            label.payment-label Monto a devolver
            input.payment-input(readonly :value="formatResidual()")
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        computed: {
            paid: {
                get() {
                    return accounting.formatMoney(this.amountPaid, this.currencySymbol, 0, '.', ',')
                },
                set(value) {
                    value = accounting.unformat(value, ',')
                    
                    this.changeAmountPaid(value)
                    this.calculateResidual()
                }
            },
            ...mapGetters([
                'total',
                'currencySymbol',
                'amountPaid'
            ])
        },
        methods: {
            formatTotal() {
                return accounting.formatMoney(this.total, this.currencySymbol, 0, '.', ',')
            },
            formatResidual() {
                return accounting.formatMoney(this.residual, this.currencySymbol, 0, '.', ',')
            },
            calculateResidual() {
                this.residual = this.amountPaid >= this.total ? this.amountPaid - this.total : 0
            },
            ...mapActions([
                'changeAmountPaid'
            ])
        },
        data() {
            return {
                residual: 0
            }
        }
    }
</script>

<style lang="sass">
    .payment-amount-form
        width: calc(100% - 450px)
        height: 100%
        margin-right: 50px
        padding: 35px
        background: #f5f5f5

        .payment-amount-item
            width: 100%
            height: 45px
            margin-bottom: 15px

            .payment-label
                width: 250px
                height: 45px
                font-size: 14pt

            .payment-input
                width: 350px
                height: 45px
                font-size: 24pt
                border-radius: 0
                text-align: right

        .payment-form-separator
            h3
                color: #9e9e9e
                font-size: 8pt
            hr
                margin-top: 5px

        .result-separator
            margin: 30px 165px 30px 250px
            border-top: 1px solid #bdbdbd
</style>