<template>
	<page-meta :page-style="pageStyle"></page-meta>
	<view class="page">

		<!-- 固定导航栏 -->
		<view class="navbar-fixed" :style="{ background: navbarBgColor }">
			<image src="/static/ic_back.png" class="back-btn" @click="goBack" mode=""></image>
			<text class="navbar-title">{{ $t('invite.title') }}</text>
		</view>

		<!-- 顶部红色奖励区域 -->
		<view class="reward-header">
			<image src="/static/new_bg1.png" class="bg-image" mode="scaleToFill"></image>

			<!-- 奖励内容 -->
			<view class="reward-content">
				<text class="reward-title">{{ $t('invite.rewardTitle') }}</text>
				<view class="reward-desc-box">
					<text class="reward-desc">{{ $t('invite.rewardDesc') }}</text>
				</view>
			</view>
		</view>

		<!-- 参与步骤 -->
		<view class="steps-section">
			<view class="section-title-row">
				<view class="title-line"></view>
				<text class="section-title">{{ $t('invite.stepsTitle') }}</text>
				<view class="title-line"></view>
			</view>

			<view class="step-item">
				<view class="step-icon step-icon-1">
					<image src="/static/new_user.png" class="step-img" mode="widthFix"></image>
				</view>
				<text class="step-text">{{ $t('invite.step1') }}</text>
			</view>

			<view class="step-item">
				<view class="step-icon step-icon-2">
					<image src="/static/red_box.png" class="step-img" mode="widthFix"></image>
				</view>
				<text class="step-text">{{ $t('invite.step2') }}</text>
			</view>

			<view class="step-item">
				<view class="step-icon step-icon-3">
					<image src="/static/ic_wallet.png" class="step-img" mode="widthFix"></image>
				</view>
				<text class="step-text">{{ $t('invite.step3') }}</text>
			</view>

			<view class="detail-link" @click="showDetail">
				<text class="detail-text">{{ $t('invite.viewDetail') }}</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="action-btn qrcode-btn" @click="generateQRCode">
				<text class="btn-text">{{ $t('invite.generateQRCode') }}</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="action-btn share-btn share-btn-native" open-type="share">
				<text class="btn-text">{{ $t('invite.shareToFriend') }}</text>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="action-btn share-btn" @click="shareToFriend">
				<text class="btn-text">{{ $t('invite.shareToFriend') }}</text>
			</view>
			<!-- #endif -->
		</view>

		<!-- 提现记录 -->
		<view class="record-section">
			<view class="record-header" @click="goToWithdrawDetail">
				<text class="record-title">{{ $t('invite.withdrawRecord') }}</text>
				<view class="record-more">
					<text class="more-text">{{ $t('invite.withdrawPeriod') }}</text>
					<image src="/static/arrow_right3.png" class="arrow-icon" mode=""></image>
				</view>
			</view>

			<view class="record-content">
				<image src="/static/new_bg2.png" class="record-bg-image" mode="scaleToFill"></image>

				<view class="reward-cards">
					<view class="reward-card" v-for="(item, index) in withdrawRecords" :key="index">
						<text class="reward-amount">{{ item.amount }}{{ $t('common.currency') }}</text>
						<text class="reward-status">{{ item.status }}</text>
					</view>
				</view>

				<view class="apply-withdraw-btn" @click="applyWithdraw">
					<text class="apply-text">{{ $t('invite.applyWithdraw') }}</text>
				</view>
			</view>
		</view>

		<!-- 邀请记录 -->
		<view class="invite-record-section">
			<view class="invite-record-header">
				<text class="record-title">{{ $t('invite.inviteRecord') }}</text>
			</view>

			<view class="invite-record-content">
				<image src="/static/approved.png" class="content-bg-stamp" mode="aspectFit"></image>

				<view class="table-header">
					<text class="table-col">{{ $t('invite.username') }}</text>
					<text class="table-col">{{ $t('invite.uid') }}</text>
					<text class="table-col">{{ $t('invite.inviteTime') }}</text>
					<text class="table-col">{{ $t('invite.paid') }}</text>
				</view>

				<view class="table-body">
					<view class="table-row" v-for="(item, index) in inviteRecords" :key="index">
						<text class="table-cell">{{ item.username }}</text>
						<text class="table-cell">{{ item.uid }}</text>
						<text class="table-cell">{{ item.time }}</text>
						<view class="table-cell status-cell">
							<text v-if="item.paid && item.amount" class="paid-amount">¥{{ item.amount }}</text>
							<text v-else class="unpaid-text">¥0</text>
						</view>
					</view>
				</view>

				<view v-if="inviteRecords.length === 0" class="empty-state">
					<text class="empty-text">{{ $t('common.noData') }}</text>
				</view>
			</view>
		</view>

		<!-- 提现明细弹窗 -->
		<up-popup :show="showWithdrawModal" mode="center" :round="20" :overlay="true" :closeOnClickOverlay="true" bgColor="#ffffff" @close="closeWithdrawModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">{{ $t('invite.withdrawDetail') }}</text>
					<image src="/static/ic_colse.png" class="close-icon" @click="closeWithdrawModal" mode=""></image>
				</view>

				<view class="modal-table">
					<view class="modal-table-header">
						<text class="modal-table-col">{{ $t('invite.time') }}</text>
						<text class="modal-table-col">{{ $t('invite.amount') }}</text>
						<text class="modal-table-col">{{ $t('invite.status') }}</text>
					</view>

					<view class="modal-table-body">
						<view class="modal-table-row" v-for="(item, index) in withdrawDetailList" :key="index">
							<text class="modal-table-cell">{{ item.time }}</text>
							<text class="modal-table-cell">¥{{ item.amount }}</text>
							<text class="modal-table-cell">{{ item.status }}</text>
						</view>
					</view>
				</view>
			</view>
		</up-popup>

		<!-- 二维码弹窗 -->
		<up-popup :show="showQRCodeModal" mode="center" :round="20" :overlay="true" :closeOnClickOverlay="true" bgColor="#ffffff" @close="closeQRCodeModal">
			<view class="qrcode-modal-content">
				<text class="qrcode-modal-title">{{ $t('invite.qrcodeTitle') || '邀请好友，赢现金' }}</text>
				<view class="qrcode-box">
					<!-- 微信小程序码 -->
					<image v-if="wxQrcodeImage" :src="wxQrcodeImage" class="wx-qrcode-image" mode="aspectFit"></image>
					<!-- 小程序未发布时显示提示 -->
					<view v-else-if="useLocalQrcode" class="unpublished-tip">
						<image src="/static/ic_warning.png" class="tip-icon" mode="aspectFit"></image>
						<text class="tip-text">小程序未发布</text>
						<text class="tip-subtext">暂无法生成二维码</text>
					</view>
					<!-- 加载中 -->
					<view v-else-if="qrcodeLoading" class="qrcode-loading">
						<text>加载中...</text>
					</view>
					<!-- 错误提示 -->
					<text v-else-if="qrcodeError" class="qrcode-error">{{ qrcodeError }}</text>
				</view>
				<text v-if="useLocalQrcode" class="qrcode-tip">请使用下方分享功能邀请好友</text>
				<view class="qrcode-actions">
					<!-- #ifdef MP-WEIXIN -->
					<button class="qrcode-action-btn share-action-btn share-btn-native" open-type="share">
						<text class="action-btn-text">{{ $t('invite.shareToFriend') || '分享给好友' }}</text>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="qrcode-action-btn share-action-btn" @click="shareQRCodeToFriend">
						<text class="action-btn-text">{{ $t('invite.shareToFriend') || '分享给好友' }}</text>
					</view>
					<!-- #endif -->
					<view class="qrcode-action-btn save-action-btn" @click="saveQRCodeImage" v-if="!useLocalQrcode">
						<text class="action-btn-text">{{ $t('invite.saveImage') || '保存图片' }}</text>
					</view>
				</view>
			</view>
		</up-popup>

		<!-- 申请提现弹窗 - 原生写法 -->
		<view class="apply-modal-overlay" v-if="showApplyModal" @click="closeApplyModal">
			<view class="apply-modal-wrapper" @click.stop>
				<view class="apply-modal-content">
					<!-- 红色标题栏 -->
					<view class="apply-modal-header">
						<text class="apply-modal-title">{{ $t('invite.withdrawApplication') }} {{ applyStep }}/2</text>
					</view>

					<!-- 第一步：输入金额 -->
					<view v-if="applyStep === 1" class="apply-step-content">
						<image src="/static/new_bg2.png" class="step-bg-image" mode="aspectFill"></image>
						<text class="step-label">{{ $t('invite.enterAmount') }}</text>
						<view class="amount-input-row">
							<input class="amount-input" type="number" v-model="withdrawAmount"
								:placeholder="$t('invite.enterPlaceholder')" />
							<text class="currency-text">{{ $t('common.currency') }}</text>
						</view>
						<text class="amount-hint">{{ $t('invite.amountHint') }}</text>

						<view class="apply-btn" @click="nextStep">
							<text class="apply-btn-text">{{ $t('invite.nextStep') }}</text>
						</view>
					</view>

					<!-- 第二步：选择收款方式 -->
					<view v-if="applyStep === 2" class="apply-step-content">
						<image src="/static/new_bg2.png" class="step-bg-image" mode="aspectFill"></image>
						<text class="step-label">1.{{ $t('invite.selectPaymentMethod') }}</text>
						<view class="payment-methods">
							<view class="payment-method" :class="{ active: paymentMethod === 'wechat' }"
								@click="selectPaymentMethod('wechat')">
								<text class="method-text">{{ $t('invite.wechat') }}</text>
							</view>
							<view class="payment-method" :class="{ active: paymentMethod === 'alipay' }"
								@click="selectPaymentMethod('alipay')">
								<text class="method-text">{{ $t('invite.alipay') }}</text>
							</view>
							<view class="payment-method" :class="{ active: paymentMethod === 'bank' }"
								@click="selectPaymentMethod('bank')">
								<text class="method-text">{{ $t('invite.bankCard') }}</text>
							</view>
						</view>

						<!-- 微信/支付宝：上传收款码 -->
						<view v-if="paymentMethod !== 'bank'">
							<text class="step-label">2.{{ $t('invite.uploadQRCode') }}</text>
							<view class="upload-area" @click="uploadQRCode">
								<image v-if="qrcodeImage" :src="qrcodeImage" class="uploaded-image" mode="aspectFit">
								</image>
								<text v-else class="upload-icon">+</text>
							</view>
						</view>

						<!-- 银行卡：填写银行卡信息 -->
						<view v-if="paymentMethod === 'bank'">
							<text class="step-label">2.{{ $t('invite.enterBankInfo') }}</text>

							<view class="form-item">
								<text class="form-label">{{ $t('invite.bankCardNumber') }}</text>
								<input class="form-input" v-model="bankCardNumber"
									:placeholder="$t('invite.enterBankCardNumber')" />
							</view>

							<view class="form-item">
								<text class="form-label">{{ $t('invite.cardholderName') }}</text>
								<input class="form-input" v-model="cardholderName"
									:placeholder="$t('invite.enterCardholderName')" />
							</view>

							<view class="form-item">
								<text class="form-label">{{ $t('invite.bankName') }}</text>
								<input class="form-input" v-model="bankName" :placeholder="$t('invite.enterBankName')" />
							</view>

							<view class="form-item">
								<text class="form-label">{{ $t('invite.swiftCode') }} ({{ $t('invite.optional') }})</text>
								<input class="form-input" v-model="swiftCode" :placeholder="$t('invite.enterSwiftCode')" />
							</view>
						</view>

						<view class="apply-btn" @click="submitWithdraw">
							<text class="apply-btn-text">{{ $t('invite.applyWithdraw') }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		AppServer
	} from '@/modules/api/AppServer.js'
	const appServer = new AppServer()

	export default {
		data() {
			return {
				navbarBgColor: 'transparent',
				scrollTop: 0,
				showWithdrawModal: false,
				showApplyModal: false,
				showQRCodeModal: false,
				showQRCodeContent: false, // 控制二维码内容显示
				qrcodeDataUrl: '',
				qrcodeValue: '', // 二维码内容（本地生成用）
				wxQrcodeImage: '', // 微信小程序码图片（base64）
				useLocalQrcode: false, // 是否使用本地二维码组件
				qrcodeLoading: false, // 小程序码加载状态
				qrcodeError: '', // 小程序码错误信息
				appLogo: '', // 应用logo，用于分享图片
				applyStep: 1,
				withdrawAmount: '',
				paymentMethod: 'wechat',
				qrcodeImage: '',
				bankCardNumber: '',
				cardholderName: '',
				bankName: '',
				swiftCode: '',
				withdrawRecords: [],
				withdrawDetailList: [],
				inviteRecords: [],
				// 佣金统计
				commissionStats: {
					totalInvites: 0,
					paidInvites: 0,
					totalCommission: '0.00',
					availableBalance: '0.00',
					invitationCode: ''
				},
				loading: false,
				inviteRules: '' // 邀请规则说明（从后台配置获取）
			}
		},
		computed: {
			// 弹窗显示时禁止页面滚动
			pageStyle() {
				if (this.showQRCodeModal || this.showWithdrawModal || this.showApplyModal) {
					return 'overflow: hidden;'
				}
				return ''
			}
		},
		onLoad() {
			this.loadData()
		},
		// 微信小程序分享配置
		onShareAppMessage() {
			const inviteCode = this.commissionStats.invitationCode || ''
			// 使用应用logo作为分享图片
			// 注意：微信小程序分享图片支持本地路径和网络路径(https)
			// 开发环境下http图片可能无法显示，使用本地图片作为备选
			let shareImage = '/static/new_bg1.png'
			if (this.appLogo && this.appLogo.startsWith('http')) {
				shareImage = this.appLogo
			}
			console.log('分享图片路径:', shareImage, 'appLogo:', this.appLogo)
			return {
				title: '邀请你加入，一起赚佣金！',
				path: `/pages/index/index?inviteCode=${inviteCode}`,
				imageUrl: shareImage
			}
		},
		// 分享到朋友圈（微信小程序）
		onShareTimeline() {
			const inviteCode = this.commissionStats.invitationCode || ''
			let shareImage = '/static/new_bg1.png'
			if (this.appLogo && this.appLogo.startsWith('http')) {
				shareImage = this.appLogo
			}
			return {
				title: '邀请你加入，一起赚佣金！',
				query: `inviteCode=${inviteCode}`,
				imageUrl: shareImage
			}
		},
		methods: {
			// 加载数据
			async loadData() {
				this.loading = true
				try {
					await Promise.all([
						this.loadCommissionStats(),
						this.loadCommissionRecords(),
						this.loadWithdrawRecords(),
						this.loadAppConfig()
					])
				} catch (error) {
					console.error('加载数据失败:', error)
				} finally {
					this.loading = false
				}
			},

			// 加载应用配置（从globalData获取logo和邀请规则）
			loadAppConfig() {
				try {
					const app = getApp()
					if (app && app.globalData && app.globalData.config) {
						const config = app.globalData.config
						if (config.app_logo) {
							this.appLogo = app.getConfigImageUrl('app_logo')
							console.log('从globalData获取到应用logo:', this.appLogo)
						}
						// 获取邀请规则说明
						if (config.invite_rules) {
							this.inviteRules = config.invite_rules
						}
					}
				} catch (error) {
					console.error('获取应用配置失败:', error)
				}
			},

			// 加载佣金统计
			async loadCommissionStats() {
				try {
					const res = await appServer.GetCommissionStats()
					console.log('GetCommissionStats response:', res)
					// 后端返回格式: { code: 0, message: "", data: {...} }
					if (res && res.code === 0 && res.data) {
						this.commissionStats = res.data
						console.log('commissionStats updated:', this.commissionStats)
						// 更新提现记录显示
						this.updateWithdrawDisplay()
						// 预先设置二维码内容，用于分享（使用小程序路径）
						const inviteCode = res.data.invitationCode || ''
						this.qrcodeValue = `/pages/index/index?inviteCode=${inviteCode}`
					}
				} catch (error) {
					console.error('获取佣金统计失败:', error)
				}
			},

			// 加载佣金记录
			async loadCommissionRecords() {
				try {
					const res = await appServer.GetCommissions({
						page: 1,
						limit: 50
					})
					// 后端返回格式: { code: 0, message: "", data: {...} }
					if (res && res.code === 0 && res.data && res.data.records) {
						this.inviteRecords = res.data.records.map(item => ({
							username: item.invitee?.nickname || '-',
							uid: item.invitee?.uid || '-',
							time: this.formatDate(item.createdAt),
							paid: true,
							amount: parseFloat(item.commissionAmount)
						}))
					}
				} catch (error) {
					console.error('获取佣金记录失败:', error)
				}
			},

			// 加载提现记录
			async loadWithdrawRecords() {
				try {
					const res = await appServer.GetWithdrawals({
						page: 1,
						limit: 10
					})
					// 后端返回格式: { code: 0, message: "", data: {...} }
					if (res && res.code === 0 && res.data && res.data.records) {
						this.withdrawDetailList = res.data.records.map(item => ({
							time: this.formatDate(item.createdAt),
							amount: item.amount,
							status: this.getWithdrawStatusText(item.status)
						}))
					}
				} catch (error) {
					console.error('获取提现记录失败:', error)
				}
			},

			// 更新提现显示
			updateWithdrawDisplay() {
				// 显示待提现、处理中、已完成的金额
				this.withdrawRecords = [{
					amount: this.commissionStats.availableBalance || '0',
					status: this.$t('invite.statusWaiting')
				}]
			},

			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '-'
				const date = new Date(dateStr)
				return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
			},

			// 获取提现状态文本
			getWithdrawStatusText(status) {
				const statusMap = {
					'waiting': this.$t('invite.statusWaiting'),
					'processing': this.$t('invite.statusProcessing'),
					'completed': this.$t('invite.statusCompleted'),
					'rejected': this.$t('invite.statusRejected') || '已拒绝'
				}
				return statusMap[status] || status
			},
			goBack() {
				uni.navigateBack()
			},
			showDetail() {
				uni.showModal({
					title: '规则说明',
					content: this.inviteRules || this.$t('invite.ruleContent'),
					showCancel: false
				})
			},
			async generateQRCode() {
				console.log('generateQRCode called, current state:', {
					wxQrcodeImage: this.wxQrcodeImage,
					qrcodeValue: this.qrcodeValue,
					useLocalQrcode: this.useLocalQrcode,
					invitationCode: this.commissionStats.invitationCode
				})
				
				// 如果已有小程序码，直接显示
				if (this.wxQrcodeImage || (this.useLocalQrcode && this.commissionStats.invitationCode)) {
					this.showQRCodeModal = true
					return
				}
				
				// 显示弹窗并开始加载
				this.showQRCodeModal = true
				this.qrcodeLoading = true
				this.qrcodeError = ''
				
				try {
					// 调用后端API获取微信小程序码
					const res = await appServer.GetMiniProgramQRCode({ width: 430 })
					console.log('获取小程序码响应:', res)
					
					if (res && res.code === 0 && res.data) {
						// 更新邀请码（后端返回的最新邀请码）
						if (res.data.invitationCode) {
							this.commissionStats.invitationCode = res.data.invitationCode
						}
						
						if (res.data.qrcodeUrl) {
							// 使用微信小程序码
							this.wxQrcodeImage = res.data.qrcodeUrl
							this.useLocalQrcode = false
						} else if (res.data.useLocalQrcode) {
							// 小程序未发布，显示邀请码
							this.qrcodeValue = res.data.qrcodeContent
							this.useLocalQrcode = true
							this.showQRCodeContent = true
						}
					} else {
						this.qrcodeError = res?.message || '生成小程序码失败'
					}
				} catch (error) {
					console.error('生成小程序码失败:', error)
					this.qrcodeError = '网络错误，请重试'
				} finally {
					this.qrcodeLoading = false
				}
			},
			closeQRCodeModal() {
				this.showQRCodeModal = false
			},
			shareQRCodeToFriend() {
				// 分享给好友
				// #ifdef MP-WEIXIN
				// 微信小程序使用 button 的 open-type="share" 来触发分享
				// 这里使用 uni.share 作为备选方案
				// #endif
				uni.showToast({
					title: this.$t('invite.shareSuccess') || '请使用右上角分享',
					icon: 'none'
				})
			},
			saveQRCodeImage() {
				// 使用本地二维码组件
				if (this.useLocalQrcode && this.$refs.uQrcode) {
					this.$refs.uQrcode.toTempFilePath({
						success: (res) => {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: this.$t('invite.saveSuccess') || '保存成功',
										icon: 'success'
									})
								},
								fail: (err) => {
									console.error('保存图片失败:', err)
									if (err.errMsg && err.errMsg.includes('auth deny')) {
										uni.showModal({
											title: '提示',
											content: '需要您授权保存图片到相册',
											success: (modalRes) => {
												if (modalRes.confirm) {
													uni.openSetting()
												}
											}
										})
									} else {
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										})
									}
								}
							})
						},
						fail: (err) => {
							console.error('获取二维码图片失败:', err)
							uni.showToast({
								title: '获取二维码失败',
								icon: 'none'
							})
						}
					})
					return
				}
				
				// 使用微信小程序码
				if (!this.wxQrcodeImage) {
					uni.showToast({
						title: '小程序码加载中，请稍候',
						icon: 'none'
					})
					return
				}
				
				// 将 base64 图片保存到相册
				const base64Data = this.wxQrcodeImage.replace(/^data:image\/\w+;base64,/, '')
				const filePath = `${wx.env.USER_DATA_PATH}/qrcode_${Date.now()}.png`
				
				const fs = uni.getFileSystemManager()
				fs.writeFile({
					filePath: filePath,
					data: base64Data,
					encoding: 'base64',
					success: () => {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: () => {
								uni.showToast({
									title: this.$t('invite.saveSuccess') || '保存成功',
									icon: 'success'
								})
							},
							fail: (err) => {
								console.error('保存图片失败:', err)
								if (err.errMsg && err.errMsg.includes('auth deny')) {
									uni.showModal({
										title: '提示',
										content: '需要您授权保存图片到相册',
										success: (modalRes) => {
											if (modalRes.confirm) {
												uni.openSetting()
											}
										}
									})
								} else {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									})
								}
							}
						})
					},
					fail: (err) => {
						console.error('写入文件失败:', err)
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						})
					}
				})
			},
			shareToFriend() {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					title: this.$t('invite.shareTitle'),
					success: () => {
						uni.showToast({
							title: this.$t('invite.shareSuccess'),
							icon: 'success'
						})
					}
				})
			},
			goToWithdrawDetail() {
				// 打开提现明细弹窗，数据已在loadWithdrawRecords中加载
				this.showWithdrawModal = true
			},
			closeWithdrawModal() {
				this.showWithdrawModal = false
			},
			applyWithdraw() {
				// 打开申请提现弹窗
				this.applyStep = 1
				this.withdrawAmount = ''
				this.paymentMethod = 'wechat'
				this.qrcodeImage = ''
				this.bankCardNumber = ''
				this.cardholderName = ''
				this.bankName = ''
				this.swiftCode = ''
				this.showApplyModal = true
			},
			closeApplyModal() {
				this.showApplyModal = false
			},
			nextStep() {
				// 解析提现金额，支持小数点后两位
				const amount = parseFloat(this.withdrawAmount)
				
				// 验证金额是否有效
				if (!this.withdrawAmount || isNaN(amount)) {
					uni.showToast({
						title: this.$t('invite.enterAmountError'),
						icon: 'none'
					})
					return
				}
				
				// 最低1元
				if (amount < 1) {
					uni.showToast({
						title: this.$t('invite.amountTooLow') || '低于1元，无法申请提现',
						icon: 'none'
					})
					return
				}
				
				// 最高不超过待提现金额
				const availableBalance = parseFloat(this.commissionStats.availableBalance || '0')
				if (amount > availableBalance) {
					uni.showToast({
						title: this.$t('invite.amountExceedsBalance') || '超出可提现金额',
						icon: 'none'
					})
					return
				}
				
				// 限制小数点后两位
				const formattedAmount = Math.floor(amount * 100) / 100
				this.withdrawAmount = formattedAmount.toString()
				
				this.applyStep = 2
			},
			selectPaymentMethod(method) {
				this.paymentMethod = method
			},
			uploadQRCode() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.qrcodeImage = res.tempFilePaths[0]
					}
				})
			},
			async submitWithdraw() {
				// 验证微信/支付宝收款码
				if (this.paymentMethod !== 'bank' && !this.qrcodeImage) {
					uni.showToast({
						title: this.$t('invite.uploadQRCodeError'),
						icon: 'none'
					})
					return
				}

				// 验证银行卡信息
				if (this.paymentMethod === 'bank') {
					if (!this.bankCardNumber || !this.cardholderName || !this.bankName) {
						uni.showToast({
							title: this.$t('invite.bankInfoError'),
							icon: 'none'
						})
						return
					}
				}

				// 构建支付详情
				let paymentDetails = {}
				if (this.paymentMethod === 'bank') {
					paymentDetails = {
						bankCardNumber: this.bankCardNumber,
						cardholderName: this.cardholderName,
						bankName: this.bankName,
						swiftCode: this.swiftCode || undefined
					}
				} else {
					// 微信/支付宝需要上传收款码图片
					try {
						const uploadRes = await appServer.UploadImage(this.qrcodeImage)
						// 后端返回格式: { code: 0, message: "", data: {...} }
						if (uploadRes && uploadRes.code === 0 && uploadRes.data) {
							paymentDetails = {
								qrcodeUrl: uploadRes.data.url
							}
						} else {
							uni.showToast({
								title: '上传收款码失败',
								icon: 'none'
							})
							return
						}
					} catch (error) {
						console.error('上传收款码失败:', error)
						uni.showToast({
							title: '上传收款码失败',
							icon: 'none'
						})
						return
					}
				}

				// 提交提现申请
				try {
					const res = await appServer.CreateWithdrawal({
						amount: parseFloat(this.withdrawAmount),
						paymentMethod: this.paymentMethod,
						paymentDetails: paymentDetails
					})

					// 后端返回格式: { code: 0, message: "", data: {...} }
					if (res && res.code === 0) {
						uni.showToast({
							title: this.$t('invite.applySuccess'),
							icon: 'success'
						})
						this.closeApplyModal()
						// 刷新数据
						this.loadData()
					} else {
						uni.showToast({
							title: res.error?.message || '提现申请失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('提现申请失败:', error)
					uni.showToast({
						title: '提现申请失败',
						icon: 'none'
					})
				}
			},
			handleScroll(e) {
				// 页面滚动事件在 uni-app 中需要使用 onPageScroll
			}
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop
			// 滚动距离超过 100px 时，导航栏背景从透明渐变到红色
			if (scrollTop > 100) {
				this.navbarBgColor = 'linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%)'
			} else {
				// 根据滚动距离计算透明度
				const opacity = scrollTop / 100
				this.navbarBgColor = `rgba(255, 59, 78, ${opacity})`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #F3F4F8;
	}

	.navbar-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 44px;
		height: 88rpx;
		transition: background 0.3s ease;

		.back-btn {
			position: absolute;
			left: 30rpx;
			width: 48rpx;
			height: 48rpx;
			filter: brightness(0) invert(1);
		}

		.navbar-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.reward-header {
		position: relative;
		height: 550rpx;
		background-color: #FF3B4E;
		overflow: hidden;

		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.reward-content {
			position: relative;
			z-index: 5;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 550rpx;
			padding: 80rpx 30rpx 0;

			.reward-title {
				font-size: 60rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
				margin-bottom: 60rpx;
				letter-spacing: 2rpx;
				text-align: center;
				word-break: break-word;
				max-width: 100%;
				line-height: 1.3;
			}

			.reward-desc-box {
				background-color: rgba(255, 255, 255, 0.98);
				border-radius: 60rpx;
				padding: 24rpx 50rpx;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
				max-width: 90%;

				.reward-desc {
					font-size: 26rpx;
					color: #333333;
					line-height: 1.8;
					text-align: center;
					word-break: break-word;
				}
			}
		}
	}



	.steps-section {
		background-color: #FFFFFF;
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;

		.section-title-row {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;

			.title-line {
				width: 60rpx;
				height: 2rpx;
				background-color: #333333;
				flex-shrink: 0;
			}

			.section-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin: 0 20rpx;
				white-space: nowrap;
			}
		}

		.step-item {
			display: flex;
			align-items: flex-start;
			margin-left: 60rpx;
			margin-bottom: 30rpx;

			.step-icon {
				width: 74rpx;
				height: 74rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24rpx;
				flex-shrink: 0;

				.step-img {
					width: 74rpx;
					height: 74rpx;
				}
			}

			.step-text {
				font-size: 26rpx;
				color: #333333;
				flex: 1;
				line-height: 1.6;
				word-break: break-word;
				padding-top: 10rpx;
			}
		}

		.detail-link {
			text-align: center;
			margin-top: 20rpx;

			.detail-text {
				font-size: 26rpx;
				color: #007AFF;
				text-decoration: underline;
			}
		}
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		gap: 20rpx;

		.action-btn {
			flex: 1;
			min-height: 50rpx;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 10rpx;

			&.qrcode-btn {
				background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
			}

			&.share-btn {
				background: linear-gradient(135deg, #FF6B7A 0%, #FF3B4E 100%);
			}

			// 微信原生分享按钮样式重置
			&.share-btn-native {
				border: none;
				margin: 0;
				line-height: normal;

				&::after {
					border: none;
				}
			}

			.btn-text {
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				word-break: break-word;
				line-height: 1.4;
			}
		}
	}

	.record-section {
		margin: 0 30rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.record-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
			padding: 24rpx 30rpx;

			.record-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.record-more {
				display: flex;
				align-items: center;

				.more-text {
					font-size: 24rpx;
					color: #FFFFFF;
					margin-right: 8rpx;
				}

				.arrow-icon {
					width: 24rpx;
					height: 24rpx;
					filter: brightness(0) invert(1);
				}
			}
		}

		.record-content {
			background-color: #FFFFFF;
			padding: 50rpx 30rpx 40rpx;
			border: 4rpx solid #FF3B4E;
			border-top: none;
			border-radius: 0 0 20rpx 20rpx;
			position: relative;
			overflow: hidden;

			.record-bg-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 1;
				pointer-events: none;
				z-index: 0;
			}

			.reward-cards {
				position: relative;
				z-index: 1;
				display: flex;
				justify-content: space-around;
				margin-bottom: 40rpx;
				position: relative;

				.reward-card {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					&:not(:last-child)::after {
						content: '';
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 1rpx;
						height: 80rpx;
						background-color: #E5E5E5;
					}

					.reward-amount {
						font-size: 48rpx;
						font-weight: bold;
						color: #FF3B4E;
						margin-bottom: 16rpx;
					}

					.reward-status {
						font-size: 26rpx;
						color: #333333;
					}
				}
			}

			.apply-withdraw-btn {
				background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
				height: 88rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 1;
				width: 70%;
				margin: 0 auto;

				.apply-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}

	.invite-record-section {
		margin: 0 30rpx 50rpx;
		border-radius: 20rpx;
		overflow: hidden;
		padding-bottom: 50rpx;

		.invite-record-header {
			background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
			padding: 24rpx 30rpx;

			.record-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.invite-record-content {
			background-color: #FFFFFF;
			border: 4rpx solid #FF3B4E;
			border-top: none;
			border-radius: 0 0 20rpx 20rpx;
			position: relative;
			overflow: hidden;

			.content-bg-stamp {
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
				width: 200rpx;
				height: 200rpx;
				opacity: 0.85;
				pointer-events: none;
				z-index: 0;
			}
		}

		.table-header {
			display: flex;
			background-color: #FFFFFF;
			padding: 24rpx 16rpx;
			border-bottom: 2rpx solid #F0F0F0;
			position: relative;
			z-index: 1;

			.table-col {
				flex: 1;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
			}
		}

		.table-body {
			position: relative;
			z-index: 1;

			.table-row {
				display: flex;
				padding: 24rpx 16rpx;
				border-bottom: 1rpx solid #F0F0F0;
				align-items: center;

				&:last-child {
					border-bottom: none;
				}

				.table-cell {
					flex: 1;
					font-size: 26rpx;
					color: #999999;
					text-align: center;

					&.status-cell {
						display: flex;
						align-items: center;
						justify-content: center;

						.paid-amount {
							font-size: 28rpx;
							font-weight: bold;
							color: #333333;
						}

						.unpaid-text {
							font-size: 28rpx;
							font-weight: bold;
							color: #999999;
						}
					}
				}
			}
		}

		.empty-state {
			padding: 80rpx 0;
			text-align: center;

			.empty-text {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}

	// 提现明细弹窗
	.modal-content {
		width: 600rpx;
		max-height: 70vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.modal-header {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #F0F0F0;
			position: relative;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.close-icon {
				position: absolute;
				right: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.modal-table {
			flex: 1;
			overflow-y: auto;

			.modal-table-header {
				display: flex;
				padding: 24rpx 20rpx;
				background-color: #F8F8F8;
				border-bottom: 1rpx solid #E5E5E5;

				.modal-table-col {
					flex: 1;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					text-align: center;
				}
			}

			.modal-table-body {
				.modal-table-row {
					display: flex;
					padding: 24rpx 20rpx;
					border-bottom: 1rpx solid #F0F0F0;

					&:last-child {
						border-bottom: none;
					}

					.modal-table-cell {
						flex: 1;
						font-size: 26rpx;
						color: #666666;
						text-align: center;
					}
				}
			}
		}
	}

	// 二维码弹窗
	.qrcode-modal-content {
		width: 600rpx;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;

		.qrcode-modal-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
			text-align: center;
		}
		
		.qrcode-tip {
			font-size: 24rpx;
			color: #ff9800;
			margin-bottom: 20rpx;
			text-align: center;
		}

		.qrcode-box {
			width: 440rpx;
			min-height: 440rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
			position: relative;
			overflow: hidden;
			
			.wx-qrcode-image {
				width: 400rpx;
				height: 400rpx;
			}
			
			.unpublished-tip {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 40rpx;
				
				.tip-icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 20rpx;
					opacity: 0.6;
				}
				
				.tip-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #999;
					margin-bottom: 10rpx;
				}
				
				.tip-subtext {
					font-size: 26rpx;
					color: #bbb;
				}
			}
			
			.qrcode-loading {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				font-size: 28rpx;
			}
			
			.qrcode-error {
				color: #ff4d4f;
				font-size: 26rpx;
				text-align: center;
			}
			
			:deep(.u-qrcode__canvas) {
				position: static !important;
				left: auto !important;
				top: auto !important;
				z-index: 1 !important;
			}
			
			:deep(canvas) {
				position: static !important;
				left: auto !important;
				top: auto !important;
			}
		}

		.qrcode-actions {
			display: flex;
			gap: 30rpx;
			width: 100%;

			.qrcode-action-btn {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&.share-action-btn {
					background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
				}

				&.save-action-btn {
					background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
				}

				// 微信原生分享按钮样式重置
				&.share-btn-native {
					border: none;
					padding: 0;
					margin: 0;
					line-height: 80rpx;

					&::after {
						border: none;
					}
				}

				.action-btn-text {
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}

	// 申请提现弹窗 - 原生写法
	.apply-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.apply-modal-wrapper {
		width: 650rpx;
		max-width: 90vw;
		max-height: 80vh;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.apply-modal-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.apply-modal-header {
			background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
			padding: 30rpx 20rpx;
			text-align: center;
			flex-shrink: 0;

			.apply-modal-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				word-break: keep-all;
			}
		}

		.apply-step-content {
			padding: 40rpx 30rpx;
			position: relative;
			background-color: #FFFFFF;
			overflow: hidden;
			flex: 1;

			.step-bg-image {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				opacity: 0.85;
				pointer-events: none;
				z-index: 0;
			}

			.step-label {
				font-size: 26rpx;
				color: #333333;
				font-weight: bold;
				display: block;
				margin-bottom: 20rpx;
				position: relative;
				z-index: 1;
				line-height: 1.5;
				word-break: break-word;
			}

			.amount-input-row {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16rpx;
				position: relative;
				z-index: 1;

				.amount-input {
					flex: 1;
					height: 80rpx;
					background-color: #FFFFFF;
					border: 1rpx solid #E5E5E5;
					border-radius: 12rpx;
					padding: 0 20rpx;
					font-size: 32rpx;
					text-align: center;
				}

				.currency-text {
					font-size: 32rpx;
					color: #333333;
					margin-left: 16rpx;
				}
			}

			.amount-hint {
				font-size: 24rpx;
				color: #999999;
				text-align: center;
				display: block;
				margin-bottom: 40rpx;
				position: relative;
				z-index: 1;
			}

			.payment-methods {
				display: flex;
				gap: 16rpx;
				margin-bottom: 30rpx;
				position: relative;
				z-index: 1;

				.payment-method {
					flex: 1;
					height: 88rpx;
					background-color: #E8E8E8;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 12rpx;

					&.active {
						background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);

						.method-text {
							color: #FFFFFF;
						}
					}

					.method-text {
						font-size: 28rpx;
						color: #666666;
						font-weight: 500;
						text-align: center;
						line-height: 1.2;
					}
				}
			}

			.upload-area {
				width: 200rpx;
				height: 200rpx;
				border: 2rpx dashed #CCCCCC;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto 40rpx;
				background-color: #FFFFFF;
				position: relative;
				z-index: 1;

				.upload-icon {
					font-size: 80rpx;
					color: #CCCCCC;
				}

				.uploaded-image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}

			.form-item {
				margin-bottom: 20rpx;
				position: relative;
				z-index: 1;

				.form-label {
					font-size: 24rpx;
					color: #666666;
					display: block;
					margin-bottom: 10rpx;
					line-height: 1.5;
					word-break: break-word;
				}

				.form-input {
					width: 100%;
					height: 80rpx;
					background-color: #FFFFFF;
					border: 1rpx solid #E5E5E5;
					border-radius: 12rpx;
					padding: 0 20rpx;
					font-size: 26rpx;
					box-sizing: border-box;
				}
			}

			.apply-btn {
				background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
				height: 88rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 1;
				margin-top: 20rpx;

				.apply-btn-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
</style>