eiru_payments/src/components/partner/PartnerDetailsInvoices.vue

<template lang="pug">
    .customer-form-item
        label(v-for="(invoice, index) in partnerInvoices" :key="invoice")
            span.form-label Factura
            label.form-label-number {{ invoice.number }}
            .table-header
                table
                    tbody
                        tr
                            td Vencimiento
                            td Total
                            td Saldo
            .table-body
                table
                    tbody
                        tr(v-for="moveline in partnerMoveLine[index]" :key="moveline")
                            td {{ formatDate(moveline.date_maturity) }}
                            td {{ formatNumber(moveline.debit) }}
                            td {{ formatNumber(moveline.amount_residual) }}
</template>

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

    export default {
        computed: mapGetters([
            'hasSelectedPartner',
            'selectedPartner',
            'partnerInvoices',
            'partnerMoveLine'
        ]),
        methods:{
            formatNumber(valor){
                return accounting.format(valor, 0,'.', ',')
            },
            formatDate(Fecha){
                return moment(Fecha).format('DD-MM-YYYY');
            },
            verifyDate(){
                return ".tr-Expired"
            }
        }
    }
</script>

<style lang="sass">
    .customer-form-item

        .form-label
            width: 65px
            height: 35px
            font-size: 14px
            font-weight: bold

        .form-label-number
            margin: 0px 0px 5px 9px
            font-size: 14px
            color: #0288d1

        .table-header
            table
                width: 308px
                height: 30px
                margin: 0px
                font-size: 10pt
                font-weight: bold

                tbody
                    tr
                        line-height: 30px
                        border-top: 1px solid #d3d3d3
                        border-bottom: 1px solid #d3d3d3

                        td
                            &:nth-child(1)
                                width: 110px
                                text-align: left

                            &:nth-child(2)
                                width: 100px
                                text-align: center

                            &:nth-child(3)
                                width: 100px
                                text-align: center

        .table-body
            width: 310px

            table
                width: 100%
                margin: 6px 0px
                font-size: 12px
                color: #727575

                tbody
                    tr
                        td
                            &:nth-child(1)
                                width: 110px
                                text-align: left

                            &:nth-child(2)
                                width: 100px
                                text-align: right

                            &:nth-child(3)
                                width: 100px
                                text-align: right

                        .tr-unexpired
                            color: #727575

                        .tr-Expired
                            color: red

</style>