<template>
    <div class="row m-l-0 m-b-10 m-r-0 parentContainer" :class="[{'b-a': item.status === 4}, {'b-danger': item.status === 4}, {'b-a': item.status === 5}, {'b-danger': item.status === 5}]" >
        <div class="col">
            <div class="row" v-if="!item.transaction_bill">
                <div class="col">
                    <div class="row bg-white parentContainer">
                        <div class="col p-t-10 p-b-10 p-r-0" :class="[{'bg-master-lighter': item.status === 1 && item.type !== 6}, {'bg-white': item.status !== 1 && item.status !== 4}, {'bg-warning-lighter': item.type === 6}]">
                            <div class="row m-b-5">
                                <div class="col-auto">
                                    <div class="font-heading fs-8 muted all-caps">Status</div>
                                    <div class="font-heading fs-10 bold" :class="[{'text-danger': item.status === 1 || item.status === 4}, {'text-success': item.status !== 1 && item.status !== 4}]">
                                        {{ item.status === 1 ? 'Pending Verification' : item.status === ( 4 || 5) ? 'Rejected' : 'Expired'}}
                                    </div>
                                </div>
                                <div class="col-auto p-l-0">
                                    <div class="font-heading fs-8 muted all-caps">Payment Amount</div>
                                    <div class="font-heading fs-10 bold">
                                        {{item.currency.short_code}} {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                    </div>
                                </div>
                                <div class="col-auto p-l-0">
                                    <div class="font-heading fs-8 muted all-caps">Bill Number</div>
                                    <div class="font-heading fs-10 bold">
                                        {{ item.bill_no }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        mixins: [componentHandler]
    }
</script>
