eiru_payments/src/components/payments/VoucherTicket.vue

<template lang="pug">
    .voucher-ticket
        .voucher-ticket-wrapper
            form.voucher-ticket-from
                .voucher-ticket-from-separator
                    h3 Detalles de pagos
                    hr
                .voucher-ticket-from-item
                    label.voucher-ticket-from-label Cliente
                    label.voucher-ticket-from-input {{ customer.name|| '' }}
                .voucher-ticket-from-item
                    label.voucher-ticket-from-label Factura número
                    label.voucher-ticket-from-input {{ invoice.number || '' }}
                .voucher-ticket-from-grid-header
                    label.voucher-ticket-from-grid-header-left Vencimiento
                    label.voucher-ticket-from-grid-header-right Monto
                .voucher-ticket-from-grid
                    .voucher-ticket-from-grid-item(v-for="line in items")
                        label.voucher-ticket-from-grid-item-left {{ line.dateMaturity | dateFormat}}
                        label.voucher-ticket-from-grid-item-right {{ line.amountResidualCurrency | currency(...invoice.currency) }}
                .voucher-ticket-from-item-total
                    label.voucher-ticket-from-label-total Total
                    .ticket-currency-total-wrapper
                        .ticket-currency-total-item(v-for="item in currencyAmount")
                            h3.currency-total-symbol {{ item.symbolCurrency }}
                            input.currency-total-amount(readonly :value='item.amount | currency( ...item)')
                        //- .ticket-currency-total-item
                    //- label.voucher-ticket-from-input-total {{ totalPayments | currency(...invoice.currency) }}
                //- .voucher-ticket-from-item-total
                //-     label.voucher-ticket-from-label-total Pagado
                //-     label.voucher-ticket-from-input-total {{ paymentTotal | currency(...invoice.currency) }}
                //- .voucher-ticket-from-item-total
                //-     label.voucher-ticket-from-label-total Saldo
                //-     label.voucher-ticket-from-input-total {{ paymentBalance | currency(...invoice.currency) }}
</template>

<script>
    export default {
        props: {
            customer: {
                type: String,
                default: ''
            },
            invoice: {
                type: String,
                default: ''
            },
            currencyAmount :{
                    type: Array,
                    default: [],
                    // default: [{
                    //     symbolCurrency: 'G$',
                    //     amount: 999999999,
                    //     symbol: ' ',
                    //     position: 'before',
                    //     rateSilent: 0,
                    //     thousandsSeparator: '.',
                    //     decimalSeparator: ',',
                    //     decimalPlaces: 0
                    // }],
                    // {
                    //     symbolCurrency: '$',
                    //     amount: 999999999,
                    //     symbol: ' ',
                    //     position: 'before',
                    //     rateSilent: 0,
                    //     thousandsSeparator: '.',
                    //     decimalSeparator: ',',
                    //     decimalPlaces: 0,
                    //     decimalZeros: false
                    // }

            },
            // paymentBalance: {
            //     type: Number,
            //     default: 0
            // },
            // paymentTotal: {
            //     type: Number,
            //     default: 0
            // },
            // totalPayments: {
            //     type: Number,
            //     default: 0
            // },
            items: {
                type: [],
                default: []
            },
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .voucher-ticket
        width: 500px
        height: 100%
        font-size: 8pt
        display: flex
        .voucher-ticket-wrapper
            width: 100%
            height: 460px
            margin: 10px
            border: 1px solid #d3d3d3
            // background: $app-light-color
            display: inline-block
            .voucher-ticket-from
                width: 100%
                height: 100%
                .voucher-ticket-from-separator
                    h3
                        color: #9e9e9e
                        font-size: 16pt
                        margin-left: 10px
                        margin-right: 10px
                        margin-top: 10px
                        margin-bottom: 5px
                        text-align: center
                    hr
                        margin-top: 3px
                        margin-left: 10px
                        margin-right: 10px
                .voucher-ticket-from-item
                    width: 100%
                    height: 35px
                    margin-bottom: 5px
                    .voucher-ticket-from-label
                        width: 150px
                        height: 35px
                        font:
                            size: 10pt
                            weight: bold
                        padding-left: 10px
                    .voucher-ticket-from-input
                        width: calc(100% - 160px)
                        height: 25px
                        font:
                            size: 10pt
                            weight: bold
                        border-left: 0px
                        border-top: 0px
                        border-right: 0px
                        border-bottom: 1px solid #dedede
                .voucher-ticket-from-grid-header
                    width: calc(100% - 20px)
                    height: 30px
                    margin: 0px 10px
                    border: 1px solid #d3d3d3
                    background: #f5f5f5
                    .voucher-ticket-from-grid-header-left, .voucher-ticket-from-grid-header-right
                        width: calc(50% - 10px)
                        height: 30px
                        font:
                            size: 10pt
                        padding-left: 10px
                        margin-top: 5px
                    .voucher-ticket-from-grid-header-left
                        margin-left: 5px
                        text-align: left
                    .voucher-ticket-from-grid-header-right
                        margin-right: 5px
                        text-align: center
                .voucher-ticket-from-grid
                    width: calc(100% - 20px)
                    height: 160px
                    overflow-y: auto
                    margin: 0px 10px
                    border: 1px solid #d3d3d3
                    .voucher-ticket-from-grid-item
                        width: calc(100% - 10px )
                        height: 30px
                        padding-top: 1px
                        border-bottom: 1px solid #dedede
                        margin-left: 5px
                        margin-right: 5px
                        .voucher-ticket-from-grid-item-left, .voucher-ticket-from-grid-item-right
                            width: calc(50% - 10px)
                            height: 30px
                            font:
                                size: 10pt
                            padding-left: 10px
                            margin-top: 5px
                        .voucher-ticket-from-grid-item-left
                            text-align: left
                        .voucher-ticket-from-grid-item-right
                            text-align: right
                            padding-right: 15px
                .voucher-ticket-from-item-total
                    width: 100%
                    height: 25px
                    .voucher-ticket-from-label-total
                        width: 40%
                        height: 25px
                        margin-top: 10px
                        font:
                            size: 15pt
                            weight: bold
                        text-align: right
                        padding-right: 15px
                        float: left
                    .ticket-currency-total-wrapper
                        width: 50%
                        height: 115px
                        float: right
                        margin: 5px 10px 10px 10px
                        overflow-y: auto
                        border-left: 1px solid #d3d3d3
                        .ticket-currency-total-item
                            width: 100%
                            height: 25px
                            margin-top: 2px
                            .currency-total-symbol
                                width: 30px
                                height: 100%
                                font-size: 15pt
                                text-align: center
                                float: left
                                margin: 0px
                                padding-left: 5px
                                padding-right: 5px
                            .currency-total-amount
                                width: calc(100% - 35px)
                                height: 100%
                                float: right
                                font-size: 15pt
                                text-align: right
                                margin-right: 5px
                                padding-right: 10px
                                border-top: 0px
                                border-left: 0px
                                border-right: 0px

                        // display: inline-block
                    // .voucher-ticket-from-input-total
                    //     width: calc(40% - 10px)
                    //     height: 25px
                    //     margin-top: 15px
                    //     text-align: right
                    //     padding-right: 15px
                    //     font:
                    //         size: 10pt
                    //         weight: bold
                    //     border-bottom: 1px solid #dedede
</style>