<template>
	<Dialog
		:options="{ title: `结算未结清发票` }"
		v-model="showDialog"
	>
		<template #body-content>
			<div class="prose text-base">
				您的账户有以下期间的未支付发票：
				<ul class="pt-2">
					<li
						class="font-semibold"
						v-for="invoice in $resources.unpaidInvoices.data"
					>
						{{
							date(invoice.period_end).toLocaleString({
								month: 'long',
								year: 'numeric'
							})
						}}
						-
						{{
							(invoice.currency === 'CNY' ? '¥ ' : '$ ') + invoice.amount_due
						}}
					</li>
				</ul>
				请在移除所有支付方式、切换到合作伙伴支付方式或停用账户之前，结算并支付这些发票。您可以<Link to="/billing/invoices/">在此</Link>查看发票详情并进行支付。支付可能需要最多2小时才能反映在您的发票上。
			</div>
		</template>
		<template #actions>
			<Button
				variant="solid"
				class="w-full"
				@click="$resources.finalizeInvoices.submit()"
			>
				结算发票
			</Button>
		</template>
	</Dialog>
</template>

<script>
import { date } from '../../utils/format';
import { toast } from 'vue-sonner';

export default {
	name: 'FinalizeInvoicesDialog',
	props: {
		msg: String
	},
	data() {
		return {
			showDialog: true
		};
	},
	resources: {
		finalizeInvoices: {
			url: 'jcloud.api.billing.finalize_invoices',
			onSuccess() {
				this.showDialog = false;
				toast.success('发票结算成功');
			}
		},
		unpaidInvoices: {
			url: 'jcloud.api.billing.unpaid_invoices',
			auto: true
		}
	},
	methods: {
		date
	}
};
</script>