<template>
	<view class="page-container">
		<!-- 顶部蓝色头部 -->
		<view class="header-section">
			<view class="header-content">
				<view class="header-title-row">
					<view class="header-title-group">
						<text class="header-title">分销获客统计</text>
						<text class="header-subtitle">实时数据 · 精准统计</text>
					</view>
					<view class="header-actions">
						<view class="settings-btn" @click="openChangePasswordPopup">
							<view class="settings-circle">
								<uni-icons type="gear" size="20" color="#2563eb"></uni-icons>
							</view>
							<text class="settings-text">设置</text>
						</view>
					</view>
				</view>
				<view class="channel-row">
					<view class="channel-left">
						<text class="channel-label">渠道名称</text>
						<text class="channel-name">{{ channelInfo.name || '--' }}</text>
					</view>
					<view class="channel-code-pill">
						<text class="channel-code-label">分销编码</text>
						<text class="channel-code-text">{{ channelInfo.code || '--' }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 统计卡片区域（严格贴近视觉稿布局） -->
		<view class="stats-section">
			<!-- 顶部大卡片：可提现金额 + 收益概览 -->
			<view class="stats-main-card">
				<!-- 当前可提现金额 -->
				<view class="withdraw-header-row">
					<view class="withdraw-title-wrap">
						<view class="withdraw-icon-wrap">
							<uni-icons type="wallet" size="18" color="#4f46e5"></uni-icons>
						</view>
						<text class="withdraw-label">当前可提现金额</text>
					</view>
				</view>

				<view class="withdraw-amount-row">
					<text class="withdraw-currency">¥</text>
					<text class="withdraw-amount-text">
						{{ (statistics.withdrawableAmount || 0).toFixed(2) }}
					</text>
				</view>

				<view class="withdraw-button-row">
					<button class="withdraw-button" :disabled="statisticsLoading" @click="handleWithdraw">
						<uni-icons v-if="!statisticsLoading" type="arrow-up" size="20" color="#fff"></uni-icons>
						<uni-icons v-else type="spinner-cycle" size="20" color="#fff"></uni-icons>
						<text class="withdraw-btn-text">{{ statisticsLoading ? '处理中...' : '一键提现' }}</text>
					</button>
				</view>

				<!-- 底部三栏收益概览 -->
				<view class="revenue-divider"></view>
				<view class="revenue-row">
					<view class="revenue-item">
						<text class="revenue-label">总收益</text>
						<text class="revenue-value">¥{{ (statistics.totalRevenue || 0).toFixed(2) }}</text>
					</view>
					<view class="revenue-item">
						<text class="revenue-label">待审核</text>
						<text class="revenue-value pending">¥{{ (statistics.pendingReview || 0).toFixed(2) }}</text>
					</view>
					<view class="revenue-item">
						<text class="revenue-label">已提现</text>
						<text class="revenue-value">¥{{ (statistics.withdrawn || 0).toFixed(2) }}</text>
					</view>
				</view>
			</view>

			<!-- 下方两张小卡片：总加好友数 / 总获客数 -->
			<view class="acquisition-row">
				<view class="acquisition-card">
					<view class="acquisition-header-row">
						<view class="acquisition-icon friends-icon">
							<uni-icons type="plusempty" size="30" color="#4f46e5"></uni-icons>
						</view>
						<text class="acquisition-title-text">总加好友数</text>
					</view>
					<view class="acquisition-bottom-row">
						<text class="acquisition-main-number">{{ statistics.totalFriends || 0 }}</text>
						<text class="acquisition-main-sub">今日 {{ statistics.todayFriends || 0 }}</text>
					</view>
					<view class="acquisition-bg-circle friends-circle"></view>
				</view>

				<view class="acquisition-card">
					<view class="acquisition-header-row">
						<view class="acquisition-icon customer-icon">
							<uni-icons type="person-filled" size="30" color="#a855f7"></uni-icons>
						</view>
						<text class="acquisition-title-text">总获客数</text>
					</view>
					<view class="acquisition-bottom-row">
						<text class="acquisition-main-number">{{ statistics.totalCustomers || 0 }}</text>
						<text class="acquisition-main-sub">今日 {{ statistics.todayCustomers || 0 }}</text>
					</view>
					<view class="acquisition-bg-circle customer-circle"></view>
				</view>
			</view>
		</view>

		<!-- 明细记录（整体卡片） -->
		<view class="records-section">
			<view class="records-header">
				<uni-icons type="list" size="20" color="#333"></uni-icons>
				<text class="records-title">明细记录</text>
			</view>

			<!-- 标签页（胶囊样式） -->
			<view class="tabs-container">
				<view class="tabs-pill">
					<view 
						class="tab-item" 
						:class="{'active': currentTab === 'revenue'}" 
						@click="switchTab('revenue')"
					>
						收益明细
					</view>
					<view 
						class="tab-item" 
						:class="{'active': currentTab === 'withdraw'}" 
						@click="switchTab('withdraw')"
					>
						提现明细
					</view>
				</view>
			</view>

			<!-- 筛选条件卡片（始终展开） -->
			<view class="filter-section">
				<view class="filter-card">
					<view class="filter-header-row">
						<view class="filter-header-left">
							<uni-icons type="spinner" size="18" color="#6b7280"></uni-icons>
							<text class="filter-title">筛选条件</text>
						</view>
						<!-- 预留图标位，可去掉展开/收起逻辑 -->
						<uni-icons type="arrowdown" size="16" color="#d1d5db"></uni-icons>
					</view>
					<view class="filter-content">
						<!-- 收益明细：类型 + 时间 -->
						<template v-if="currentTab === 'revenue'">
							<view class="filter-item">
								<text class="filter-label">类型</text>
								<picker mode="selector" :range="typeOptions" :value="selectedTypeIndex" @change="onTypeChange">
									<view class="filter-picker">
										<text>{{ typeOptions[selectedTypeIndex] }}</text>
										<uni-icons type="arrowdown" size="14" color="#9ca3af"></uni-icons>
									</view>
								</picker>
							</view>
							<view class="filter-item">
								<text class="filter-label">时间</text>
								<picker mode="date" :value="selectedDate" @change="onDateChange">
									<view class="filter-picker">
										<text>{{ selectedDate || '选择日期' }}</text>
										<uni-icons type="calendar" size="14" color="#9ca3af"></uni-icons>
									</view>
								</picker>
							</view>
						</template>

						<!-- 提现明细：状态 + 到账方式 -->
						<template v-else>
							<view class="filter-item">
								<text class="filter-label">状态</text>
								<picker mode="selector" :range="statusOptions" :value="selectedStatusIndex" @change="onStatusChange">
									<view class="filter-picker">
										<text>{{ statusOptions[selectedStatusIndex] }}</text>
										<uni-icons type="arrowdown" size="14" color="#9ca3af"></uni-icons>
									</view>
								</picker>
							</view>
							<view class="filter-item">
								<text class="filter-label">到账方式</text>
								<picker mode="selector" :range="payTypeOptions" :value="selectedPayTypeIndex" @change="onPayTypeChange">
									<view class="filter-picker">
										<text>{{ payTypeOptions[selectedPayTypeIndex] }}</text>
										<uni-icons type="arrowdown" size="14" color="#9ca3af"></uni-icons>
									</view>
								</picker>
							</view>
						</template>
					</view>
				</view>
			</view>

			<!-- 记录列表 -->
			<view class="records-list">
				<view class="records-count">
					<text>共{{ totalRecords }}条记录</text>
					<view class="records-count-pill">
						<text class="current-count">
							{{ Math.min(currentPage * pageSize, totalRecords) }} / {{ totalRecords }}条
						</text>
					</view>
				</view>
				<!-- 加载中状态 -->
				<view v-if="loading && recordsList.length === 0" class="loading-state">
					<uni-icons type="spinner-cycle" size="40" color="#6366f1"></uni-icons>
					<text class="loading-text">加载中...</text>
				</view>
				<!-- 空状态 -->
				<view v-else-if="recordsList.length === 0 && !loading" class="empty-state">
					<uni-icons type="info" size="40" color="#ccc"></uni-icons>
					<text class="empty-text">暂无记录</text>
				</view>
				<!-- 记录列表 -->
				<view v-else>
					<!-- 收益明细样式 -->
					<view v-if="currentTab === 'revenue'">
						<view v-for="(item, index) in recordsList" :key="index" class="record-item">
							<view class="record-main-row">
								<view class="record-title-wrap">
									<text class="record-name">{{ item.sourceType || '-' }}</text>
									<view 
										class="record-badge" 
										:class="{'badge-acquisition': item.type === 'acquisition', 'badge-friend': item.type === 'friend'}"
									>
										{{ item.typeLabel || '' }}
									</view>
								</view>
								<text class="record-amount" :class="{'amount-positive': item.amount > 0}">
									{{ item.amount > 0 ? '+' : '' }}¥{{ item.amount.toFixed(2) }}
								</text>
							</view>
							<view class="record-meta-row">
								<view class="record-time-wrap">
									<uni-icons type="time" size="16" color="#9ca3af"></uni-icons>
									<text class="record-time">{{ item.createTime }}</text>
								</view>
								<text class="record-meta-type">收益</text>
							</view>
							<view v-if="item.remark" class="record-remark">
								<text class="remark-label">备注：</text>
								<text class="remark-value">{{ item.remark }}</text>
							</view>
						</view>
					</view>

					<!-- 提现明细样式 -->
					<view v-else>
						<view v-for="(item, index) in recordsList" :key="index" class="record-item withdraw-record-item">
							<view class="withdraw-main-row">
								<view class="withdraw-main-left">
									<text class="withdraw-title">
										<text v-if="item.status === 'approved' && item.payTypeLabel">提现到 {{ item.payTypeLabel }}</text>
										<text v-else>提现申请</text>
									</text>
								</view>
								<text class="withdraw-amount">
									¥{{ Number(item.amount || 0).toFixed(2) }}
								</text>
							</view>

							<view class="withdraw-tags-row">
								<view 
									class="withdraw-tag status-tag" 
									:class="'status-' + (item.status || '')"
								>
									{{ item.statusLabel || '状态未知' }}
								</view>
								<view v-if="item.payTypeLabel && item.status === 'approved'" class="withdraw-tag">
									{{ item.payTypeLabel }}
								</view>
								<view v-if="item.reviewer" class="withdraw-tag">
									审核：{{ item.reviewer }}
								</view>
							</view>

							<view class="withdraw-meta-row">
								<view class="withdraw-meta-item">
									<text class="meta-label">申请时间</text>
									<text class="meta-value">{{ item.applyTime || '-' }}</text>
								</view>
								<view class="withdraw-meta-item">
									<text class="meta-label">审核时间</text>
									<text class="meta-value">{{ item.reviewTime || '-' }}</text>
								</view>
							</view>

							<view v-if="item.remark" class="withdraw-remark">
								<text class="meta-label">备注</text>
								<text class="meta-value">{{ item.remark }}</text>
							</view>
						</view>
					</view>

					<!-- 加载更多 -->
					<view v-if="hasMore && recordsList.length > 0" class="load-more" @click="loadMore">
						<text v-if="loading" class="load-more-text">加载中...</text>
						<text v-else class="load-more-text">加载更多记录...</text>
					</view>
					<view v-else-if="!hasMore && recordsList.length > 0" class="load-more">
						<text class="load-more-text no-more">没有更多了</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 修改密码弹框 -->
		<uni-popup ref="changePasswordPopup" type="center" :mask-click="false">
			<view class="password-popup">
				<view class="password-popup-header">
					<text class="password-popup-title">修改密码</text>
					<text class="password-popup-subtitle">
						请设置新密码，建议使用字母、数字组合，长度不少于6位
					</text>
				</view>
				
				<!-- 表单区域 -->
				<view class="password-popup-form">
					<view class="password-form-item">
						<view class="password-form-label">
							<uni-icons type="locked" size="16" color="#6366f1"></uni-icons>
							<text class="label-text">原密码</text>
						</view>
						<view class="password-input-wrapper">
							<input
								class="password-input"
								type="password"
								v-model="passwordForm.oldPassword"
								placeholder="请输入原密码"
								placeholder-class="password-placeholder"
								maxlength="50"
							/>
						</view>
					</view>
					
					<view class="password-form-item">
						<view class="password-form-label">
							<uni-icons type="locked" size="16" color="#6366f1"></uni-icons>
							<text class="label-text">新密码</text>
						</view>
						<view class="password-input-wrapper">
							<input
								class="password-input"
								type="password"
								v-model="passwordForm.newPassword"
								placeholder="请输入新密码（至少6位）"
								placeholder-class="password-placeholder"
								maxlength="50"
							/>
						</view>
					</view>
					
					<view class="password-form-item">
						<view class="password-form-label">
							<uni-icons type="locked" size="16" color="#6366f1"></uni-icons>
							<text class="label-text">确认新密码</text>
						</view>
						<view class="password-input-wrapper">
							<input
								class="password-input"
								type="password"
								v-model="passwordForm.confirmPassword"
								placeholder="请再次输入新密码"
								placeholder-class="password-placeholder"
								maxlength="50"
							/>
						</view>
					</view>
				</view>
				
				<!-- 提示信息 -->
				<view class="password-popup-info">
					<view class="password-info-row">
						<view class="password-info-dot"></view>
						<text class="password-info-text">
							密码长度至少6位，建议使用字母、数字组合
						</text>
					</view>
					<view class="password-info-row">
						<view class="password-info-dot"></view>
						<text class="password-info-text">
							修改密码后需要重新登录
						</text>
					</view>
				</view>
				
				<view class="password-popup-footer">
					<button class="password-popup-btn cancel" @click="closeChangePasswordPopup">取消</button>
					<button class="password-popup-btn confirm" @click="confirmChangePassword" :disabled="passwordLoading">
						{{ passwordLoading ? '修改中...' : '确认修改' }}
					</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 提现申请弹框 -->
		<uni-popup ref="withdrawPopup" type="center" :mask-click="false">
			<view class="withdraw-popup">
				<view class="withdraw-popup-header">
					<text class="withdraw-popup-title">提交提现申请</text>
					<text class="withdraw-popup-subtitle">
						将提交提现申请，金额为可提现的全部余额，可根据需要调整金额
					</text>
				</view>
				
				<!-- 金额卡片 -->
				<view class="withdraw-popup-card">
					<view class="withdraw-popup-card-top">
						<view class="withdraw-popup-card-left">
							<text class="card-main-label">可提现余额</text>
							<text class="card-sub-label" @click="setFullWithdraw">全部提现</text>
						</view>
						<view class="withdraw-popup-amount-wrap">
							<text class="withdraw-popup-amount-currency"></text>
							<input
								class="withdraw-popup-amount-input"
								type="digit"
								v-model="withdrawFormAmount"
								placeholder="0.00"
								placeholder-class="withdraw-popup-placeholder"
							/>
						</view>
					</view>
				</view>
				
				<!-- 提示信息 -->
				<view class="withdraw-popup-info">
					<view class="withdraw-info-row">
						<view class="withdraw-info-dot"></view>
						<text class="withdraw-info-text">
							申请提现金额：¥{{ Number(withdrawFormAmount || statistics.withdrawableAmount || 0).toFixed(2) }}
						</text>
					</view>
					<view class="withdraw-info-row">
						<view class="withdraw-info-dot"></view>
						<text class="withdraw-info-text">
							提现申请提交后，等待管理员审核
						</text>
					</view>
					<view class="withdraw-info-row">
						<view class="withdraw-info-dot"></view>
						<text class="withdraw-info-text">
							审核通过后将尽快打款
						</text>
					</view>
				</view>
				
				<view class="withdraw-popup-footer">
					<button class="withdraw-popup-btn cancel" @click="closeWithdrawPopup">取消</button>
					<button class="withdraw-popup-btn confirm" @click="confirmWithdraw" :disabled="statisticsLoading">
						{{ statisticsLoading ? '处理中...' : '提交申请' }}
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '@/config';
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				token: '',
				channelInfo: {
					name: '',
					code: ''
				},
				statistics: {
					withdrawableAmount: 0,
					totalRevenue: 0,
					pendingReview: 0,
					withdrawn: 0,
					totalFriends: 0,
					todayFriends: 0,
					totalCustomers: 0,
					todayCustomers: 0
				},
				currentTab: 'revenue', // revenue | withdraw
				showFilter: false,
				// 收益明细筛选
				typeOptions: ['全部', '获客', '加好友'],
				selectedTypeIndex: 0,
				selectedDate: '',
				// 提现明细筛选
				statusOptions: ['全部', '审核中', '已通过', '已拒绝'],
				selectedStatusIndex: 0,
				payTypeOptions: ['全部', '微信', '支付宝', '银行卡'],
				selectedPayTypeIndex: 0,
				// 提现弹框
				withdrawFormAmount: '',
				// 修改密码弹框
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				passwordLoading: false,
				recordsList: [],
				totalRecords: 0,
				currentPage: 1,
				pageSize: 10,
				hasMore: true,
				loading: false,
				statisticsLoading: false
			}
		},
		onLoad(options) {
			// 令牌校验
			this.token = uni.getStorageSync('channelToken');
			if (!this.token) {
				uni.showToast({ title: '请先登录', icon: 'none', duration: 2000 });
				setTimeout(() => {
					uni.redirectTo({ url: '/pages/channel/login' });
				}, 1500);
				return;
			}

			// 从本地存储或URL参数获取渠道信息
			let storedCode = uni.getStorageSync('channelCode');
			let storedName = uni.getStorageSync('channelName');
			
			console.log('页面加载 - 从本地存储获取:', { storedCode, storedName });
			
			// 如果单独保存的channelCode为空，尝试从完整登录数据中恢复
			if (!storedCode) {
				try {
					const loginDataStr = uni.getStorageSync('channelLoginData');
					if (loginDataStr) {
						const loginData = JSON.parse(loginDataStr);
						console.log('从完整登录数据恢复:', loginData);
						
						const channelInfo = loginData.channelInfo || {};
						if (channelInfo.channelCode) {
							storedCode = channelInfo.channelCode;
							uni.setStorageSync('channelCode', storedCode);
							console.log('从完整登录数据恢复channelCode:', storedCode);
						}
						if (channelInfo.channelName) {
							storedName = channelInfo.channelName;
							uni.setStorageSync('channelName', storedName);
							console.log('从完整登录数据恢复channelName:', storedName);
						}
					}
				} catch (e) {
					console.error('解析完整登录数据失败:', e);
				}
			}
			
			if (storedCode) {
				this.channelInfo.code = storedCode;
			} else if (options.code) {
				this.channelInfo.code = options.code;
			}
			
			if (storedName) {
				this.channelInfo.name = storedName;
			} else if (options.name) {
				this.channelInfo.name = decodeURIComponent(options.name);
			}
			
			console.log('页面加载 - 当前channelInfo:', this.channelInfo);
			
			uni.setNavigationBarTitle({
				title: '分销获客统计'
			});
			
			this.loadData();
		},
		onPullDownRefresh() {
			this.refreshData();
		},
		methods: {
			/**
			 * 统一的渠道API请求方法
			 * @param {Object} options - 请求配置
			 * @returns {Promise} 请求Promise
			 */
			channelRequest(options) {
				return new Promise((resolve, reject) => {
					// 检查token
					if (!this.token) {
						reject(new Error('未登录'));
						return;
					}
					
					// 检查channelCode
					if (options.needChannelCode && !this.channelInfo.code) {
						const storedCode = uni.getStorageSync('channelCode');
						if (storedCode) {
							this.channelInfo.code = storedCode;
						} else {
							reject(new Error('缺少渠道编码'));
							return;
						}
					}
					
					uni.request({
						method: options.method || 'GET',
						url: config.apiUrl2 + options.url,
						data: options.data || {},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							Authorization: `Bearer ${this.token}`
						},
						success: (response) => {
							// 统一处理响应
							if (response.data.code === 10000 || response.data.code === 200) {
								resolve(response.data);
							} else {
								// 处理业务错误
								const errorMsg = response.data.message || response.data.msg || '请求失败';
								// 如果是token失效，跳转登录
								if (response.data.code === 401 || response.data.code === 10030) {
									uni.showToast({
										title: '登录已过期，请重新登录',
										icon: 'none',
										duration: 2000
									});
									setTimeout(() => {
										uni.redirectTo({ url: '/pages/channel/login' });
									}, 1500);
									reject(new Error('登录已过期'));
								} else {
									reject(new Error(errorMsg));
								}
							}
						},
						fail: (error) => {
							console.error('请求失败:', error);
							reject(error);
						}
					});
				});
			},
			
			/**
			 * 统一错误处理
			 * @param {Error} error - 错误对象
			 * @param {String} defaultMsg - 默认错误消息
			 */
			handleError(error, defaultMsg = '操作失败，请重试') {
				const errorMsg = error.message || error.errMsg || defaultMsg;
				uni.showToast({
					title: errorMsg,
					icon: 'none',
					duration: 2000
				});
			},
			
			/**
			 * 获取渠道编码（带容错处理）
			 */
			getChannelCode() {
				if (this.channelInfo.code) {
					return this.channelInfo.code;
				}
				const storedCode = uni.getStorageSync('channelCode');
				if (storedCode) {
					this.channelInfo.code = storedCode;
					return storedCode;
				}
				return null;
			},
			
			// 加载数据
			async loadData() {
				// 并行加载统计数据和记录列表
				await Promise.all([
					this.loadStatistics(),
					this.loadRecords()
				]);
			},
			
			// 加载统计数据
			async loadStatistics() {
				const channelCode = this.getChannelCode();
				console.log('loadStatistics - 获取到的channelCode:', channelCode);
				
				if (!channelCode) {
					console.error('缺少channelCode，无法加载统计数据');
					// 尝试从本地存储重新获取
					const storedCode = uni.getStorageSync('channelCode');
					console.log('loadStatistics - 从本地存储重新获取:', storedCode);
					if (storedCode) {
						this.channelInfo.code = storedCode;
						// 递归调用一次
						return this.loadStatistics();
					}
					this.handleError(new Error('缺少渠道编码，请重新登录'), '无法加载统计数据');
					uni.stopPullDownRefresh();
					return;
				}
				
				this.statisticsLoading = true;
				console.log('loadStatistics - 开始请求接口，channelCode:', channelCode);
				
				try {
					const response = await this.channelRequest({
						url: '/v1/frontend/distribution/user/home',
						method: 'GET',
						data: {
							channelCode: channelCode
						},
						needChannelCode: false // 已经检查过了，不需要再次检查
					});
					
					const data = response.data || {};
					const channelInfo = data.channelInfo || {};
					const financialStats = data.financialStats || {};
					const customerStats = data.customerStats || {};
					
					console.log('loadStatistics - 接口返回数据:', { 
						data, 
						channelInfo, 
						financialStats, 
						customerStats 
					});
					
					// 更新渠道信息 - 优先从channelInfo获取，兼容直接返回在data中的情况
					const updatedChannelCode = channelInfo.channelCode || data.code || this.channelInfo.code;
					const updatedChannelName = channelInfo.channelName || data.name || this.channelInfo.name;
					
					console.log('loadStatistics - 更新后的渠道信息:', { updatedChannelCode, updatedChannelName });
					
					this.channelInfo = {
						name: updatedChannelName,
						code: updatedChannelCode
					};
					
					// 更新本地存储
					if (updatedChannelCode) {
						uni.setStorageSync('channelCode', updatedChannelCode);
						console.log('loadStatistics - 已保存channelCode到本地存储:', updatedChannelCode);
					}
					if (updatedChannelName) {
						uni.setStorageSync('channelName', updatedChannelName);
						console.log('loadStatistics - 已保存channelName到本地存储:', updatedChannelName);
					}
					
					// 更新统计数据 - 从financialStats和customerStats中获取
					// 兼容旧的数据结构（直接返回在data中）
					this.statistics = {
						withdrawableAmount: parseFloat(financialStats.withdrawableAmount || data.withdrawableAmount || 0),
						totalRevenue: parseFloat(financialStats.totalRevenue || data.totalRevenue || 0),
						pendingReview: parseFloat(financialStats.pendingReview || data.pendingReview || 0),
						withdrawn: parseFloat(financialStats.withdrawn || data.withdrawn || 0),
						totalFriends: parseInt(customerStats.totalFriends || data.totalFriends || 0),
						todayFriends: parseInt(customerStats.todayFriends || data.todayFriends || 0),
						totalCustomers: parseInt(customerStats.totalCustomers || data.totalCustomers || 0),
						todayCustomers: parseInt(customerStats.todayCustomers || data.todayCustomers || 0)
					};
					
					console.log('loadStatistics - 更新后的统计数据:', this.statistics);
				} catch (error) {
					console.error('加载统计数据失败:', error);
					this.handleError(error, '加载统计数据失败');
				} finally {
					this.statisticsLoading = false;
					// 如果是在下拉刷新时，且loadRecords还没完成，这里不停止刷新
					// 让loadRecords完成后统一停止
				}
			},
			
			// 加载记录列表
			async loadRecords() {
				if (this.loading) return;
				
				const channelCode = this.getChannelCode();
				if (!channelCode) {
					console.error('缺少channelCode');
					return;
				}
				
				this.loading = true;
				
				try {
					// 根据当前标签页选择不同的接口与筛选参数
					const url = this.currentTab === 'revenue'
						? '/v1/frontend/distribution/user/revenue-records'
						: '/v1/frontend/distribution/user/withdrawal-records';

					const requestData = {
						channelCode: channelCode,
						page: this.currentPage,
						limit: this.pageSize
					};

					if (this.currentTab === 'revenue') {
						requestData.filterType = this.selectedTypeIndex === 0 ? '' : this.typeOptions[this.selectedTypeIndex];
						requestData.date = this.selectedDate;
					} else {
						// 状态映射：全部 / 审核中 / 已通过 / 已拒绝
						const statusMap = ['all', 'pending', 'approved', 'rejected'];
						const payTypeMap = ['all', 'wechat', 'alipay','bankcard'];
						requestData.status = statusMap[this.selectedStatusIndex] || '';
						requestData.payType = payTypeMap[this.selectedPayTypeIndex] || '';
					}

					const response = await this.channelRequest({
						url,
						method: 'GET',
						data: requestData,
						needChannelCode: true
					});
					
					const data = response.data || {};
					const list = data.list || data.records || [];
					
					if (this.currentPage === 1) {
						this.recordsList = list;
					} else {
						this.recordsList = [...this.recordsList, ...list];
					}
					
					this.totalRecords = data.total || 0;
					this.hasMore = this.recordsList.length < this.totalRecords;
				} catch (error) {
					this.handleError(error, '加载记录失败');
				} finally {
					this.loading = false;
				}
			},
			
			// 刷新数据
			async refreshData() {
				try {
					// 重置状态
					this.currentPage = 1;
					this.hasMore = true;
					this.recordsList = [];
					this.loading = false;
					this.statisticsLoading = false;
					
					// 确保有channelCode
					if (!this.channelInfo.code) {
						const storedCode = uni.getStorageSync('channelCode');
						if (storedCode) {
							this.channelInfo.code = storedCode;
						}
					}
					
					// 重新加载数据
					await this.loadData();
				} catch (error) {
					console.error('刷新数据失败:', error);
				} finally {
					// 确保下拉刷新状态被停止
					uni.stopPullDownRefresh();
				}
			},
			
			// 切换标签页
			switchTab(tab) {
				if (this.currentTab === tab) return;
				this.currentTab = tab;
				this.currentPage = 1;
				this.recordsList = [];
				this.loadRecords();
			},
			
			// 切换筛选条件显示
			toggleFilter() {
				this.showFilter = !this.showFilter;
			},
			
			// 类型选择变化
			onTypeChange(e) {
				this.selectedTypeIndex = e.detail.value;
				this.currentPage = 1;
				this.recordsList = [];
				this.loadRecords();
			},
			
			// 日期选择变化（收益明细）
			onDateChange(e) {
				this.selectedDate = e.detail.value;
				this.currentPage = 1;
				this.recordsList = [];
				this.loadRecords();
			},

			// 状态选择变化（提现明细）
			onStatusChange(e) {
				this.selectedStatusIndex = e.detail.value;
				this.currentPage = 1;
				this.recordsList = [];
				this.loadRecords();
			},

			// 到账方式选择变化（提现明细）
			onPayTypeChange(e) {
				this.selectedPayTypeIndex = e.detail.value;
				this.currentPage = 1;
				this.recordsList = [];
				this.loadRecords();
			},
			
			// 加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.currentPage++;
					this.loadRecords();
				}
			},
			
			// 一键提现 - 打开弹框
			handleWithdraw() {
				if (this.statistics.withdrawableAmount <= 0) {
					uni.showToast({
						title: '暂无可提现金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				this.withdrawFormAmount = (this.statistics.withdrawableAmount || 0).toFixed(2);
				this.$refs.withdrawPopup && this.$refs.withdrawPopup.open();
			},

			// 设置为全部提现
			setFullWithdraw() {
				this.withdrawFormAmount = (this.statistics.withdrawableAmount || 0).toFixed(2);
			},

			// 关闭提现弹框
			closeWithdrawPopup() {
				this.$refs.withdrawPopup && this.$refs.withdrawPopup.close();
			},

			// 确认提现
			async confirmWithdraw() {
				const maxAmount = Number(this.statistics.withdrawableAmount || 0);
				let amount = Number(this.withdrawFormAmount);

				if (isNaN(amount) || amount <= 0) {
					uni.showToast({
						title: '请输入正确的提现金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				if (amount > maxAmount) {
					uni.showToast({
						title: `最多可提现 ¥${maxAmount.toFixed(2)}`,
						icon: 'none',
						duration: 2000
					});
					return;
				}

				const channelCode = this.getChannelCode();
				if (!channelCode) {
					uni.showToast({
						title: '缺少渠道编码',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				try {
					this.statisticsLoading = true;
					await this.channelRequest({
						url: '/v1/distribution/withdrawals',
						method: 'POST',
						data: {
							channelCode,
							amount
						},
						needChannelCode: true
					});

					uni.showToast({
						title: '提现申请已提交',
						icon: 'success',
						duration: 2000
					});

					this.closeWithdrawPopup();

					// 刷新统计与记录
					setTimeout(() => {
						this.refreshData();
					}, 1200);
				} catch (error) {
					this.handleError(error, '提现失败，请重试');
				} finally {
					this.statisticsLoading = false;
				}
			},
			
			// 打开修改密码弹框
			openChangePasswordPopup() {
				// 重置表单
				this.passwordForm = {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				};
				this.$refs.changePasswordPopup && this.$refs.changePasswordPopup.open();
			},
			
			// 关闭修改密码弹框
			closeChangePasswordPopup() {
				this.$refs.changePasswordPopup && this.$refs.changePasswordPopup.close();
				// 清空表单
				this.passwordForm = {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				};
			},
			
			// 验证密码表单
			validatePasswordForm() {
				if (!this.passwordForm.oldPassword || !this.passwordForm.oldPassword.trim()) {
					uni.showToast({
						title: '请输入原密码',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				
				if (!this.passwordForm.newPassword || !this.passwordForm.newPassword.trim()) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				
				if (this.passwordForm.newPassword.length < 6) {
					uni.showToast({
						title: '新密码长度至少6位',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				
				if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
					uni.showToast({
						title: '两次输入的新密码不一致',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				
				if (this.passwordForm.oldPassword === this.passwordForm.newPassword) {
					uni.showToast({
						title: '新密码不能与原密码相同',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				
				return true;
			},
			
			// 确认修改密码
			async confirmChangePassword() {
				if (this.passwordLoading) return;
				
				if (!this.validatePasswordForm()) {
					return;
				}
				
				const channelCode = this.getChannelCode();
				if (!channelCode) {
					uni.showToast({
						title: '缺少渠道编码',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				try {
					this.passwordLoading = true;
					
					// 准备请求参数
					const requestData = {
						channelCode: channelCode,
						oldPassword: this.passwordForm.oldPassword.trim(),
						newPassword: this.passwordForm.newPassword.trim()
					};
					
					console.log('修改密码请求参数:', {
						url: '/v1/frontend/distribution/user/change-password',
						data: {
							...requestData,
							oldPassword: '***', // 隐藏密码
							newPassword: '***'  // 隐藏密码
						}
					});
					
					const response = await this.channelRequest({
						url: '/v1/frontend/distribution/user/change-password',
						method: 'POST',
						data: requestData,
						needChannelCode: true
					});
					
					console.log('修改密码接口响应:', response);
					
					uni.showToast({
						title: '密码修改成功',
						icon: 'success',
						duration: 2000
					});
					
					this.closeChangePasswordPopup();
					
					// 提示重新登录
					setTimeout(() => {
						uni.showModal({
							title: '提示',
							content: '密码已修改，请重新登录',
							showCancel: false,
							confirmText: '确定',
							success: (res) => {
								if (res.confirm) {
									// 获取companyId（在清除之前获取）
									const companyId = uni.getStorageSync('channelCompanyId') || '';
									
									// 清除登录信息
									uni.removeStorageSync('channelToken');
									uni.removeStorageSync('channelCode');
									uni.removeStorageSync('channelName');
									uni.removeStorageSync('channelLoginData');
									// 注意：不清除channelCompanyId，因为退出登录时需要用到
									
									// 跳转到登录页，带上companyId
									const loginUrl = companyId 
										? `/pages/channel/login?companyId=${companyId}`
										: '/pages/channel/login';
									
									uni.redirectTo({
										url: loginUrl
									});
								}
							}
						});
					}, 1500);
				} catch (error) {
					console.error('修改密码失败:', error);
					this.handleError(error, '修改密码失败，请重试');
				} finally {
					this.passwordLoading = false;
				}
			}
		}
	}
</script>

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

/* 顶部蓝色头部 */
.header-section {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e40af 100%);
	padding: 56rpx 30rpx 120rpx;
	color: #fff;
	border-bottom-left-radius: 40rpx;
	border-bottom-right-radius: 40rpx;
}

.header-content {
	position: relative;
}

.header-title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 40rpx;
}

.header-title-group {
	flex: 1;
}

.header-title {
	display: block;
	font-size: 44rpx;
	font-weight: 600;
	margin-bottom: 12rpx;
}

.header-subtitle {
	display: block;
	font-size: 24rpx;
	opacity: 0.9;
}

.header-actions {
	display: flex;
	align-items: center;
}

.settings-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
	padding: 0;
}

.settings-text {
	font-size: 22rpx;
	color: #fff;
}

.settings-circle {
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.25);
}

.channel-info {
	display: none;
}

.channel-row {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.channel-left {
	flex: 1;
}

.channel-label {
	font-size: 24rpx;
	opacity: 0.85;
}

.channel-name {
	display: block;
	margin-top: 8rpx;
	font-size: 32rpx;
	font-weight: 600;
}

.channel-code-pill {
	margin-left: 16rpx;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: 360rpx;
}

.channel-code-label {
	font-size: 22rpx;
	opacity: 0.8;
	margin-bottom: 4rpx;
}

.channel-code-text {
	font-size: 22rpx;
	font-weight: 500;
	letter-spacing: 2rpx;
}

/* 统计卡片区域（贴近效果图） */
.stats-section {
	padding: 0 30rpx 30rpx;
	margin-top: -60rpx; /* 白卡片稍微压在蓝色圆角上 */
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

/* 顶部大统计卡片 */
.stats-main-card {
	background: #ffffff;
	border-radius: 32rpx;
	padding: 32rpx 30rpx 28rpx;
	box-shadow: 0 20rpx 40rpx rgba(15, 23, 42, 0.16);
}

.withdraw-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.withdraw-title-wrap {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.withdraw-icon-wrap {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background: rgba(79, 70, 229, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.withdraw-label {
	font-size: 24rpx;
	color: #9ca3af;
}

.withdraw-amount-row {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	margin: 24rpx 0 32rpx;
}

.withdraw-currency {
	font-size: 60rpx;
	color: #111827;
	font-weight: 700;
	margin-right: 4rpx;
}

.withdraw-amount-text {
	font-size: 60rpx;
	font-weight: 700;
	color: #111827;
}

.withdraw-button-row {
	display: flex;
	justify-content: center;
	margin-bottom: 32rpx;
}

.withdraw-button {
	width: 100%;
	height: 96rpx;
	background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
	border: none;
	border-radius: 30rpx;
	color: #fff;
	font-size: 30rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
	&:disabled {
		opacity: 0.7;
	}
}

.withdraw-btn-text {
	color: #fff;
}

.revenue-divider {
	height: 1rpx;
	background: #e5e7eb;
	margin: 16rpx 0 22rpx;
}

.revenue-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.revenue-item {
	flex: 1;
	align-items: center;
	text-align: center;
	border-right: 1rpx solid #e5e7eb;
}

.revenue-label {
	font-size: 22rpx;
	color: #9ca3af;
	margin-bottom: 6rpx;
	display: block;
}

.revenue-value {
	font-size: 30rpx;
	font-weight: 600;
	color: #111827;
}

.revenue-item:last-child {
	border-right: none;
}

/* 底部两张统计卡片（总加好友数 / 总获客数） */
.acquisition-row {
	display: flex;
	gap: 20rpx;
}

.acquisition-card {
	flex: 1;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 24rpx 22rpx 20rpx;
	box-shadow: 0 12rpx 30rpx rgba(15, 23, 42, 0.08);
	position: relative;
	overflow: hidden;
}

.acquisition-main-number {
	font-size: 40rpx;
	font-weight: 700;
	color: #111827;
}

.acquisition-main-sub {
	font-size: 22rpx;
	color: #9ca3af;
	margin-left: 12rpx;
}

.acquisition-header-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 26rpx;
}

.acquisition-icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.friends-icon {
	background: #e5edff;
}

.customer-icon {
	background: #f5e5ff;
}

.acquisition-title-text {
	margin-left: 24rpx;
	font-size: 24rpx;
	color: #9ca3af;
}

.acquisition-bottom-row {
	display: flex;
	align-items: baseline;
	margin-top: 4rpx;
}

.acquisition-bg-circle {
	position: absolute;
	right: -40rpx;
	bottom: -40rpx;
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
}

.friends-circle {
	background: #eef3ff;
}

.customer-circle {
	background: #f8edff;
}

/* 明细记录区域 */
.records-section {
	background: transparent;
	margin-top: 20rpx;
	min-height: 60vh;
}

.records-section > view {
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 26rpx 24rpx 30rpx;
	box-shadow: 0 18rpx 36rpx rgba(15, 23, 42, 0.06);
}

.records-header {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 24rpx;
}

.records-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #111827;
}

/* 标签页 - 胶囊 */
.tabs-container {
	margin-bottom: 24rpx;
}

.tabs-pill {
	display: flex;
	background-color: #eef2ff;
	border-radius: 999rpx;
	padding: 6rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 18rpx 0;
	font-size: 26rpx;
	color: #6b7280;
	border-radius: 999rpx;
	
	&.active {
		background-color: #ffffff;
		color: #2563eb;
		font-weight: 600;
		box-shadow: 0 4rpx 12rpx rgba(37, 99, 235, 0.12);
	}
}

/* 筛选条件卡片 */
.filter-section {
	margin-bottom: 24rpx;
}

.filter-card {
	background-color: #f7f9fc;
	border-radius: 20rpx;
	padding: 22rpx 24rpx 18rpx;
	border: 1rpx solid #eef2ff;
}

.filter-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.filter-header-left {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.filter-title {
	font-size: 26rpx;
	color: #4b5563;
	font-weight: 500;
}

.filter-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 24rpx;
	margin-top: 22rpx;
}

.filter-item {
	flex: 1;
}

.filter-label {
	font-size: 26rpx;
	color: #9ca3af;
	margin-bottom: 10rpx;
}

.filter-picker {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 26rpx;
	color: #111827;
	padding: 18rpx 22rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	border: 1rpx solid #eef2ff;
}

/* 记录列表 */
.records-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.records-count {
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #999;
	margin-bottom: 20rpx;
}

.records-count-pill {
	padding: 6rpx 16rpx;
	border-radius: 999rpx;
	background-color: #e5e7eb;
}

.current-count {
	color: #4b5563;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	gap: 20rpx;
}

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

.record-item {
	padding: 24rpx 0;
	border-bottom: 1rpx solid #edf0f7;
}

.record-name {
	font-size: 28rpx;
	color: #111827;
	font-weight: 500;
}

.record-main-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.record-title-wrap {
	display: flex;
	align-items: center;
	gap: 12rpx;
	flex: 1;
}

.record-badge {
	font-size: 20rpx;
	padding: 4rpx 12rpx;
	border-radius: 999rpx;
	color: #4b5563;
	background-color: #e5ecff;
}

.badge-friend {
	background-color: #e5f7ff;
}

.record-amount {
	font-size: 30rpx;
	font-weight: 600;
	color: #111827;
	
	&.amount-positive {
		color: #16a34a;
	}
}

.record-meta-row {
	margin-top: 12rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.record-time-wrap {
	display: flex;
	align-items: center;
	gap: 6rpx;
}

.record-time {
	font-size: 24rpx;
	color: #9ca3af;
}

.record-meta-type {
	font-size: 24rpx;
	color: #9ca3af;
}

.record-remark {
	margin-top: 12rpx;
	font-size: 22rpx;
	color: #9ca3af;
	display: flex;
	align-items: flex-start;
	gap: 8rpx;
}

.remark-label {
	color: #9ca3af;
	flex-shrink: 0;
}

.remark-value {
	color: #6b7280;
	flex: 1;
}

/* 提现明细专用样式 */
.withdraw-record-item {
	padding: 26rpx 0;
}

.withdraw-main-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.withdraw-main-left {
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}

.withdraw-title {
	font-size: 28rpx;
	color: #111827;
	font-weight: 500;
}

.withdraw-id {
	font-size: 22rpx;
	color: #9ca3af;
}

.withdraw-amount {
	font-size: 32rpx;
	font-weight: 600;
	color: #16a34a;
}

.withdraw-tags-row {
	margin-top: 12rpx;
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
}

.withdraw-tag {
	padding: 4rpx 12rpx;
	border-radius: 999rpx;
	font-size: 20rpx;
	color: #4b5563;
	background-color: #e5ecff;
}

.status-tag {
	background-color: #dcfce7;
	color: #15803d;
}

.status-pending {
	background-color: #fef9c3;
	color: #ca8a04;
}

.status-rejected {
	background-color: #fee2e2;
	color: #b91c1c;
}

.withdraw-meta-row {
	margin-top: 12rpx;
	display: flex;
	gap: 32rpx;
}

.withdraw-meta-item {
	font-size: 22rpx;
	color: #9ca3af;
}

.withdraw-meta-item .meta-label {
	color: #9ca3af;
}

.withdraw-meta-item .meta-value {
	margin-left: 4rpx;
	color: #6b7280;
}

.withdraw-remark {
	margin-top: 10rpx;
	font-size: 22rpx;
	color: #9ca3af;
}

/* 提现弹框 */
.withdraw-popup {
	width: 600rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx 28rpx 26rpx;
	box-sizing: border-box;
}

.withdraw-popup-header {
	margin-bottom: 24rpx;
}

.withdraw-popup-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #111827;
}

.withdraw-popup-subtitle {
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #9ca3af;
	display: block;
}

.withdraw-popup-placeholder {
	color: #d1d5db;
	font-size: 28rpx;
}

/* 金额卡片 */
.withdraw-popup-card {
	margin-top: 20rpx;
	padding: 24rpx 24rpx 22rpx;
	border-radius: 20rpx;
	background-color: #fff7ed;
	border: 1rpx solid #fed7aa;
}

.withdraw-popup-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.withdraw-popup-card-left {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.card-main-label {
	font-size: 26rpx;
	color: #4b5563;
	white-space: nowrap;
}

.card-sub-label {
	font-size: 22rpx;
	color: #f97316;
}

.withdraw-popup-amount-wrap {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	flex: 1;
}

.withdraw-popup-amount-currency {
	font-size: 40rpx;
	color: #f97316;
	font-weight: 700;
	margin-right: 0;
}

.withdraw-popup-amount-input {
	min-width: 160rpx;
	font-size: 40rpx;
	font-weight: 700;
	color: #f97316;
	text-align: right;
	margin-left: 4rpx;
}

/* 信息块 */
.withdraw-popup-info {
	margin-top: 20rpx;
	padding: 18rpx 20rpx;
	border-radius: 16rpx;
	background-color: #eef2ff;
}

.withdraw-info-row {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-bottom: 10rpx;
}

.withdraw-info-row:last-child {
	margin-bottom: 0;
}

.withdraw-info-dot {
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	background-color: #3b82f6;
}

.withdraw-info-text {
	font-size: 24rpx;
	color: #4b5563;
}

.withdraw-popup-footer {
	margin-top: 26rpx;
	display: flex;
	justify-content: flex-end;
	gap: 16rpx;
}

.withdraw-popup-btn {
	min-width: 180rpx;
	height: 72rpx;
	line-height: 72rpx;
	border-radius: 999rpx;
	font-size: 28rpx;
}

.withdraw-popup-btn.cancel {
	background-color: #e5e7eb;
	color: #374151;
}

.withdraw-popup-btn.confirm {
	background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
	color: #ffffff;
}

.load-more {
	text-align: center;
	padding: 30rpx 0;
	color: #6366f1;
	font-size: 28rpx;
}

.load-more-text {
	color: #6366f1;
	
	&.no-more {
		color: #999;
	}
}

.loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	gap: 20rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #999;
}

/* 修改密码弹框 */
.password-popup {
	width: 600rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx 28rpx 26rpx;
	box-sizing: border-box;
}

.password-popup-header {
	margin-bottom: 24rpx;
}

.password-popup-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #111827;
}

.password-popup-subtitle {
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #9ca3af;
	display: block;
	line-height: 1.6;
}

/* 表单区域 */
.password-popup-form {
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.password-form-item {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.password-form-label {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.password-form-label .label-text {
	font-size: 26rpx;
	color: #4b5563;
	font-weight: 500;
}

.password-input-wrapper {
	position: relative;
}

.password-input {
	width: 100%;
	height: 88rpx;
	padding: 0 24rpx;
	font-size: 28rpx;
	color: #111827;
	background-color: #f9fafb;
	border: 2rpx solid #e5e7eb;
	border-radius: 12rpx;
	box-sizing: border-box;
	transition: all 0.3s ease;
}

.password-input:focus {
	border-color: #6366f1;
	background-color: #fff;
	box-shadow: 0 0 0 4rpx rgba(99, 102, 241, 0.1);
}

.password-placeholder {
	color: #d1d5db;
	font-size: 28rpx;
}

/* 提示信息 */
.password-popup-info {
	margin-top: 20rpx;
	padding: 18rpx 20rpx;
	border-radius: 16rpx;
	background-color: #eef2ff;
}

.password-info-row {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-bottom: 10rpx;
}

.password-info-row:last-child {
	margin-bottom: 0;
}

.password-info-dot {
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	background-color: #3b82f6;
	flex-shrink: 0;
}

.password-info-text {
	font-size: 24rpx;
	color: #4b5563;
	line-height: 1.5;
}

.password-popup-footer {
	margin-top: 26rpx;
	display: flex;
	justify-content: flex-end;
	gap: 16rpx;
}

.password-popup-btn {
	min-width: 180rpx;
	height: 72rpx;
	line-height: 72rpx;
	border-radius: 999rpx;
	font-size: 28rpx;
	border: none;
}

.password-popup-btn.cancel {
	background-color: #e5e7eb;
	color: #374151;
}

.password-popup-btn.confirm {
	background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
	color: #ffffff;
}

.password-popup-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* H5适配 */
/* #ifdef H5 */
.withdraw-button,
.settings-btn {
	cursor: pointer;
	transition: all 0.3s ease;
	
	&:hover {
		opacity: 0.9;
		transform: translateY(-2rpx);
	}
	
	&:active {
		transform: translateY(0);
	}
}

.password-popup-btn {
	cursor: pointer;
	transition: all 0.3s ease;
	
	&:hover:not(:disabled) {
		opacity: 0.9;
		transform: translateY(-2rpx);
	}
	
	&:active:not(:disabled) {
		transform: translateY(0);
	}
}
/* #endif */
</style>

