<template>
	<AlertBanner :title="outstandingBalanceMessage" type="warning">
		<Button class="ml-auto" route="/billing" variant="outline">
			立即支付
		</Button>
	</AlertBanner>
</template>
<script>
import AlertBanner from './AlertBanner.vue';

export default {
	name: 'AlertUnpaidInvoices',
	components: { AlertBanner },
	props: {
		amount: {
			type: Number,
			required: true
		},
		currency: {
			type: String
		}
	},
	computed: {
		outstandingBalanceMessage() {
			return `您的账户当前有未结余额 ${this.$format.userCurrency(
				this.amount
			)}。请结清余额以避免网站被暂停。`;
		}
	}
};
</script>