<template>
	<div class="px-60 py-6">
		<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
			<!-- 添加 Mpesa 详情 -->
			<div
				v-if="$team.pg.country === 'Kenya'"
				class="flex flex-col gap-2 rounded-md border p-4 shadow"
			>
				<div class="flex justify-between items-center text-sm text-gray-700">
					<div>M-Pesa 快速凭证</div>
					<Button @click="showAddMpesaDialog = true">编辑</Button>
				</div>
				<div class="overflow-hidden text-ellipsis text-base font-medium">
					<span class="font-normal text-gray-600">{{
						mpesaSetupId || '未设置'
					}}</span>
				</div>
			</div>

			<AddMpesaCredentials
				v-model="showAddMpesaDialog"
				@closeDialog="showAddMpesaDialog = false"
			/>
			<!-- M-Pesa 添加结束 -->

			<!-- 添加支付网关 -->
			<div class="flex flex-col gap-2 rounded-md border p-4 shadow">
				<div class="flex justify-between items-center text-sm text-gray-700">
					<div>支付网关</div>
					<Button
						@click="showAddPaymentGatewayDialog = true"
						:disabled="!Boolean(mpesaSetupId)"
						>编辑</Button
					>
				</div>
				<div class="overflow-hidden text-ellipsis text-base font-medium">
					<span class="font-normal text-gray-600">{{
						paymentGatewayID || '未设置'
					}}</span>
				</div>
			</div>
			<!-- 支付网关添加结束 -->

			<AddPaymentGateway
				v-model="showAddPaymentGatewayDialog"
				@closeDialog="showAddPaymentGatewayDialog = false"
			/>

			<!--提交支付交易到 Jingrow-->
			<div class="flex flex-col gap-2 rounded-md border p-4 shadow">
				<div class="flex justify-between items-center text-sm text-gray-700">
					<div>合作伙伴支付结算</div>
					<Button @click="showPartnerPaymentPayout = true">编辑</Button>
				</div>
				<div class="overflow-hidden text-ellipsis text-base font-medium">
					<span class="font-normal text-gray-600">未设置</span>
				</div>
			</div>
			<!--支付交易结束-->

			<!-- 父组件 -->
			<PartnerPaymentPayout
				v-model="showPartnerPaymentPayout"
				@closeDialog="showPartnerPaymentPayout = false"
			/>
		</div>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
	name: 'LocalPaymentSetup',
	components: {
		AddMpesaCredentials: defineAsyncComponent(
			() => import('../billing/mpesa/AddMpesaCredentials.vue'),
		),
		AddPaymentGateway: defineAsyncComponent(
			() => import('../billing/mpesa/AddPaymentGateway.vue'),
		),
		PartnerPaymentPayout: defineAsyncComponent(
			() => import('../billing/mpesa/PartnerPaymentPayout.vue'),
		),
	},
	data() {
		return {
			showAddMpesaDialog: false,
			showAddPaymobDialog: false,
			showAddPaymentGatewayDialog: false,
			showPartnerPaymentPayout: false,
			mpesaSetupId: '',
			paymentGatewayID: '',
		};
	},
	resources: {
		fetchLocalPaymentSetupDetails() {
			return {
				url: 'jcloud.api.partner.get_local_payment_setup',
				onSuccess(data) {
					this.mpesaSetupId = data.mpesa_setup;
					this.paymentGatewayID = data.payment_gateway;
				},
				auto: true,
			};
		},
	},
};
</script>