<template>
	<div class="sticky top-0 z-10 shrink-0">
		<Header>
			<FBreadcrumbs :items="breadcrumbs" />
		</Header>
	</div>

	<div
		v-if="!$team.pg?.is_desk_user && !$session.hasSiteCreationAccess"
		class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
	>
		<i-lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
		<ErrorMessage message="您没有权限创建新站点" />
	</div>

	<div v-else class="mx-auto max-w-2xl px-5">
		<div v-if="$resources.options.loading" class="py-4 text-base text-gray-600">
			加载中...
		</div>
		<div v-if="$route.name === 'NewBenchSite' && !bench">
			<div class="py-4 text-base text-gray-600">出错了</div>
		</div>
		<div v-else-if="options" class="space-y-12 pb-[50vh] pt-12">
			<NewSiteAppSelector
				:availableApps="selectedVersionAppOptions"
				:siteOnPublicBench="!bench"
				v-model="apps"
			/>
			<div v-if="showLocalisationSelector" class="space-y-4">
				<div class="flex space-x-2">
					<FormControl
						label="安装本地合规应用？"
						v-model="showLocalisationOption"
						type="checkbox"
					/>
					<Tooltip
						text="本地合规应用允许根据法定合规性创建交易。它们由社区合作伙伴维护。"
					>
						<i-lucide-info class="h-4 w-4 text-gray-500" />
					</Tooltip>
				</div>
				<FormControl
					class="w-1/2"
					variant="outline"
					:class="{ 'pointer-events-none opacity-50': !showLocalisationOption }"
					label="选择国家"
					v-model="selectedLocalisationCountry"
					type="autocomplete"
					:options="localisationAppCountries"
				/>
			</div>
			<div v-if="!bench">
				<div class="flex items-center justify-between">
					<h2 class="text-base font-medium leading-6 text-gray-900">
						选择 Jingrow 版本
					</h2>
				</div>
				<div class="mt-2">
					<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
						<component
							v-for="v in availableVersions"
							:key="v.name"
							:is="v.disabled ? 'Tooltip' : 'div'"
							:text="
								v.disabled && versionAppsMap[v.name]
									? `此版本不适用于 ${$format.plural(
											versionAppsMap[v.name].length,
											'app',
											'apps',
										)} ${$format.commaAnd(versionAppsMap[v.name])}`
									: ''
							"
						>
							<button
								:class="[
									version === v.name
										? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
										: 'bg-white text-gray-900  hover:bg-gray-50',
									v.disabled && 'opacity-50 hover:cursor-default',
									'flex w-full cursor-pointer items-center justify-between rounded border border-gray-400 p-3 text-sm focus:outline-none',
								]"
								@click="
									() => {
										if (v.disabled) return;
										version = v.name;
									}
								"
							>
								<span class="font-medium">{{ v.name }} </span>
								<div
									v-if="v.status === 'Develop'"
									class="flex items-center gap-2"
								>
									<Tooltip
										text="此版本正在开发中，可能存在错误。请勿用于生产站点。"
									>
										<i-lucide-info class="h-4 w-4 text-gray-500" />
									</Tooltip>
									<span class="ml-1 text-gray-600">
										{{ v.status }}
									</span>
								</div>
							</button>
						</component>
					</div>
				</div>
			</div>
			<div
				class="flex flex-col"
				v-if="selectedVersion?.group?.clusters?.length"
			>
				<h2 class="text-base font-medium leading-6 text-gray-900">
					选择地区
				</h2>
				<div class="mt-2 w-full space-y-2">
					<div class="grid grid-cols-2 gap-3">
						<button
							v-for="c in selectedVersion.group.clusters"
							:key="c.name"
							@click="cluster = c.name"
							:class="[
								cluster === c.name
									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
									: 'bg-white text-gray-900  hover:bg-gray-50',
								'flex w-full items-center rounded border p-3 text-left text-base text-gray-900',
							]"
						>
							<div class="flex w-full items-center justify-between">
								<div class="flex w-full items-center space-x-2">
									<img v-if="c.image" :src="c.image" class="h-5 w-5" onerror="this.src='/assets/images/china-flag.png'; this.onerror=null;" />
									<i-lucide-globe class="h-5 w-5 text-gray-600" v-else />
									<span class="text-sm font-medium">
										{{ c.title }}
									</span>
								</div>
								<Badge v-if="c.beta" :label="c.beta ? 'Beta' : ''" />
							</div>
						</button>
					</div>
				</div>
			</div>
			<div v-if="selectedVersion && cluster">
				<div class="flex items-center justify-between">
					<h2 class="text-base font-medium leading-6 text-gray-900">
						选择网站套餐计划
					</h2>
				</div>
				<div class="mt-2">
					<SitePlansCards
						v-model="plan"
						:isPrivateBenchSite="!!bench"
						:isDedicatedServerSite="selectedVersion.group.is_dedicated_server"
						:selectedCluster="cluster"
						:selectedApps="apps"
						:selectedVersion="version"
						:hideRestrictedPlans="selectedLocalisationCountry"
					/>
				</div>
				<div class="mt-4 text-xs text-gray-700">
					<div
						class="flex items-center rounded bg-gray-50 p-2 text-p-base font-medium text-gray-800"
					>
						<i-lucide-badge-check class="h-4 w-8 text-gray-600" />
						<span class="ml-4">
							安装使用 Jingrow 系统遇到任何问题请提交支持工单或联系在线客服。
						</span>
					</div>
				</div>
			</div>
			<div v-if="selectedVersion && plan && cluster">
				<h2 class="text-base font-medium leading-6 text-gray-900">
					输入子域名
				</h2>
				<div class="mt-2 items-center">
					<div class="col-span-2 flex w-full">
						<input
							class="dark:[color-scheme:dark] z-10 h-7 w-full flex-1 rounded rounded-r-none border border-[--surface-gray-2] bg-surface-gray-2 py-1.5 pl-2 pr-2 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
							placeholder="子域名"
							v-model="subdomain"
						/>
						<div class="flex items-center rounded-r bg-gray-100 px-4 text-base">
							.{{ options.domain }}
						</div>
					</div>
				</div>
				<div class="mt-1">
					<div
						v-if="$resources.subdomainExists.loading"
						class="text-base text-gray-600"
					>
						正在检查...
					</div>
					<template
						v-else-if="
							!$resources.subdomainExists.error &&
							$resources.subdomainExists.data != null
						"
					>
						<div
							v-if="$resources.subdomainExists.data"
							class="text-sm text-green-600"
						>
							{{ subdomain }}.{{ options.domain }} 可用
						</div>
						<div v-else class="text-sm text-red-600">
							{{ subdomain }}.{{ options.domain }} 不可用
						</div>
					</template>
					<ErrorMessage :message="$resources.subdomainExists.error" />
				</div>
			</div>
			<Summary
				v-if="selectedVersion && cluster && plan && subdomain"
				:options="siteSummaryOptions"
			/>
			<div
				v-if="selectedVersion && cluster && plan"
				class="flex flex-col space-y-4"
			>
				<FormControl
					type="checkbox"
					v-model="agreedToRegionConsent"
					:label="`我同意我所选地区的法律适用于我和Jingrow。`"
				/>
				<FormControl
					class="checkbox"
					type="checkbox"
					label="我同意将我的信息分享给本地合作伙伴"
					@change="(val) => (shareDetailsConsent = val.target.checked)"
				/>
				<div v-if="formError" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
					{{ formError }}
				</div>
			</div>
			<div v-if="selectedVersion && cluster && plan && subdomain">
				<Button
					class="w-full"
					variant="solid"
					:disabled="!agreedToRegionConsent || !isSubdomainValid"
					@click="checkBalanceAndCreateSite"
					:loading="$resources.createOrder?.loading || false"
					:loadingText="'正在创建订单...'"
				>
					创建站点
				</Button>
			</div>
		</div>
	</div>

	<Dialog 
		v-if="showAddPrepaidCreditsDialog" 
		v-model="showAddPrepaidCreditsDialog"
		:options="{ title: '新建网站' }"
	>
		<template #body-content>
			<div v-if="showBalanceMessage" class="mb-5 inline-flex gap-1.5 text-base text-gray-700">
				<i-lucide-info class="h-4 w-4" />
				<span>
					您当前的余额不足，请先充值以创建新站点。至少需要充值 {{ $format.userCurrency(Math.ceil(requiredAmount - userBalance)) }}。
				</span>
			</div>
			<BuyPrepaidCreditsForm
				:minimumAmount="Math.ceil(requiredAmount - userBalance)"
				:isOnboarding="false"
				@success="onCreditAdded"
				@cancel="showAddPrepaidCreditsDialog = false"
			/>
		</template>
	</Dialog>

	<div v-if="showOrderCheckout && !currentOrder" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
		<div class="bg-white p-6 rounded-lg shadow-xl">
			<p>正在加载支付界面...</p>
		</div>
	</div>

	<OrderCheckout 
		v-if="currentOrder"
		v-model="showOrderCheckout"
		:order="currentOrder" 
		@payment-success="onPaymentSuccess"
		@payment-error="onPaymentError"
		@close="resetCheckoutState"
	/>
</template>
<script>
import {
	Autocomplete,
	ErrorMessage,
	FeatherIcon,
	FormControl,
	TextInput,
	Tooltip,
	debounce,
	Breadcrumbs,
	getCachedDocumentResource,
	Dialog,
} from 'jingrow-ui';
import SitePlansCards from '../components/SitePlansCards.vue';
import { validateSubdomain } from '../utils/site';
import Header from '../components/Header.vue';
import router from '../router';
import { plans } from '../data/plans';
import NewSiteAppSelector from '../components/site/NewSiteAppSelector.vue';
import Summary from '../components/Summary.vue';
import { DashboardError } from '../utils/error';
import { getCountry } from '../utils/country';
import BuyPrepaidCreditsForm from '../components/BuyPrepaidCreditsForm.vue';
import OrderCheckout from '../components/OrderCheckout.vue';

export default {
	name: 'NewSite',
	props: ['bench'],
	components: {
		FBreadcrumbs: Breadcrumbs,
		NewSiteAppSelector,
		SitePlansCards,
		Autocomplete,
		ErrorMessage,
		FormControl,
		FeatherIcon,
		TextInput,
		Tooltip,
		Summary,
		Header,
		Dialog,
		BuyPrepaidCreditsForm,
		OrderCheckout,
	},
	data() {
		return {
			version: null,
			subdomain: '',
			cluster: null,
			plan: null,
			apps: [],
			appPlans: {},
			selectedApp: null,
			closestCluster: null,
			selectedLocalisationCountry: null,
			showLocalisationOption: false,
			showAppPlanSelectorDialog: false,
			shareDetailsConsent: false,
			agreedToRegionConsent: false,
			showAddPrepaidCreditsDialog: false,
			showBalanceMessage: false,
			requiredAmount: 0,
			userBalance: 0,
			showOrderCheckout: false,
			currentOrder: null,
			formError: null,
			siteFromOrder: null
		};
	},
	watch: {
		apps() {
			this.version = this.autoSelectVersion();
			this.cluster = null;
			this.agreedToRegionConsent = false;
		},
		showLocalisationOption() {
			if (this.showLocalisationOption) {
				const localisationAppCountries = this.localisationAppCountries.map(
					(c) => c.value,
				);

				if (
					localisationAppCountries.includes(getCountry()) &&
					!this.selectedLocalisationCountry
				) {
					this.selectedLocalisationCountry = { value: getCountry() };
				}
			} else {
				this.selectedLocalisationCountry = null;
			}
		},
		async version() {
			this.cluster = null;
			this.cluster = await this.getClosestCluster();
			this.agreedToRegionConsent = false;
		},
		cluster() {
			this.plan = null;
			this.agreedToRegionConsent = false;
		},
		subdomain: {
			handler: debounce(function (value) {
				let invalidMessage = validateSubdomain(value);
				this.$resources.subdomainExists.error = invalidMessage;
				if (!invalidMessage) {
					this.$resources.subdomainExists.submit();
				}
			}, 500),
		},
		closestCluster() {
			this.cluster = this.closestCluster;
		},
	},
	resources: {
		options() {
			return {
				url: 'jcloud.api.site.options_for_new',
				makeParams() {
					return { for_bench: this.bench };
				},
				onSuccess() {
					if (this.bench && this.options.versions.length > 0) {
						this.version = this.options.versions[0].name;
					}
				},
				auto: true,
			};
		},
		subdomainExists() {
			return {
				url: 'jcloud.api.site.exists',
				makeParams() {
					return {
						domain: this.options?.domain,
						subdomain: this.subdomain,
					};
				},
				validate() {
					let error = validateSubdomain(this.subdomain);
					if (error) {
						return new DashboardError(error);
					}
				},
				transform(data) {
					return !Boolean(data);
				},
			};
		},
		userBalance() {
			return {
				url: 'jcloud.api.billing.get_balance_credit',
				auto: true,
				onSuccess(data) {
					this.userBalance = data;
				},
			};
		},
		createOrder() {
			return {
				url: 'jcloud.api.billing.create_order',
				makeParams() {
					return {
						title: `${this.subdomain}.${this.options?.domain}`,
						description: `${this.plan.plan_title || this.plan.name}`,
						total_amount: this._totalAmount || 0,
						order_type: `新建网站`
					};
				},
				validate() {
					if (!this.subdomain) {
						throw new DashboardError('请输入子域名');
					}
					if (!this._totalAmount || this._totalAmount <= 0) {
						throw new DashboardError('订单金额必须大于0');
					}
				},
				onSuccess(response) {
					if (!response || !response.order) {
						this.formError = '服务器返回数据格式错误';
						return;
					}
					
					this.currentOrder = response.order;
					this.$nextTick(() => {
						this.showOrderCheckout = true;
					});
				},
				onError(error) {
					this.formError = error.message || '创建订单失败';
				}
			};
		},
		createSite() {
			return {
				url: 'jcloud.api.site.new',
				makeParams() {
					let appPlans = {};
					for (let app of this.apps) {
						if (app.plan) {
							appPlans[app.app] = app.plan;
						}
					}

					return {
						site: {
							name: this.subdomain,
							apps: ['jingrow', ...this.apps.map((app) => app.app)],
							localisation_country: this.showLocalisationSelector
								? this.selectedLocalisationCountry?.value
								: null,
							version: this.selectedVersion.name,
							group: this.selectedVersion.group.name,
							cluster: this.cluster,
							plan: this.plan.name,
							share_details_consent: this.shareDetailsConsent,
							selected_app_plans: appPlans,
							order_id: this.currentOrder?.order_id || null
						},
					};
				},
				validate() {
					if (!this.subdomain) {
						throw new DashboardError('请输入子域名');
					}

					if (!this.agreedToRegionConsent) {
						throw new DashboardError('请同意上述条款以创建站点');
					}
					
					if (this.currentOrder && !this.currentOrder.status) {
						throw new DashboardError('未检测到订单状态，无法创建站点');
					}
				},
				onSuccess: (site) => {
					this.$router.push(`/sites/${this.subdomain}.${this.options?.domain}/overview`);
				},
				onError(error) {
					this.formError = error.message || '站点创建失败，请联系客服';
				}
			};
		},
	},
	computed: {
		options() {
			return this.$resources.options.data;
		},
		selectedVersion() {
			return this.options?.versions.find((v) => v.name === this.version);
		},
		availableVersions() {
			if (!this.apps.length || this.bench)
				return this.options.versions.sort((a, b) =>
					b.name.localeCompare(a.name),
				);

			let commonVersions = this.apps.reduce((acc, app) => {
				if (!acc) return app.sources.map((s) => s.version);
				return acc.filter((v) => app.sources.map((s) => s.version).includes(v));
			}, null);

			if (this.selectedLocalisationCountry) {
				// temporary override since we don't have localisation app ready for v14
				// TODO: remove this when localisation app is ready for v14
				commonVersions = ['v1'];
				this.version = 'v1';
			}

			return this.options.versions.map((v) => ({
				...v,
				disabled: !commonVersions.includes(v.name),
			}));
		},
		selectedClusterTitle() {
			return this.selectedVersion?.group?.clusters?.find(
				(c) => c.name === this.cluster,
			)?.title;
		},
		selectedVersionApps() {
			let apps = [];

			if (!this.bench)
				apps = this.options.app_source_details.sort((a, b) =>
					a.total_installs !== b.total_installs
						? b.total_installs - a.total_installs
						: a.app.localeCompare(b.app),
				);
			else if (!this.selectedVersion?.group?.bench_app_sources) apps = [];
			else
				apps = this.selectedVersion.group.bench_app_sources.map(
					(app_source) => {
						let app_source_details =
							this.options.app_source_details[app_source];

						let marketplace_details = app_source_details
							? this.options.marketplace_details[app_sourcedetails.app]
							: {};

						return {
							app_title: app_source,
							...app_source_details,
							...marketplace_details,
						};
					},
				);

			// 按总安装量排序，然后按名称排序
			return apps.sort((a, b) => {
				if (a.total_installs > b.total_installs) {
					return -1;
				} else if (a.total_installs < b.total_installs) {
					return 1;
				} else {
					return a.app_title.localeCompare(b.app_title);
				}
			});
		},
		selectedVersionAppOptions() {
			return this.selectedVersionApps.filter(
				(app) => !this.localisationAppNames.includes(app.app),
			);
		},
		showLocalisationSelector() {
			if (
				!this.selectedVersionApps ||
				!this.localisationAppNames.length ||
				!this.apps.length
			)
				return false;

			const appsThatNeedLocalisation = this.selectedVersionApps.filter(
				(app) => app.localisation_apps.length,
			);

			if (
				appsThatNeedLocalisation.some((app) =>
					this.apps.map((a) => a.app).includes(app.app),
				)
			)
				return true;

			return false;
		},
		localisationAppNames() {
			if (!this.selectedVersionApps) return [];
			const localisationAppDetails = this.selectedVersionApps.flatMap(
				(app) => app.localisation_apps,
			);

			return localisationAppDetails
				.map((app) => app?.marketplace_app)
				.filter(Boolean);
		},
		localisationAppCountries() {
			if (!this.selectedVersionApps) return [];
			const localisationAppDetails = this.selectedVersionApps.flatMap(
				(app) => app.localisation_apps,
			);
			return localisationAppDetails.map((app) => ({
				label: app?.country,
				value: app?.country,
			}));
		},
		selectedPlan() {
			if (!plans?.data) return;
			return plans.data.find((p) => p.name === this.plan.name);
		},
		versionAppsMap() {
			const versions = this.availableVersions.map((v) => v.name);
			let problemAppVersions = {};
			if (!this.bench)
				for (let app of this.apps) {
					const appVersions = app.sources.map((s) => s.version);
					const problemVersions = versions.filter(
						(version) => !appVersions.includes(version),
					);
					for (let version of problemVersions) {
						if (!problemAppVersions[version]) {
							problemAppVersions[version] = [];
						}
						problemAppVersions[version].push(app.app_title);
					}
				}
			return problemAppVersions;
		},
		breadcrumbs() {
			if (this.bench) {
				let group = getCachedDocumentResource('Release Group', this.bench);
				return [
					{ label: '站点分组', route: '/groups' },
					{
						label: group ? group.pg.title : this.bench,
						route: {
							name: 'Release Group Detail',
							params: { name: this.bench },
						},
					},
					{
						label: '新建站点',
						route: {
							name: 'Release Group New Site',
							params: { bench: this.bench },
						},
					},
				];
			}
			return [
				{ label: '站点', route: '/sites' },
				{ label: '新建站点', route: '/sites/new' },
			];
		},
		_totalAmount() {
			let total =
				this.$team.pg.currency == 'CNY'
					? this.selectedPlan.price_cny
					: this.selectedPlan.price_usd;

			for (let app of this.apps.filter((app) => app.plan)) {
				total +=
					this.$team.pg.currency == 'CNY'
						? app.plan.price_cny
						: app.plan.price_usd;
			}
			return total;
		},
		totalAmount() {
			return this.$format.userCurrency(this._totalAmount);
		},
		totalPerMonth() {
			return this.totalAmount;
		},
		totalPerDay() {
			return this.$format.userCurrency(
				this.$format.pricePerDay(this._totalAmount),
			);
		},
		siteSummaryOptions() {
			let appPlans = [];
			for (let app of this.apps) {
				appPlans.push(
					`${
						this.selectedVersionApps.find((a) => a.app === app.app).app_title
					} ${
						app.plan?.price_cny
							? `- <span class="text-gray-600">${this.$format.userCurrency(
									this.$team.pg.currency == 'CNY'
										? app.plan.price_cny
										: app.plan.price_usd,
								)}</span>`
							: ''
					}`,
				);
			}

			return [
				{
					label: 'Jingrow 版本',
					value: this.selectedVersion?.name,
				},
				{
					label: '区域',
					value: this.selectedClusterTitle,
				},
				{
					label: '站点 URL',
					value: `${this.subdomain}.${this.options?.domain}`,
				},
				{
					label: '站点计划',
					value: this.selectedPlan.plan_title || this.plan.name,
				},
				{
					label: '总计',
					value: this.totalAmount,
					condition: () => this._totalAmount,
				},
			];
		},
		isSubdomainValid() {
			return this.$resources.subdomainExists.data === true && 
				   !this.$resources.subdomainExists.error && 
				   this.subdomain;
		},
	},
	methods: {
		async getClosestCluster() {
			if (this.closestCluster) return this.closestCluster;
			
			// 优先检查是否有中国地区的集群
			const chinaCluster = this.selectedVersion?.group?.clusters.find(
				c => c.title && c.title.includes('中国')
			);
			
			if (chinaCluster) {
				this.closestCluster = chinaCluster.name;
				return this.closestCluster;
			}
			
			let proxyServers = this.selectedVersion?.group?.clusters
				.flatMap((c) => c.proxy_server || [])
				.map((server) => server.name);

			if (proxyServers.length > 0) {
				this.findingClosestServer = true;
				let promises = proxyServers.map((server) => this.getPingTime(server));
				let results = await Promise.allSettled(promises);
				let fastestServer = results.reduce((a, b) =>
					a.value.pingTime < b.value.pingTime ? a : b,
				);
				let closestServer = fastestServer.value.server;
				let closestCluster = this.selectedVersion?.group?.clusters.find(
					(c) => c.proxy_server?.name === closestServer,
				);
				if (!this.closestCluster && closestCluster) {
					this.closestCluster = closestCluster.name;
				} else if (this.selectedVersion?.group?.clusters.length > 0) {
					// 如果找不到最快的服务器，默认选择第一个集群
					this.closestCluster = this.selectedVersion.group.clusters[0].name;
				}
				this.findingClosestServer = false;
			} else if (this.selectedVersion?.group?.clusters.length > 0) {
				this.closestCluster = this.selectedVersion.group.clusters[0].name;
			}
			return this.closestCluster;
		},
		async getPingTime(server) {
			let pingTime = 999999;
			try {
				let t1 = new Date().getTime();
				let r = await fetch(`https://${server}`);
				let t2 = new Date().getTime();
				pingTime = t2 - t1;
			} catch (error) {
				console.warn(error);
			}
			return { server, pingTime };
		},
		autoSelectVersion() {
			if (!this.availableVersions) return null;

			return this.availableVersions
				.sort((a, b) => b.name.localeCompare(a.name))
				.find((v) => !v.disabled)?.name;
		},
		async checkBalanceAndCreateSite() {
			try {
				this.formError = null;
				
				if (!this.agreedToRegionConsent) {
					this.formError = '请同意上述条款以创建站点';
					return;
				}
				
				if (!this.subdomain) {
					this.formError = '请输入子域名';
					return;
				}
				
				if (!this.isSubdomainValid) {
					this.formError = '子域名无效或已被占用';
					return;
				}
				
				this.$resources.createOrder.submit();
			} catch (error) {
				this.formError = `创建订单失败: ${error.message || '请稍后再试'}`;
			}
		},
		onPaymentSuccess(order) {
			this.showOrderCheckout = false;
			this.currentOrder = {
				...this.currentOrder,
				...order,
				status: '已支付'
			};
			this.siteFromOrder = order.site;
			this.$resources.createSite.submit();
		},
		onPaymentError(error) {
			this.formError = "支付失败: " + (error.message || "未知错误");
			
			if (error.message && error.message.includes('余额不足')) {
				this.requiredAmount = this._totalAmount || 0;
				this.showBalanceMessage = true;
				this.showAddPrepaidCreditsDialog = true;
			}
			
			this.showOrderCheckout = false;
		},
		resetCheckoutState() {
			this.showOrderCheckout = false;
			this.currentOrder = null;
		}
	},
};
</script>
<style scoped>
.checkbox:deep(label) {
	color: theme('colors.gray.700') !important;
	line-height: 1.5;
}
</style>