<template>
	<view class="cashier-page">
		<view class="mine-entry" @tap="goMine">
			<text class="ri-user-3-line mine-entry-icon"></text>
			<text>我的</text>
		</view>

		<block v-if="!hasMerchantUrl">
			<view class="empty-page">
				<image class="empty-bg" :src="emptyStateBackground" mode="aspectFill" />
				<view class="empty-overlay"></view>
				<view class="empty-inner">
					<view class="empty-brand-block">
						<text class="empty-brand">{{ brandName }}</text>
						<text class="empty-subtitle">扫描商家收款码，快速完成付款</text>
					</view>
					<view class="empty-action">
						<button class="empty-scan-button" hover-class="empty-scan-button-hover" :loading="scanning" @tap="handleScan">
							<text class="ri-qr-scan-2-line empty-scan-button-icon"></text>
							<text>扫一扫商家收款码</text>
						</button>
						<view class="empty-mine-link" hover-class="empty-mine-link-hover" @tap="goMine">
							<text class="ri-user-3-line empty-mine-link-icon"></text>
							<text>个人中心</text>
						</view>
					</view>
				</view>
			</view>
		</block>

		<block v-else>
		<view class="pay-header" :style="{ backgroundImage: `url(${merchant.background})` }">
			<view class="pay-header-mask"></view>
			<view class="pay-header-scrim"></view>
			<view class="merchant-label">
				<view class="merchant-label-inner">
					<text class="muted">向</text>
					<text class="merchant-name">{{ merchant.name }}</text>
					<text class="muted">付款</text>
				</view>
			</view>
		</view>

		<view class="pay-body">
			<view class="pay-main">
				<view class="amount-zone">
					<view class="amount-display">
						<text class="currency">¥</text>
						<text v-if="amount" class="amount-text">{{ amount }}</text>
						<view v-else class="cursor"></view>
					</view>
					<text v-if="!amount" class="amount-hint">请输入付款金额</text>
					<view v-if="amount && showBenefitTip" class="benefit-block">
						<view class="benefit-tip">
							{{ benefitTitle }}
							<text class="benefit-value">¥ {{ accumulationAmount }}</text>
						</view>
					</view>
				</view>

				<view class="extra-zone">
					<view class="remark-row">
						<input
							v-model="remark"
							class="remark-input"
							placeholder="付款备注（选填）"
							placeholder-class="remark-placeholder"
							:disabled="paying"
						/>
					</view>
					<!-- #ifdef MP-ALIPAY -->
					<button
						v-if="showAlipayPhoneAuthBtn"
						class="property-row property-row-btn"
						hover-class="property-row-hover"
						open-type="getAuthorize"
						scope="phoneNumber"
						:disabled="paying || bindingPhone"
						@tap="handleAlipayPhoneAuthTap"
						@getAuthorize="handleAlipayPhoneAuthorize"
						@error="handleAlipayPhoneAuthError"
					>
						<text class="property-name li-single-line property-name-action">
							{{ propertyRowText }}
						</text>
						<text v-if="showPropertyArrow" class="ri-arrow-right-s-line property-arrow"></text>
					</button>
					<view
						v-else
						class="property-row"
						:class="{ 'property-row--disabled': alipayPropertyUnbound }"
						hover-class="property-row-hover"
						@tap.stop="handlePropertyRow"
					>
						<text
							class="property-name li-single-line"
							:class="{
								'property-name-action': isPropertyActionText && !alipayPropertyUnbound,
								'property-name-tip': alipayPropertyUnbound
							}"
						>
							{{ propertyRowText }}
						</text>
						<text v-if="showPropertyArrow" class="ri-arrow-right-s-line property-arrow"></text>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<view
						class="property-row"
						hover-class="property-row-hover"
						@tap.stop="handlePropertyRow"
					>
						<text
							class="property-name li-single-line"
							:class="{ 'property-name-action': isPropertyActionText }"
						>
							{{ propertyRowText }}
						</text>
						<text v-if="showPropertyArrow" class="ri-arrow-right-s-line property-arrow"></text>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>

		<view v-if="propertySheetVisible" class="property-sheet-mask" @tap="closePropertySheet">
			<view class="property-sheet" @tap.stop>
				<view class="property-sheet-header">
					<text class="property-sheet-title">{{ propertySheetTitle }}</text>
					<text class="ri-close-line property-sheet-close" @tap="closePropertySheet"></text>
				</view>
				<scroll-view scroll-y class="property-sheet-list">
					<view
						v-for="item in propertyList"
						:key="String(item.merchant_id)"
						class="property-sheet-item"
						:class="{ active: isSameMerchantId(item.merchant_id, propertyMerchantId) }"
						@tap="handleSwitchProperty(item)"
					>
						<text class="property-sheet-item-name li-two-line">{{ item.merchant_name }}</text>
						<text
							v-if="isSameMerchantId(item.merchant_id, propertyMerchantId)"
							class="ri-check-line property-sheet-item-check"
						></text>
					</view>
				</scroll-view>
				<view v-if="!IS_ALIPAY" class="property-sheet-footer" @tap="goBindProperty">
					<text class="ri-add-line property-sheet-footer-icon"></text>
					<text>绑定新房源</text>
				</view>
			</view>
		</view>

		<view class="keyboard" :class="{ disabled: paying }">
			<view class="keypad">
				<view class="number-grid">
					<view v-for="key in numberKeys" :key="key" class="key" @tap="appendKey(key)">
						{{ key }}
					</view>
					<view class="key key-zero" @tap="appendKey('0')">0</view>
					<view class="key" @tap="appendKey('.')">.</view>
				</view>
				<view class="action-column">
					<view class="key delete-key" @tap="deleteKey">
						<text class="ri-delete-back-2-line"></text>
					</view>
					<view
						class="confirm-key"
						:class="{ disabled: !canPay, loading: paying }"
						@tap="handlePay"
					>
						<block v-if="paying">支付中</block>
						<block v-else-if="canPay">
							<text>确认支付</text>
							<text class="confirm-amount">¥{{ payableAmount }}</text>
						</block>
						<block v-else>确认支付</block>
					</view>
				</view>
			</view>
			<view class="safe-bottom"></view>
		</view>
		</block>
	</view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { bindMerchantByUrl, cancelTrade, changeMerchant, merchantListByUrl, supplierByUrl } from '@/api/cashier';
import type { MerchantListItem } from '@/api/cashier';
import { bindMobile, resolveLoginPlatform } from '@/api/auth';
import { postForm } from '@/utils/request';
import { DEFAULT_MERCHANT, APP_CONFIG, PROPERTY_APP } from '@/config';
import {
	getPropertyBindingCacheKey,
	getPropertyBindingCacheKeyByHash,
	getSupplierCacheKey,
	getSupplierCacheKeyByHash,
	clearPendingMerchantUrl,
	clearActiveMerchantContext,
	resolveMerchantUrlFromEntry,
	resolveMerchantUrlFromScanResult,
	syncActiveMerchantContext
} from '@/utils/merchant-context';
import { encryptedStorage } from '@/utils/storage';
import { formatPaymentError, isPaymentCancelled, requestPlatformPayment } from '@/utils/wxpay';

interface MerchantInfo {
	id: string;
	name: string;
	background: string;
	accumulationRate: number;
}

const defaultMerchant = (uni as any).$globalData?.defaultMerchant || DEFAULT_MERCHANT;
const PROPERTY_CACHE_TTL_SECONDS = 10 * 60;
const SUPPLIER_CACHE_TTL_SECONDS = 10 * 60;
const emptyStateBackground = '/static/cashier/bg-image.png';
const brandName = '卓享汇支付';
const IS_ALIPAY = resolveLoginPlatform() === 'mp-alipay';

const hasMerchantUrl = ref(false);
const merchant = ref<MerchantInfo>({ ...defaultMerchant });
const amount = ref('');
const remark = ref('');
const paying = ref(false);
const activeMerchantUrl = ref('');
const scoreName = ref('物业公积金');
const propertyName = ref('');
const propertyMerchantId = ref('');
const propertyList = ref<MerchantListItem[]>([]);
const propertySheetVisible = ref(false);
const switchingProperty = ref(false);
const bindingPhone = ref(false);
const alipayPropertyUnbound = ref(false);
const scanning = ref(false);
/** 已判定无效的进页码，避免 onShow 用同一 launch qrCode 反复弹窗 */
const rejectedMerchantUrl = ref('');
const numberKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

const canPay = computed(() => Number(amount.value) > 0 && !paying.value);
const payableAmount = computed(() => Number(amount.value || 0).toFixed(2));
const accumulationAmount = computed(() => {
	const value = Number(amount.value || 0) * Number(merchant.value.accumulationRate || 0);
	return value.toFixed(2);
});
const showBenefitTip = computed(() => Number(merchant.value.accumulationRate) > 0);
const benefitTitle = computed(() => `预计获得${scoreName.value || '物业公积金'}`);
const propertyRowText = computed(() => {
	if (propertyName.value) return propertyName.value;
	if (propertyList.value.length) return '选择物业';
	if (IS_ALIPAY) {
		if (alipayPropertyUnbound.value) return '暂未绑定，请去微信小程序绑定';
		return '绑定手机号查看房源';
	}
	return '业主去绑定';
});
const isPropertyActionText = computed(() => !propertyName.value);
const showAlipayPhoneAuthBtn = computed(
	() => IS_ALIPAY && !propertyName.value && !propertyList.value.length && !alipayPropertyUnbound.value
);
const showPropertyArrow = computed(() => !IS_ALIPAY || !alipayPropertyUnbound.value);
const propertySheetTitle = computed(() => (propertyName.value ? '切换物业' : '选择物业'));

interface PropertyBindingCache {
	merchant_id?: string;
	merchant_name?: string;
	score_name?: string;
	fee_rate?: string | number;
}

interface SupplierCache {
	supplier_id?: string | number;
	supplier_name?: string;
	logo?: string;
	fee_rate?: string | number;
}

const parseFeeRate = (feeRate: unknown) => {
	if (feeRate === undefined || feeRate === null || feeRate === '') return 0;
	const rate = Number(feeRate);
	if (!Number.isFinite(rate) || rate <= 0) return 0;
	return rate / 100;
};

const hasFeeRate = (feeRate: unknown) => feeRate !== undefined && feeRate !== null && feeRate !== '';

const resolveFeeRateFromPayload = (payload: Record<string, any> = {}) => {
	const supplierData = payload.supplier || {};
	return supplierData.fee_rate != null ? supplierData.fee_rate : payload.fee_rate;
};

const resolvePropertyFromPayload = (payload: Record<string, any> = {}) => {
	const merchantData = payload.merchant || payload;
	return {
		merchant_id: merchantData.merchant_id,
		merchant_name: merchantData.merchant_name,
		score_name: merchantData.config?.score_name
	};
};

const hasBindingPayload = (payload?: Record<string, any> | null) => {
	if (!payload || typeof payload !== 'object') return false;
	const merchantData = payload.merchant || payload;
	const merchantId = merchantData.merchant_id;
	const merchantName = merchantData.merchant_name;
	return merchantId !== undefined && merchantId !== null && merchantId !== '' && !!merchantName;
};

const buildBindingCache = (payload: Record<string, any> = {}): PropertyBindingCache => {
	const merchantData = payload.merchant || payload;
	return {
		merchant_id: merchantData.merchant_id,
		merchant_name: merchantData.merchant_name,
		score_name: merchantData.config?.score_name,
		fee_rate: resolveFeeRateFromPayload(payload)
	};
};

const clearPropertyBinding = () => {
	propertyName.value = '';
	propertyMerchantId.value = '';
};

const fetchMerchantList = async (merchantUrl: string) => {
	const response = await merchantListByUrl(merchantUrl);
	if (Number(response?.code) !== 200) {
		throw new Error(response?.msg || '获取物业列表失败');
	}
	return Array.isArray(response?.data) ? response.data : [];
};

const applyPropertyInfo = (property?: {
	merchant_id?: string | number;
	merchant_name?: string;
	score_name?: string;
}) => {
	if (!property) return;
	if (property.merchant_id !== undefined && property.merchant_id !== null && property.merchant_id !== '') {
		propertyMerchantId.value = String(property.merchant_id);
	}
	if (property.merchant_name) {
		propertyName.value = property.merchant_name;
	}
	if (property.score_name) {
		scoreName.value = property.score_name;
	}
};

const isSameMerchantId = (left: string | number, right: string | number) => {
	return String(left) === String(right);
};

const buildSupplierCache = (payload: Record<string, any> = {}, previous?: SupplierCache | null): SupplierCache => {
	const supplierData = payload.supplier || {};
	return {
		supplier_id:
			supplierData.supplier_id != null
				? supplierData.supplier_id
				: payload.supplier_id != null
					? payload.supplier_id
					: previous?.supplier_id,
		supplier_name:
			supplierData.supplier_name != null
				? supplierData.supplier_name
				: payload.supplier_name != null
					? payload.supplier_name
					: previous?.supplier_name,
		logo: supplierData.logo != null ? supplierData.logo : payload.logo != null ? payload.logo : previous?.logo,
		fee_rate: (() => {
			const rate = resolveFeeRateFromPayload(payload);
			return rate != null ? rate : previous?.fee_rate;
		})()
	};
};

const applyMerchantInfo = (data: any = {}) => {
	const name = data.name || data.merchant_name || data.title;
	const background = data.background || data.banner || data.cover || data.bg;
	merchant.value = {
		id: data.id || data.merchant_id || merchant.value.id,
		name: name || merchant.value.name,
		background: background || merchant.value.background,
		accumulationRate:
			data.accumulationRate !== undefined
				? Number(data.accumulationRate)
				: merchant.value.accumulationRate
	};
};

const applyBindingInfo = (binding?: PropertyBindingCache | null) => {
	if (!binding) return;
	if (hasFeeRate(binding.fee_rate)) {
		applyMerchantInfo({
			accumulationRate: parseFeeRate(binding.fee_rate)
		});
	}
	applyPropertyInfo(binding);
};

const applySupplierInfo = (supplier?: SupplierCache | null) => {
	if (!supplier) return;
	const updates: Record<string, unknown> = {
		name: supplier.supplier_name,
		background: supplier.logo
	};
	if (hasFeeRate(supplier.fee_rate)) {
		updates.accumulationRate = parseFeeRate(supplier.fee_rate);
	}
	applyMerchantInfo(updates);
};

const syncBindingCacheForUrl = (merchantUrl: string) => {
	const context = syncActiveMerchantContext(merchantUrl);
	// Strong consistency: when switching merchant QR URL, clear previous merchant cache.
	if (context.switched) {
		encryptedStorage.remove(getPropertyBindingCacheKeyByHash(context.previousHash));
		encryptedStorage.remove(getSupplierCacheKeyByHash(context.previousHash));
	}
	return getPropertyBindingCacheKey(merchantUrl);
};

const resetToEmptyMerchantState = () => {
	hasMerchantUrl.value = false;
	activeMerchantUrl.value = '';
	merchant.value = { ...defaultMerchant };
	amount.value = '';
	remark.value = '';
	propertyName.value = '';
	propertyMerchantId.value = '';
	propertyList.value = [];
	propertySheetVisible.value = false;
	alipayPropertyUnbound.value = false;
	scoreName.value = '物业公积金';
	clearPendingMerchantUrl();
	clearActiveMerchantContext();
};

const promptScan = (message?: string) => {
	uni.showModal({
		title: '提示',
		content: message || '未识别到商家码，请扫描商家收款码进入收银台',
		confirmText: '去扫码',
		showCancel: false,
		success: (res) => {
			if (res.confirm) {
				handleScan();
			}
		}
	});
};

const failInvalidMerchant = (merchantUrl: string, message?: string) => {
	rejectedMerchantUrl.value = merchantUrl;
	resetToEmptyMerchantState();
	promptScan(message);
};

const fetchSupplierByUrl = async (merchantUrl: string) => {
	const response = await supplierByUrl(merchantUrl);
	if (Number(response?.code) !== 200 || !response?.data) {
		return {
			ok: false as const,
			msg: response?.msg || '未识别到商家码，请扫描商家收款码进入收银台'
		};
	}

	const payload = response.data || {};
	const cacheKey = getSupplierCacheKey(merchantUrl);
	const cached = encryptedStorage.get<SupplierCache>(cacheKey);
	const latestSupplier = buildSupplierCache(payload, cached);
	if (!latestSupplier.supplier_name && !latestSupplier.supplier_id) {
		return {
			ok: false as const,
			msg: response?.msg || '未识别到商家码，请扫描商家收款码进入收银台'
		};
	}

	applyPropertyInfo(resolvePropertyFromPayload(payload));
	applySupplierInfo(latestSupplier);
	encryptedStorage.set(cacheKey, latestSupplier, SUPPLIER_CACHE_TTL_SECONDS);
	return { ok: true as const, supplier: latestSupplier };
};

const initWithMerchantUrl = async (
	merchantUrl: string,
	options: { force?: boolean } = {}
) => {
	if (!options.force && rejectedMerchantUrl.value === merchantUrl) {
		resetToEmptyMerchantState();
		return;
	}

	try {
		const [supplierResult, bindResponse] = await Promise.all([
			fetchSupplierByUrl(merchantUrl),
			bindMerchantByUrl(merchantUrl).catch(() => null)
		]);

		if (!supplierResult.ok) {
			failInvalidMerchant(merchantUrl, supplierResult.msg);
			return;
		}

		const bindCode = Number(bindResponse?.code);
		const bindMsg = String(bindResponse?.msg || '');
		if (bindResponse && bindCode !== 200 && /重新扫码/.test(bindMsg)) {
			failInvalidMerchant(merchantUrl, bindMsg);
			return;
		}

		rejectedMerchantUrl.value = '';
		hasMerchantUrl.value = true;
		activeMerchantUrl.value = merchantUrl;
		propertyName.value = '';
		propertyMerchantId.value = '';
		propertyList.value = [];
		propertySheetVisible.value = false;
		alipayPropertyUnbound.value = false;
		scoreName.value = '物业公积金';
		applySupplierInfo(supplierResult.supplier);
		await loadPropertyBinding(merchantUrl);
	} catch (error: any) {
		failInvalidMerchant(
			merchantUrl,
			error?.message || '未识别到商家码，请扫描商家收款码进入收银台'
		);
	}
};

const handleScan = () => {
	if (scanning.value) return;

	scanning.value = true;
	uni.scanCode({
		onlyFromCamera: false,
		scanType: ['qrCode'],
		success: async (res) => {
			const merchantUrl = resolveMerchantUrlFromScanResult(res.result || '');
			if (!merchantUrl) {
				uni.showToast({
					title: '未识别到商家码',
					icon: 'none'
				});
				promptScan();
				return;
			}
			await initWithMerchantUrl(merchantUrl, { force: true });
		},
		fail: (err: any) => {
			const errMsg = err?.errMsg || '';
			if (errMsg.includes('cancel')) return;
			uni.showToast({
				title: '扫码失败，请重试',
				icon: 'none'
			});
		},
		complete: () => {
			scanning.value = false;
		}
	});
};

const handleMissingMerchantUrl = () => {
	promptScan();
};

const resolvePropertyListFallback = async (merchantUrl: string) => {
	try {
		const list = await fetchMerchantList(merchantUrl);
		propertyList.value = list;

		if (!list.length) {
			clearPropertyBinding();
			encryptedStorage.remove(syncBindingCacheForUrl(merchantUrl));
		}
	} catch (error) {
		console.log('property list fallback', error);
		clearPropertyBinding();
		propertyList.value = [];
	}
};

const loadPropertyBinding = async (merchantUrl: string, options: { skipFallback?: boolean } = {}) => {
	const cacheKey = syncBindingCacheForUrl(merchantUrl);
	const cached = encryptedStorage.get<PropertyBindingCache>(cacheKey);
	if (cached?.merchant_name) {
		applyBindingInfo(cached);
	}

	try {
		const response = await bindMerchantByUrl(merchantUrl);
		if (Number(response?.code) !== 200 || !hasBindingPayload(response?.data)) {
			if (!options.skipFallback) {
				await resolvePropertyListFallback(merchantUrl);
			}
			return;
		}

		const latestBinding = buildBindingCache(response.data || {});
		applyBindingInfo(latestBinding);
		encryptedStorage.set(cacheKey, latestBinding, PROPERTY_CACHE_TTL_SECONDS);
	} catch (error) {
		console.log('bind merchant fallback cache', error);
		if (!options.skipFallback) {
			await resolvePropertyListFallback(merchantUrl);
		}
	}
};

const loadSupplier = async (merchantUrl: string) => {
	const cacheKey = getSupplierCacheKey(merchantUrl);
	const cached = encryptedStorage.get<SupplierCache>(cacheKey);
	if (cached) {
		applySupplierInfo(cached);
	}

	try {
		const result = await fetchSupplierByUrl(merchantUrl);
		if (!result.ok) return false;
		return true;
	} catch (error) {
		console.log('supplier fallback cache', error);
		return false;
	}
};

const appendKey = (key: string) => {
	if (paying.value) return;

	if (key === '.') {
		if (!amount.value) {
			amount.value = '0.';
			return;
		}
		if (amount.value.includes('.')) return;
		amount.value += '.';
		return;
	}

	const nextValue = amount.value === '0' ? key : `${amount.value}${key}`;
	const decimalPart = nextValue.split('.')[1];
	if (decimalPart && decimalPart.length > 2) return;
	if (Number(nextValue) > 999999.99) return;
	amount.value = nextValue;
};

const deleteKey = () => {
	if (paying.value) return;
	amount.value = amount.value.slice(0, -1);
};

const showAlipayUnboundTip = () => {
	uni.showModal({
		title: '暂未绑定房源',
		content: '您在微信小程序中暂无绑定房源，请前往微信小程序完成绑定后再使用。',
		showCancel: false,
		confirmText: '知道了'
	});
};

const refreshPropertyAfterPhoneBind = async () => {
	if (!activeMerchantUrl.value) return;

	alipayPropertyUnbound.value = false;
	clearPropertyBinding();
	propertyList.value = [];
	encryptedStorage.remove(getPropertyBindingCacheKey(activeMerchantUrl.value));
	await loadPropertyBinding(activeMerchantUrl.value);

	if (propertyName.value || propertyList.value.length) {
		uni.showToast({
			title: '已匹配到物业信息',
			icon: 'none'
		});
		return;
	}

	alipayPropertyUnbound.value = true;
};

const tryParseJson = (value: any) => {
	if (typeof value !== 'string') return value;
	const text = value.trim();
	if (!text || (text[0] !== '{' && text[0] !== '[')) return value;
	try {
		return JSON.parse(text);
	} catch {
		return value;
	}
};

/** 调试日志用：把嵌套 JSON 字符串展开成可展开对象 */
const toLogObject = (value: any, depth = 0): any => {
	if (value == null || depth > 4) return value;
	const parsed = tryParseJson(value);
	if (Array.isArray(parsed)) {
		return parsed.map((item) => toLogObject(item, depth + 1));
	}
	if (parsed && typeof parsed === 'object') {
		const result: Record<string, any> = {};
		Object.keys(parsed).forEach((key) => {
			result[key] = toLogObject(parsed[key], depth + 1);
		});
		return result;
	}
	return parsed;
};

const logPhoneAuth = (label: string, payload?: any) => {
	console.log(`[收银台][手机号授权] ${label}`, payload === undefined ? undefined : toLogObject(payload));
};

/** 取 getPhoneNumber 密文：response.response */
const extractAlipayEncryptedData = (phoneRes: any) => {
	const parsed = tryParseJson(phoneRes?.response);
	if (parsed && typeof parsed === 'object') {
		const encrypted = parsed.response;
		return typeof encrypted === 'string' ? encrypted.trim() : '';
	}
	return typeof phoneRes?.response === 'string' ? phoneRes.response.trim() : '';
};

const requestAlipayPhoneNumber = () =>
	new Promise<any>((resolve, reject) => {
		// #ifdef MP-ALIPAY
		if (typeof my !== 'undefined' && typeof my.getPhoneNumber === 'function') {
			my.getPhoneNumber({
				success: resolve,
				fail: reject
			});
			return;
		}
		// #endif

		uni.getPhoneNumber({
			success: resolve,
			fail: reject
		});
	});

const handleAlipayPhoneAuthTap = () => {
	logPhoneAuth('按钮点击');
};

const handleAlipayPhoneAuthError = (event?: any) => {
	logPhoneAuth('error 回调', event);
};

const handleAlipayPhoneAuthorize = async (event?: any) => {
	logPhoneAuth('getAuthorize 回调', event);

	if (paying.value || bindingPhone.value) return;

	bindingPhone.value = true;
	try {
		const phoneRes = await requestAlipayPhoneNumber();
		logPhoneAuth('getPhoneNumber 成功', phoneRes);

		const encryptedData = extractAlipayEncryptedData(phoneRes);
		logPhoneAuth('解析 encryptedData', {
			encryptedData,
			response: tryParseJson(phoneRes?.response)
		});

		if (!encryptedData) {
			throw new Error('手机号授权失败');
		}

		const response = await bindMobile(encryptedData);
		logPhoneAuth('bind.mobile 响应', response);

		if (Number(response?.code) !== 200) {
			throw new Error(response?.msg || '手机号绑定失败');
		}

		await refreshPropertyAfterPhoneBind();
	} catch (error: any) {
		logPhoneAuth('授权失败', error);
		const errMsg = error?.errMsg || error?.message || '';
		if (errMsg.includes('cancel') || errMsg.includes('拒绝')) return;
		uni.showToast({
			title: errMsg || '手机号授权失败',
			icon: 'none'
		});
	} finally {
		bindingPhone.value = false;
	}
};

const goBindProperty = () => {
	if (IS_ALIPAY) {
		showAlipayUnboundTip();
		return;
	}

	if (paying.value) return;
	propertySheetVisible.value = false;

	if (activeMerchantUrl.value) {
		encryptedStorage.remove(getPropertyBindingCacheKey(activeMerchantUrl.value));
	}

	uni.navigateToMiniProgram({
		appId: PROPERTY_APP.APP_ID,
		path: PROPERTY_APP.BIND_HOUSE_PATH,
		extraData: { from: 'cashier' },
		envVersion: APP_CONFIG.API_BASE_URL.includes('dev.') ? 'trial' : 'release',
		fail: () => {
			uni.showToast({
				title: '跳转失败，请稍后重试',
				icon: 'none'
			});
		}
	});
};

const goMine = () => {
	uni.navigateTo({
		url: '/pages/mine/index'
	});
};

const closePropertySheet = () => {
	propertySheetVisible.value = false;
};

const openPropertySheet = async () => {
	if (!activeMerchantUrl.value) return;

	const list = await fetchMerchantList(activeMerchantUrl.value);
	if (!list.length) {
		if (IS_ALIPAY) {
			if (alipayPropertyUnbound.value) {
				showAlipayUnboundTip();
			}
			return;
		}
		goBindProperty();
		return;
	}

	propertyList.value = list;
	propertySheetVisible.value = true;
};

const handlePropertyRow = async () => {
	if (paying.value || switchingProperty.value || bindingPhone.value) return;
	if (!activeMerchantUrl.value) return;

	if (IS_ALIPAY && alipayPropertyUnbound.value) {
		showAlipayUnboundTip();
		return;
	}

	if (IS_ALIPAY && showAlipayPhoneAuthBtn.value) {
		return;
	}

	if (!propertyName.value) {
		try {
			if (propertyList.value.length) {
				propertySheetVisible.value = true;
				return;
			}
			await openPropertySheet();
		} catch (error: any) {
			uni.showToast({
				title: error?.message || '获取物业列表失败',
				icon: 'none'
			});
		}
		return;
	}

	try {
		await openPropertySheet();
	} catch (error: any) {
		uni.showToast({
			title: error?.message || '获取物业列表失败',
			icon: 'none'
		});
	}
};

const switchToProperty = async (
	item: MerchantListItem,
	merchantUrl: string,
	options: { closeSheet?: boolean; skipBindingFallback?: boolean } = {}
) => {
	if (paying.value || switchingProperty.value) return false;
	if (isSameMerchantId(item.merchant_id, propertyMerchantId.value)) {
		if (options.closeSheet) closePropertySheet();
		return true;
	}

	switchingProperty.value = true;
	try {
		const response = await changeMerchant({
			merchant_id: item.merchant_id,
			url: merchantUrl
		});
		if (Number(response?.code) !== 200) {
			throw new Error(response?.msg || '切换物业失败');
		}

		if (options.closeSheet) closePropertySheet();
		applyPropertyInfo(item);
		encryptedStorage.set(
			getPropertyBindingCacheKey(merchantUrl),
			{
				merchant_id: item.merchant_id,
				merchant_name: item.merchant_name
			},
			PROPERTY_CACHE_TTL_SECONDS
		);
		await loadPropertyBinding(merchantUrl, {
			skipFallback: options.skipBindingFallback != null ? options.skipBindingFallback : true
		});
		await loadSupplier(merchantUrl);
		return true;
	} catch (error: any) {
		uni.showToast({
			title: error?.message || '切换物业失败',
			icon: 'none'
		});
		return false;
	} finally {
		switchingProperty.value = false;
	}
};

const handleSwitchProperty = async (item: MerchantListItem) => {
	if (!activeMerchantUrl.value) return;
	await switchToProperty(item, activeMerchantUrl.value, { closeSheet: true, skipBindingFallback: true });
};

const buildResultUrl = (tradeNo: string) => {
	const query = [
		`amount=${payableAmount.value}`,
		`accumulation=${accumulationAmount.value}`,
		`merchant_name=${encodeURIComponent(merchant.value.name)}`,
		`merchant_url=${encodeURIComponent(activeMerchantUrl.value)}`,
		`trade_no=${encodeURIComponent(tradeNo)}`,
		`score_name=${encodeURIComponent(scoreName.value)}`
	].join('&');
	return `/pages/cashier/result?${query}`;
};

const handlePay = async () => {
	if (!canPay.value) return;

	paying.value = true;
	try {
		if (!activeMerchantUrl.value) {
			throw new Error('缺少支付参数：商户码 url');
		}

		// 扫商户码支付：调用后端 jspay，按当前端传入 platform
		const payload = {
			amount: payableAmount.value,
			platform: resolveLoginPlatform(),
			remark: remark.value.trim(),
			url: activeMerchantUrl.value
		};

		const payRes = await postForm<any>('user/v1/jspay', payload);
		if (Number(payRes?.code) !== 200) {
			throw new Error(payRes?.msg || '获取支付参数失败');
		}

		const payData = payRes?.data || {};
		const tradeNo = payData.trade_no || payData.tradeNo || '';
		if (!tradeNo) {
			throw new Error('缺少交易单号');
		}

		try {
			await requestPlatformPayment(payData);
		} catch (error) {
			if (isPaymentCancelled(error)) {
				await cancelTrade(tradeNo).catch(() => {});
				throw new Error('已取消支付');
			}
			throw error;
		}

		uni.redirectTo({
			url: buildResultUrl(tradeNo)
		});
	} catch (error: any) {
		uni.showToast({
			title: formatPaymentError(error),
			icon: 'none'
		});
	} finally {
		paying.value = false;
	}
};

onLoad((options: any) => {
	const merchantUrl = resolveMerchantUrlFromEntry(options || {});
	if (!merchantUrl) {
		handleMissingMerchantUrl();
		return;
	}
	clearPendingMerchantUrl();
	initWithMerchantUrl(merchantUrl);
});

onShow(() => {
	if (!hasMerchantUrl.value || !activeMerchantUrl.value) {
		const merchantUrl = resolveMerchantUrlFromEntry({});
		if (merchantUrl && merchantUrl !== rejectedMerchantUrl.value) {
			clearPendingMerchantUrl();
			initWithMerchantUrl(merchantUrl);
			return;
		}
	}

	if (!hasMerchantUrl.value || !activeMerchantUrl.value) return;
	loadPropertyBinding(activeMerchantUrl.value);
	loadSupplier(activeMerchantUrl.value);
});
</script>

<style lang="scss" scoped>
.cashier-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #FFFFFF;
	color: #111827;
	position: relative;
}

.mine-entry {
	position: fixed;
	top: calc(env(safe-area-inset-top) + 16rpx);
	left: 24rpx;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6rpx;
	padding: 12rpx 20rpx;
	border-radius: 999rpx;
	background: rgba(255, 255, 255, 0.92);
	color: #1f5bd8;
	font-size: 24rpx;
	font-weight: 700;
	box-shadow: 0 8rpx 20rpx rgba(17, 24, 39, 0.08);
}

.mine-entry-icon {
	font-size: 28rpx;
	line-height: 1;
}

.empty-page {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}

.empty-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.empty-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(15, 35, 95, 0.18) 0%,
		rgba(15, 35, 95, 0.42) 42%,
		rgba(255, 255, 255, 0.92) 78%,
		#ffffff 100%
	);
}

.empty-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	padding: 160rpx 48rpx calc(72rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
}

.empty-brand-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.empty-brand {
	font-family: SourceHanSansCN, -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
	color: #ffffff;
	font-size: 60rpx;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 2rpx;
	text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
}

.empty-subtitle {
	margin-top: 20rpx;
	color: rgba(255, 255, 255, 0.92);
	font-size: 28rpx;
	line-height: 1.5;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.18);
}

.empty-action {
	padding-top: 48rpx;
}

.empty-scan-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 104rpx;
	padding: 0;
	border-radius: 16rpx;
	background: #1f5bd8;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 12rpx 32rpx rgba(31, 91, 216, 0.28);
}

.empty-scan-button::after {
	border: none;
}

.empty-scan-button-icon {
	margin-right: 12rpx;
	font-size: 40rpx;
	line-height: 1;
}

.empty-scan-button-hover {
	background: #174dc1;
}

.empty-mine-link {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 24rpx;
	color: rgba(255, 255, 255, 0.96);
	font-size: 28rpx;
	font-weight: 600;
}

.empty-mine-link-hover {
	opacity: 0.86;
}

.empty-mine-link-icon {
	margin-right: 8rpx;
	font-size: 32rpx;
	line-height: 1;
}

.brand-only {
	margin: 0;
}

.pay-header {
	position: relative;
	flex-shrink: 0;
	height: 360rpx;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
}

.pay-header-mask {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 42%);
}

.pay-header-scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 200rpx;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.42) 48%,
		rgba(0, 0, 0, 0.62) 78%,
		rgba(255, 255, 255, 1) 100%
	);
}

.pay-body {
	flex: 1;
	margin-top: -24rpx;
	padding-bottom: 488rpx;
	background: #FFFFFF;
}

.pay-main {
	padding: 0 48rpx;
}

.merchant-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 52rpx;
	z-index: 2;
	display: flex;
	justify-content: center;
}

.merchant-label-inner {
	display: flex;
	align-items: baseline;
	max-width: 88%;
	padding: 14rpx 32rpx;
	border-radius: 999rpx;
	background: rgba(0, 0, 0, 0.42);
}

.muted {
	color: rgba(255, 255, 255, 0.9);
}

.merchant-name {
	margin: 0 8rpx;
	color: #FFFFFF;
	font-size: 34rpx;
	font-weight: 800;
	line-height: 1.3;
	text-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.35);
}

.amount-zone {
	margin-top: 56rpx;
}

.amount-display {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 100rpx;
}

.currency {
	flex-shrink: 0;
	margin-right: 16rpx;
	color: #050505;
	font-size: 60rpx;
	font-weight: 700;
	line-height: 1;
}

.amount-text {
	color: #050505;
	font-size: 88rpx;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1rpx;
}

.cursor {
	width: 6rpx;
	height: 80rpx;
	border-radius: 8rpx;
	background: #1F5BD8;
	animation: blink 1.1s step-end infinite;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}

.amount-hint {
	display: block;
	margin-top: 16rpx;
	padding-left: 4rpx;
	color: #C2C7D0;
	font-size: 26rpx;
}

.benefit-block {
	margin-top: 20rpx;
	padding-left: 4rpx;
}

.benefit-tip {
	color: #8B929E;
	font-size: 26rpx;
	line-height: 1.5;
}

.benefit-value {
	margin-left: 8rpx;
	color: #4B6CB7;
	font-weight: 600;
}

.extra-zone {
	margin-top: 36rpx;
	padding-top: 28rpx;
	border-top: 1rpx solid #F0F2F5;
}

.remark-row {
	padding: 0 4rpx;
}

.remark-input {
	height: 44rpx;
	color: #1F2937;
	font-size: 28rpx;
	text-align: left;
}

.remark-placeholder {
	color: #C2C7D0;
}

.property-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 28rpx;
	padding: 12rpx 4rpx;
}

.property-row--disabled {
	opacity: 0.92;
}

.property-row-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin: 0;
	padding: 12rpx 4rpx;
	border: none;
	background: transparent;
	line-height: 1;
	text-align: left;
}

.property-row-btn::after {
	border: none;
}

.property-row-hover {
	opacity: 0.88;
}

.property-name {
	flex: 0 1 auto;
	max-width: calc(100% - 36rpx);
	color: #374151;
	font-size: 28rpx;
	font-weight: 600;
}

.property-name-action {
	color: #1F5BD8;
}

.property-name-tip {
	color: #8B929E;
	font-weight: 500;
}

.property-arrow {
	flex-shrink: 0;
	margin-left: 4rpx;
	color: #C2C7D0;
	font-size: 30rpx;
	line-height: 1;
}

.property-sheet-mask {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: flex-end;
	background: rgba(17, 24, 39, 0.42);
}

.property-sheet {
	width: 100%;
	max-height: 68vh;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	border-radius: 24rpx 24rpx 0 0;
	background: #ffffff;
}

.property-sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 32rpx 20rpx;
}

.property-sheet-title {
	color: #111827;
	font-size: 32rpx;
	font-weight: 800;
}

.property-sheet-close {
	color: #9CA3AF;
	font-size: 40rpx;
	line-height: 1;
}

.property-sheet-list {
	max-height: 48vh;
}

.property-sheet-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20rpx;
	padding: 28rpx 32rpx;
	border-top: 1rpx solid #F3F4F6;
}

.property-sheet-item.active {
	background: #F8FAFF;
}

.property-sheet-item-name {
	flex: 1;
	min-width: 0;
	color: #1F2937;
	font-size: 28rpx;
	line-height: 1.5;
}

.property-sheet-item.active .property-sheet-item-name {
	color: #1F5BD8;
	font-weight: 700;
}

.property-sheet-item-check {
	flex-shrink: 0;
	color: #1F5BD8;
	font-size: 36rpx;
	line-height: 1;
}

.property-sheet-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	margin: 8rpx 32rpx 0;
	padding: 24rpx 0;
	border-top: 1rpx solid #F3F4F6;
	color: #1F5BD8;
	font-size: 28rpx;
	font-weight: 700;
}

.property-sheet-footer-icon {
	font-size: 32rpx;
	line-height: 1;
}

.keyboard {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	padding: 12rpx 12rpx 0;
	background: #F7F7F8;
	border-top: 1rpx solid #ECEEF2;
}

.keyboard.disabled {
	opacity: 0.72;
}

.keypad {
	display: flex;
	gap: 12rpx;
}

.number-grid {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(3, 1fr);
	gap: 12rpx;
}

.action-column {
	display: grid;
	width: 168rpx;
	grid-template-rows: 96rpx 1fr;
	gap: 12rpx;
}

.key,
.confirm-key {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96rpx;
	border-radius: 8rpx;
	background: #FFFFFF;
	color: #050505;
	font-size: 44rpx;
	font-weight: 600;
	line-height: 1;
}

.key:active,
.confirm-key:active {
	opacity: 0.78;
}

.key-zero {
	grid-column: span 2;
}

.delete-key {
	color: #747B86;
	font-size: 40rpx;
}

.confirm-key {
	flex-direction: column;
	gap: 6rpx;
	height: auto;
	min-height: 204rpx;
	padding: 0 12rpx;
	background: #1F5BD8;
	color: #FFFFFF;
	font-size: 26rpx;
	font-weight: 700;
	text-align: center;
}

.confirm-amount {
	font-size: 22rpx;
	font-weight: 600;
	opacity: 0.92;
}

.confirm-key.disabled,
.confirm-key.loading {
	background: #C8D3EE;
}

.safe-bottom {
	height: calc(16rpx + env(safe-area-inset-bottom));
}
</style>
