<template>
	<Dialog :options="{ title: '添加支付网关', size: 'lg' }">
		<template #body-content>
			<div class="flex flex-col gap-4">
				<FormControl
					label="网关名称"
					v-model="paymentGatewayDetails.gateway_name"
					name="gateway_name"
					type="text"
					placeholder="输入网关名称"
				/>
				<FormControl
					label="端点URL"
					v-model="paymentGatewayDetails.url"
					name="url"
					type="text"
					placeholder="https://xyz.com/api/action/<endpoint>"
				/>
				<div class="flex gap-4">
					<FormControl
						label="API密钥"
						v-model="paymentGatewayDetails.api_key"
						name="api_key"
						type="text"
						placeholder="输入API密钥"
					/>

					<FormControl
						label="API密钥"
						v-model="paymentGatewayDetails.api_secret"
						name="api_secret"
						type="text"
						placeholder="输入API密钥"
					/>
				</div>

				<div class="flex gap-4">
					<FormControl
						label="货币"
						v-model="paymentGatewayDetails.currency"
						name="currency"
						type="text"
						placeholder="例如 KES"
					/>
					<FormControl
						label="税费(%)"
						v-model="paymentGatewayDetails.taxes_and_charges"
						name="taxes_and_charges"
						type="text"
						placeholder="输入税费"
					/>
				</div>
				<FormControl
					label="打印格式"
					v-model="paymentGatewayDetails.print_format"
					name="print_format"
					type="text"
					placeholder="默认"
				/>
			</div>

			<div class="mt-4 flex w-full bg-red-300 items-center justify-center">
				<Button
					@click="savePaymentGateway"
					variant="solid"
					class="justify-center w-full font-bold"
					>保存</Button
				>
			</div>
		</template>
	</Dialog>
</template>

<script>
import { toast } from 'vue-sonner';
export default {
	name: 'AddPaymentGateway',
	data() {
		return {
			paymentGatewayDetails: {
				currency: 'KES',
				gateway_name: '',
				gateway_setting: 'Mpesa Setup',
				gateway_controller: '',
				url: '',
				api_key: '',
				api_secret: '',
				taxes_and_charges: '',
				print_format: '',
			},
			integrationLogo: null,
		};
	},
	resources: {
		getPaymentGatewayDetails() {
			return {
				url: 'jcloud.api.regional_payments.mpesa.utils.get_payment_gateway_details',
				onSuccess(data) {
					Object.assign(this.paymentGatewayDetails, {
						currency: data.currency,
						gateway_name: data.gateway_name,
						url: data.url,
						api_key: data.api_key,
						api_secret: data.api_secret,
						taxes_and_charges: data.taxes_and_charges,
						print_format: data.print_format,
					});
				},
				auto: true,
			};
		},
		createPaymentGatewaySettings() {
			return {
				url: 'jcloud.api.regional_payments.mpesa.utils.update_payment_gateway_settings',
				makeParams() {
					return {
						gateway_details: this.paymentGatewayDetails,
					};
				},
				validate() {
					let fields = Object.values(this.paymentGatewayDetails);
					if (fields.includes('')) {
						this.errorMessage = '请填写必填项';
						return '请填写必填项';
						// throw new DashboardError('请填写必填项');
					}
				},
				async onSuccess(data) {
					if (data) {
						toast.success('支付网关设置已保存', data);
					} else {
						toast.error('保存支付网关设置时出错');
					}
				},
			};
		},
		fetchGatewayController() {
			return {
				url: 'jcloud.api.regional_payments.mpesa.utils.get_gateway_controller',
				method: 'GET',
				auto: true,
				onSuccess: (res) => {
					Object.assign(this.paymentGatewayDetails, {
						gateway_controller: res,
					});
				},
			};
		},
	},
	methods: {
		handleFileUpload(event) {
			this.integrationLogo = event.target.files[0];
		},

		async savePaymentGateway() {
			try {
				await this.$resources.createPaymentGatewaySettings.submit();
				this.$emit('closeDialog');
			} catch (error) {
				this.$toast.error(
					`保存支付网关设置时出错: ${error.message}`,
				);
			}
		},
	},
	watch: {
		integrationLogo: function () {
this.handleFileUpload();
		},
	},
};
</script>