<template>
	<div>
		<!-- 金额 -->
		<div>
			<FormControl
				:label="`金额 (最低金额: ${maximumAmount})`"
				class="mb-3"
				v-model.number="creditsToBuy"
				name="amount"
				autocomplete="off"
				type="number"
				:max="maximumAmount"
			>
				<template #prefix>
					<div class="grid w-4 place-items-center text-sm text-gray-700">
						{{ team.pg.currency === 'CNY' ? '¥' : '$' }}
					</div>
				</template>
			</FormControl>
			<FormControl
				v-if="team.pg.currency === 'CNY'"
				:label="`总金额`"
				disabled
				:modelValue="totalAmount"
				name="total"
				autocomplete="off"
				type="number"
			>
				<template #prefix>
					<div class="grid w-4 place-items-center text-sm text-gray-700">
						{{ team.pg.currency === 'CNY' ? '¥' : '$' }}
					</div>
				</template>
			</FormControl>
		</div>

		<!-- 支付网关 -->
		<div class="mt-4">
			<div class="text-xs text-gray-600">选择支付网关</div>
			<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
				<Button
					v-if="team.pg.currency === 'CNY' || team.pg.razorpay_enabled"
					size="lg"
					:class="{
						'border-[1.5px] border-gray-700': paymentGateway === 'Razorpay'
					}"
					@click="paymentGateway = 'Razorpay'"
				>
					<RazorpayLogo class="w-24" />
				</Button>
				<Button
					size="lg"
					:class="{
						'border-[1.5px] border-gray-700': paymentGateway === 'Stripe'
					}"
					@click="paymentGateway = 'Stripe'"
				>
					<StripeLogo class="h-7 w-24" />
				</Button>
			</div>
		</div>

		<!-- 支付按钮 -->
		<BuyPartnerCreditsStripe
			v-if="paymentGateway === 'Stripe'"
			:amount="creditsToBuy"
			:maximumAmount="maximumAmount"
			@success="() => emit('success')"
			@cancel="show = false"
		/>

		<BuyPartnerCreditsRazorpay
			v-if="paymentGateway === 'Razorpay'"
			:amount="creditsToBuy"
			:maximumAmount="maximumAmount"
			type="Partnership Fee"
			@success="() => emit('success')"
			@cancel="show = false"
		/>
	</div>
</template>
<script setup>
import BuyPartnerCreditsStripe from './BuyPartnerCreditsStripe.vue';
import BuyPartnerCreditsRazorpay from './BuyPartnerCreditsRazorpay.vue';
import RazorpayLogo from '../../logo/RazorpayLogo.vue';
import StripeLogo from '../../logo/StripeLogo.vue';
import { FormControl, Button, createDocumentResource } from 'jingrow-ui';
import { ref, computed, inject, defineEmits } from 'vue';

const emit = defineEmits(['success']);

const team = inject('team');

const jcloudSettings = createDocumentResource({
	pagetype: 'Jcloud Settings',
	name: 'Jcloud Settings',
	auto: true,
	initialData: {}
});

const maximumAmount = computed(() => {
	if (!jcloudSettings.pg) return 0;
	const feeAmount =
		team.pg?.currency == 'CNY'
			? jcloudSettings.pg.partnership_fee_cny
			: jcloudSettings.pg.partnership_fee_usd;
	return Math.ceil(feeAmount);
});

const creditsToBuy = ref(maximumAmount.value);
const paymentGateway = ref('');

const totalAmount = computed(() => {
	const _creditsToBuy = creditsToBuy.value || 0;

	if (team.pg?.currency === 'CNY') {
		return (
			_creditsToBuy +
			_creditsToBuy * (team.pg.billing_info.gst_percentage || 0)
		).toFixed(2);
	} else {
		return _creditsToBuy;
	}
});
</script>