eiru_pos/src/components/payment/credit/PaymentCreditAmount.vue

<template lang="pug">
    form.payment-credit-form
        .payment-credit-form-separator
            h3 Detalles de la Entrega
            hr
        .payment-amount-item
            label.payment-label Monto entregado
            input.payment-input(:value="paid" v-model="paid" autofocus)
        .payment-credit-form-separator
            h3 Pagos Pendientes
            hr
        .payment-credit-form-table
            table
                thead
                    td
                        th Fecha de Pago
                        th Monto a pagar
</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)
                }
            },
            ...mapGetters([
                'total',
                'currencySymbol',
                'amountPaid'
            ])
        },
        methods: {
            formatTotal() {
                return accounting.formatMoney(this.total, this.currencySymbol, 0, '.', ',')
            },
            ...mapActions([
                'changeAmountPaid'
            ])
        },
        mounted() {
            this.changeAmountPaid(0)
        }
    }
</script>

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

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

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

        .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-credit-form-table
                width: 100%
                height: 250px
                border: 1px solid #d3d3d3

                table
                    width: 100%

                    td
                        height: 35px
                    thead
                        th
                            line-height: 35px
                            padding-left: 10px

                        th:nth-child(1)
                            width: 250px
                        th:nth-child(2)
                            width: 200px
</style>