<template>
    <tr>
        <td class="v-align-middle">
            <p>{{item.documents ? item.documents.created_at : item.updated_at}}</p>
        </td>
        <td class="v-align-middle ">
            <p v-if="item.booking.bank.bank_name.includes('浙江网商银行')">1688.com, </p>{{item.interval.value}}  {{item.interval.duration}} days
        </td>
        <td class="v-align-middle ">
            <p>{{item.booking.marking}}</p>
        </td>
        <td class="v-align-middle ">
            <p>{{item.booking.service.name}}</p>
        </td>
        <td class="v-align-middle ">
            <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">{{item.recipient_bank_account.type === 3 ? item.recipient_bank_account.account_no : item.recipient_bank_account.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()}}</span></p>
        </td>
        <td class="v-align-middle">
            <p>{{item.booking.company_reference}}</p>
        </td>
        <td class="v-align-middle">
            <p>{{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</p>
        </td>
    </tr>
</template>

<script setup lang="ts">
import { useComponentHandler } from '@/composables/useComponentHandler';

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

const { item } = useComponentHandler(props);
</script>
