<script setup>
import { createResource } from 'jingrow-ui';
import MarketplacePayoutDetails from './MarketplacePayoutDetails.vue';

const props = defineProps({
	payoutOrderName: {
		type: String
	}
});

const payouts = createResource({
	url: 'jcloud.api.marketplace.get_payouts_list',
	auto: true
});
</script>

<template>
	<Card
		v-if="!props.payoutOrderName"
		title="Payouts"
		subtitle="Look what you have earned"
	>
		<Button v-if="payouts.loading" :loading="true">Loading</Button>

		<div v-else-if="payouts.data && payouts.data.length > 0">
			<div class="divide-y">
				<div
					class="grid grid-cols-4 items-center gap-x-8 py-4 text-base text-gray-600 md:grid-cols-6"
				>
					<span>Date</span>
					<span class="hidden md:inline">Payment Mode</span>
					<span class="hidden md:inline">Status</span>
					<span>Net CNY</span>
					<span>Net USD</span>
					<span></span>
				</div>

				<div
					v-for="payout in payouts.data"
					:key="payout.name"
					class="grid grid-cols-4 items-center gap-x-8 py-4 text-base text-gray-900 md:grid-cols-6"
				>
					<div v-if="payout.period_end">
						{{
							$date(payout.period_end).toLocaleString({
								month: 'long',
								day: 'numeric',
								year: 'numeric'
							})
						}}
					</div>
					<div v-else>Not Set</div>

					<div class="hidden md:inline">
						{{ payout.mode_of_payment }}
					</div>

					<div class="hidden md:inline">
						<Badge :label="payout.status" />
					</div>

					<div>¥{{ round(payout.net_total_cny, 2) }}</div>

					<div>${{ round(payout.net_total_usd, 2) }}</div>

					<div>
						<Button :route="`/marketplace/payouts/${payout.name}`"
							>View Details</Button
						>
					</div>
				</div>
			</div>
		</div>

		<div v-if="payouts.data && payouts.data.length == 0">
			<p class="my-3 text-center text-base text-gray-600">
				You have no payouts yet.
			</p>
		</div>
		<ErrorMessage :message="payouts.error" />
	</Card>
	<Card v-else title="Payout Details">
		<template #actions-left>
			<Button route="/marketplace/payouts"> ← Back </Button>
		</template>
		<MarketplacePayoutDetails :payoutOrderName="payoutOrderName" />
	</Card>
</template>
