<template>
    <div class="row m-b-10 parentContainer ">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row align-items-center pointer p-b-10 b-b b-grey" @click="activate">
                        <div class="col-auto p-r-0">
                            <div class="b-grey b-a fs-10 btn-rounded icon-thumbnail icon-25 m-r-0" :class="[{ 'bg-primary': active }, { 'bg-transparent': !active }]">
                                <i class="fa fa-check text-white fs-12 fa-fw"></i>
                            </div>
                        </div>
                        <div class="col p-t-5 p-b-5">
                            <div class="row">
                                <div class="col">
                                    <div class="row m-b-10">
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">Date</div>
                                            <div class="font-heading fs-10">
                                                {{item.payment_method === 5 || item.payment_method === 4 ? item.updated_at : item.documents.created_at}}
                                            </div>
                                        </div>
                                        <div class="col text-right">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="font-heading fs-10 muted all-caps">timer</div>
                                                    <div class="font-heading fs-12 bold" :class="[{ 'text-success': item.interval.value === '+' }, { 'text-danger': item.interval.value === '-' }]">
                                                        {{ item.interval.value }}
                                                        {{ item.interval.duration }}
                                                        days
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row" v-if="item.booking.bank.bank_name.includes('浙江网商银行')">
                                                <div class="col">
                                                    <span class="rounded badge-danger" style="padding: 5px">1688</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-b-10">
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">reference</div>
                                            <div class="font-heading fs-10">
                                                <a :href="route('booking.details', item.booking.marking)">{{ item.booking.marking }}</a>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">Marking</div>
                                            <div class="font-heading fs-10">
                                                <a :href="route('customer.profile', item.booking.company.reference)">{{ item.booking.company.reference }}</a>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">Currency</div>
                                            <div class="font-heading fs-10">
                                                <span class="flag-icon" :class="'flag-icon-' + item.original_currency.country.short_code.toLowerCase()"></span> {{ item.original_currency.short_code }}
                                            </div>
                                        </div>
                                        <!-- <div class="col text-right" v-if="totalRefunds !== 0">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="font-heading fs-10 muted all-caps">Refunded Amount</div>
                                                    <div class="font-heading fs-14 text-danger bold">
                                                        {{(Math.round((totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                    </div>
                                    <div class="row">
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">Payment Proof</div>
                                            <div class="row no-margin" v-if="item.payment_method !== 5 && item.payment_method !== 4">
                                                <div v-for="file in item.documents.files" :key="file.id" class="col-auto no-padding">
                                                    <document-file-viewer-component :file="file">
                                                        <template #button>
                                                            <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
                                                                <i class="fa fa-file-image-o fs-10"></i>
                                                            </div>
                                                        </template>
                                                    </document-file-viewer-component>
                                                </div>
                                            </div>
                                            <div class="row no-margin" v-if="item.payment_method === 5">
                                                <div class="col no-padding">
                                                    <a :href="route('billplz.bill', item.payment_reference)" target="_blank">
                                                        <div class="icon-thumbnail fs-11 text-white icon-25 bg-complete btn-rounded float-left m-r-5">
                                                            Bz
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="row no-margin" v-if="item.payment_method ===4">
                                                <div class="col no-padding">
                                                    <div class="font-heading fs-10">{{item.payment_reference}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">Service</div>
                                            <div class="font-heading fs-10">
                                                {{ item.booking.service.name }}
                                            </div>
                                        </div>
                                        <div class="col text-right">
                                            <div class="font-heading fs-10 muted all-caps">Amount</div>
                                            <div class="font-heading fs-14 text-success bold">
                                                {{ formatAmount(item.original_amount - totalRefunds) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-t-10">
                                        <div class="col">
                                            <p>{{ item.recipient_bank_account.holder_name }}</p>
                                            <p>{{ item.recipient_bank_account.bank_name }}<span class="m-l-5">({{ item.recipient_bank_account.bank_branch }})</span></p>
                                            <p><span class="text-primary">{{ formattedAccountNumber }}</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import route from '@/general/functions/router';
import { useComponentHandler } from '@/composables/useComponentHandler';

const emit = defineEmits<{
    (e: 'select', value: any): void;
}>();

const props = defineProps<{
    data: Record<string, any>;
}>();

const { item } = useComponentHandler(props);
const active = ref(false);

const totalRefunds = computed(() => {
    return (props.data.transaction_refunds ?? []).reduce((total: number, refund: Record<string, any>) => {
        return total + (refund.status === 2 ? refund.original_amount : 0);
    }, 0);
});

const formattedAccountNumber = computed(() => {
    const accountNumber = item.value.recipient_bank_account.account_no;

    if (item.value.recipient_bank_account.type === 3) {
        return accountNumber;
    }

    return accountNumber.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});

const formatAmount = (value: number) => {
    return (Math.round((Number(value) + Number.EPSILON) * 100) / 100)
        .toFixed(2)
        .toString()
        .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

const activate = () => {
    active.value = !active.value;
    emit('select', item.value);
};
</script>
