<template>
	<div>
		<div v-if="pg" class="overflow-x-auto">
			<table
				class="text w-full border-separate border-spacing-y-2 text-base font-normal text-gray-900"
			>
				<thead class="bg-gray-100">
					<tr class="text-gray-600">
						<th class="rounded-l p-2 text-left font-normal">应用</th>
						<th class="rounded-l p-2 text-left font-normal">站点</th>
						<th class="whitespace-nowrap p-2 text-right font-normal">费率</th>
						<th class="whitespace-nowrap p-2 text-right font-normal">总计</th>
						<th class="rounded-r p-2 text-right font-normal">费用</th>
						<th class="rounded-r p-2 text-right font-normal">佣金</th>
						<th class="rounded-r p-2 text-right font-normal">净额</th>
					</tr>
				</thead>
				<tbody>
					<template v-for="(row, i) in pg.items" :key="row.idx">
						<tr>
							<td class="py-1 pl-2 pr-2">
								{{ row.document_name }}
							</td>
							<td class="py-1 pl-2 pr-2">
								{{ row.site }}
							</td>
							<td class="py-1 pl-2 pr-2 text-right">
								{{ formatCurrency(row.rate, row.currency) }} X
								{{ row.quantity }}
							</td>
							<td class="py-1 pl-2 pr-2 text-right">
								{{ formatCurrency(row.total_amount, row.currency) }}
							</td>
							<td class="py-1 pl-2 pr-2 text-right">
								{{ formatCurrency(row.gateway_fee, row.currency) }}
							</td>
							<td class="py-1 pl-2 pr-2 text-right">
								{{ formatCurrency(row.commission, row.currency) }}
							</td>
							<td class="py-1 pl-2 pr-2 text-right">
								{{ formatCurrency(row.net_amount, row.currency) }}
							</td>
						</tr>
					</template>
				</tbody>
				<tfoot>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td class="pb-2 pr-2 pt-4 text-right font-medium">总支出</td>
						<td class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-medium">
							{{ formatCurrency(pg.net_total_usd, 'USD') }} +
							{{ formatCurrency(pg.net_total_cny, 'CNY') }}
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
		<div class="py-20 text-center" v-if="$resources.invoice.loading">
			<Button :loading="true">加载中</Button>
		</div>
	</div>
</template>
<script>
export default {
	name: 'PayoutTable',
	props: ['payoutId'],
	resources: {
		invoice() {
			return {
				type: 'document',
				pagetype: 'Payout Order',
				name: this.payoutId
			};
		}
	},
	computed: {
		pg() {
			return this.$resources.invoice.pg;
		}
	},
	methods: {
		formatCurrency(value, currency) {
			return this.$format.currency(value, currency);
		}
	}
};
</script>