<template>
	<view class="page">
		<view class="warpbox">
			<!-- 顶部筛选区域 -->
			<view class="header-section">
				<view class="page-title"></view>
				<view class="filter-box">
					<view class="event-picker-trigger" @click="openEventModal">
						<text class="event-text">{{ currentEventName || '请选择拓客活动' }}</text>
						<u-icon name="arrow-down" size="14" color="#666"></u-icon>
					</view>
					<!-- 员工统计时间选择 -->
					<view v-if="activeTab === 'employee-statistics'" class="time-picker-group">
						<picker mode="date" :value="employeeStartTime" @change="onStartTimeChange">
							<view class="time-picker-trigger">
								<text class="time-text">{{ employeeStartTime || '开始时间' }}</text>
								<u-icon name="calendar" size="14" color="#666"></u-icon>
							</view>
						</picker>
						<text class="time-separator">至</text>
						<picker mode="date" :value="employeeEndTime" @change="onEndTimeChange">
							<view class="time-picker-trigger">
								<text class="time-text">{{ employeeEndTime || '结束时间' }}</text>
								<u-icon name="calendar" size="14" color="#666"></u-icon>
							</view>
						</picker>
					</view>
					<!-- #ifdef H5 -->
					<view class="screenshot-btn" v-if="showScreenshotBtn" @click="saveScreenshot" :class="{ loading: screenshotLoading }">
						<u-icon name="photo" size="18" color="#409EFF"></u-icon>
						<text class="screenshot-text">截图</text>
					</view>
					<!-- #endif -->
				</view>
			</view>

			<!-- 选项卡 -->
			<view class="tabs-container">
				<view class="tabs-header">
					<view class="tab-item" :class="{ active: activeTab === 'team' }" @click="switchTab('team')">
						团队数据
					</view>
					<view class="tab-item" :class="{ active: activeTab === 'ranking' }" @click="switchTab('ranking')">
						排行榜
					</view>
					<view class="tab-item" :class="{ active: activeTab === 'no-expansion' }"
						@click="switchTab('no-expansion')">
						未拓客人员
					</view>
					<view class="tab-item" :class="{ active: activeTab === 'store-ranking' }"
						@click="switchTab('store-ranking')">
						门店排行榜
					</view>
					<view class="tab-item" :class="{ active: activeTab === 'employee-statistics' }"
						@click="switchTab('employee-statistics')">
						员工统计
					</view>
				</view>

			<!-- 团队数据选项卡 -->
			<view class="tab-content" v-show="activeTab === 'team'">
				<view class="tab-panel">
					<view v-if="teamData.length === 0" class="no-data">
						暂无数据
					</view>
					<view v-else>
						<!-- 统计概览卡片 -->
						<view class="warpboxss stats-section">
							<view class="warpboxs-small-title">
								<view><text class="warpboxs-small-title-line"></text>统计概览</view>
							</view>
							<view class="stats-cards">
								<view class="stat-card">
									<view class="stat-content">
										<view class="stat-number">{{ storeCount }}</view>
										<view class="stat-label">参与门店</view>
									</view>
								</view>
								<view class="stat-card">
									<view class="stat-content">
										<view class="stat-number">{{ teamCount }}</view>
										<view class="stat-label">参与战队</view>
									</view>
								</view>
								<view class="stat-card">
									<view class="stat-content">
										<view class="stat-number">{{ totalMembers }}</view>
										<view class="stat-label">参与人员</view>
									</view>
								</view>
								<view class="stat-card">
									<view class="stat-content">
										<view class="stat-number">{{ totalExpansion }}</view>
										<view class="stat-label">总拓客数</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 团队数据瀑布流 -->
						<view class="warpboxss team-data-section">
							<view class="warpboxs-small-title">
								<view><text class="warpboxs-small-title-line"></text>团队数据</view>
							</view>
							<view class="waterfall-container">
								<view class="store-card-waterfall" v-for="store in sortedTeamData" :key="store.StoreId">
									<view class="store-header">
										<view class="store-title-row">
											<text class="store-title">{{ store.StoreName || '未知门店' }}</text>
											<view class="store-summary">
												<text class="summary-text">目标: <text
														class="summary-value">{{ getStoreTotalTarget(store) }}</text></text>
												<text class="summary-text">完成: <text
														class="summary-value">{{ getStoreTotalCompleted(store) }}</text></text>
												<text class="summary-text">完成率: <text
														class="summary-value">{{ getStoreCompletionRate(store) }}%</text></text>
											</view>
										</view>
									</view>

									<view class="teams-container">
										<view class="team-card" v-for="team in store.TeamList" :key="team.TeamId">
											<view class="team-header">
												<text class="team-name">{{ team.TeamName || '未知团队' }}</text>
											</view>
											<view class="team-members">
												<view class="member-row" v-for="member in team.TeamUserInfo"
													:key="member.UserId">
													<view class="member-info">
														<text
															class="member-name">{{ member.ExpansionUserName || '未知用户' }}</text>
													</view>
													<view class="member-stats">
														<view class="target">目标: {{ member.EventTarget || 0 }}</view>
														<view class="count">完成: {{ member.ExpansionCount || 0 }}</view>
														<view class="rate" >完成率:
															{{ getCompletionRate(member.ExpansionCount, member.EventTarget) }}%</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 排行榜选项卡 -->
			<view class="tab-content" v-show="activeTab === 'ranking'">
				<view class="tab-panel">
					<!-- 门店排行榜 -->
					<view class="warpboxss ranking-section">
						<view class="warpboxs-small-title">
							<view><text class="warpboxs-small-title-line"></text>门店排行榜</view>
						</view>
						<view class="rank-list-modern">
							<view class="rank-item" v-for="(store, index) in topStores" :key="store.StoreId">
								<view class="rank-idx" :class="index < 3 ? 'top-3' : ''">
									<image v-if="index === 0" src="/static/rank/no1.png" class="medal-icon"></image>
									<image v-else-if="index === 1" src="/static/rank/no2.png" class="medal-icon"></image>
									<image v-else-if="index === 2" src="/static/rank/no3.png" class="medal-icon"></image>
									<text v-else>{{ index + 1 }}</text>
								</view>
								<view class="rank-info">
									<view class="info-main">
										<text class="name">{{ store.StoreName || '未知门店' }}</text>
										<view class="rank-stats">
											<text class="stat-item">目标: {{ store.TotalTarget || 0 }}</text>
											<text class="stat-item">完成: {{ store.CompletedTarget || 0 }}</text>
											<text class="stat-item">完成率: {{ store.CompletionRate || 0 }}%</text>
										</view>
									</view>
									<view class="progress-bg">
										<view class="progress-bar" :style="{ width: (topStores.length > 0 ? (store.CompletedTarget / (topStores[0].CompletedTarget || 1) * 100) : 0) + '%' }"></view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 个人排行榜 -->
					<view class="warpboxss ranking-section" style="margin-top: 30rpx;">
						<view class="warpboxs-small-title">
							<view><text class="warpboxs-small-title-line"></text>个人排行榜</view>
						</view>
						<view class="rank-list-modern">
							<view class="rank-item" v-for="(person, index) in topPersons" :key="person.UserId">
								<view class="rank-idx" :class="index === 0 ? 'rank-1' : (index === 1 ? 'rank-2' : (index === 2 ? 'rank-3' : ''))">
									<text>{{ index + 1 }}</text>
								</view>
								<view class="rank-avatar">
									<text>{{ person.UserName ? person.UserName.substring(0, 1) : '无' }}</text>
								</view>
								<view class="rank-info">
									<view class="info-main">
										<text class="name">{{ person.UserName || '未知用户' }}</text>
										<text class="rank-store">{{ person.StoreName || '未知门店' }} - {{ person.TeamName || '未知团队' }}</text>
										<view class="rank-stats">
											<text class="stat-item">目标: {{ person.PersonalTarget || 0 }}</text>
											<text class="stat-item">完成: {{ person.CompletedTarget || 0 }}</text>
											<text class="stat-item">完成率: {{ person.CompletionRate || 0 }}%</text>
										</view>
									</view>
									<view class="progress-bg">
										<view class="progress-bar green" :style="{ width: (topPersons.length > 0 ? (person.CompletedTarget / (topPersons[0].CompletedTarget || 1) * 100) : 0) + '%' }"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 未拓客人员选项卡 -->
			<view class="tab-content" v-show="activeTab === 'no-expansion'">
				<view class="tab-panel">
					<view v-if="noExpansionData.length === 0" class="no-data">
						暂无未拓客人员
					</view>
					<view v-else>
						<view class="warpboxss no-expansion-section">
							<view class="warpboxs-small-title">
								<view><text class="warpboxs-small-title-line"></text>未拓客人员</view>
								<view class="no-expansion-count">
									总数：{{ noExpansionData.length }}人
								</view>
							</view>
							<view class="data-table">
								<view class="table-header">
									<text class="header-cell">姓名</text>
									<text class="header-cell">门店</text>
									<text class="header-cell">团队</text>
									<text class="header-cell">目标</text>
									<text class="header-cell">完成数</text>
								</view>
								<view class="table-row" v-for="person in noExpansionData" :key="person.UserId">
									<text class="table-cell">{{ person.UserName || '未知用户' }}</text>
									<text class="table-cell">{{ person.StoreName || '未知门店' }}</text>
									<text class="table-cell">{{ person.TeamName || '未知团队' }}</text>
									<text class="table-cell">{{ person.PersonalTarget || 0 }}</text>
									<text class="table-cell zero-count">{{ person.CompletedTarget || 0 }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 门店排行榜选项卡 -->
			<view class="tab-content" v-show="activeTab === 'store-ranking'">
				<view class="tab-panel">
					<view v-if="storeData.length === 0" class="no-data">
						暂无门店数据
					</view>
					<view v-else>
						<view class="warpboxss store-ranking-section">
							<view class="warpboxs-small-title">
								<view><text class="warpboxs-small-title-line"></text>门店排行榜</view>
							</view>
							<view class="ranking-data-table">
								<view class="ranking-table-header">
									<text class="ranking-header-cell col-store">门店</text>
									<text class="ranking-header-cell col-target">目标</text>
									<text class="ranking-header-cell col-count">张数</text>
									<text class="ranking-header-cell col-progress">完成率</text>
									<text class="ranking-header-cell col-rank">排名</text>
								</view>
								<view 
									class="ranking-table-row" 
									v-for="(store, index) in sortedStoreData" 
									:key="store.StoreId"
								>
									<text class="ranking-table-cell col-store">{{ store.StoreName || '未知门店' }}</text>
									<text class="ranking-table-cell col-target">{{ store.TotalTarget || 0 }}</text>
									<text class="ranking-table-cell col-count">{{ store.CompletedTarget || 0 }}</text>
									<view class="ranking-table-cell col-progress progress-cell">
										<view class="progress-bar">
											<view 
												class="progress-fill" 
												:style="{ width: Math.min((store.CompletionRate || 0), 100) + '%' }"
											></view>
										</view>
										<text class="progress-text">{{ store.CompletionRate || 0 }}%</text>
									</view>
									<text 
										class="ranking-table-cell col-rank rank-numbernew" 
										:class="{ 'top-three': index < 3 }"
									>{{ index + 1 }}</text>
								</view>
								<!-- 总计行 -->
								<view class="ranking-table-total">
									<text class="ranking-total-cell col-store">总计</text>
									<text class="ranking-total-cell col-target">{{ totalStoreTarget }}</text>
									<text class="ranking-total-cell col-count">{{ totalStoreCompleted }}</text>
									<text class="ranking-total-cell col-progress">{{ totalStoreCompletionRate }}%</text>
									<text class="ranking-total-cell col-rank"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 员工统计选项卡 -->
			<view class="tab-content" v-show="activeTab === 'employee-statistics'">
				<view class="tab-panel">
					<view v-if="!employeeStatisticsData || employeeStatisticsList.length === 0" class="no-data">
						暂无员工统计数据，请选择时间范围并查询
					</view>
					<view v-else>
						<!-- 统计概览 -->
						<view class="warpboxss stats-section">
							<view class="warpboxs-small-title">
								<view><text class="warpboxs-small-title-line"></text>统计概览</view>
							</view>
							<view class="employee-summary">
								<view class="summary-row">
									<text class="summary-label">统计周期：</text>
									<text class="summary-value">
										{{ formatDate(employeeStatisticsData.startTime || employeeStatisticsData.StartTime) }} 至 
										{{ formatDate(employeeStatisticsData.endTime || employeeStatisticsData.EndTime) }}
									</text>
								</view>
								<view class="summary-row">
									<text class="summary-label">参与员工总数：</text>
									<text class="summary-value">{{ employeeStatisticsList.length }}人</text>
								</view>
							</view>
							<view class="stats-cards">
								<view class="stat-card">
									<view class="stat-icon">
										<u-icon name="account" size="32" color="#409EFF"></u-icon>
									</view>
									<view class="stat-content">
										<view class="stat-number">{{ getTotalEmployeeExpansionCount() }}</view>
										<view class="stat-label">总拓客人数</view>
									</view>
								</view>
								<view class="stat-card">
									<view class="stat-icon">
										<u-icon name="home" size="32" color="#67C23A"></u-icon>
									</view>
									<view class="stat-content">
										<view class="stat-number">{{ getTotalEmployeeVisitCount() }}</view>
										<view class="stat-label">总到店人数</view>
									</view>
								</view>
								<view class="stat-card">
									<view class="stat-icon">
										<u-icon name="file-text" size="32" color="#E6A23C"></u-icon>
									</view>
									<view class="stat-content">
										<view class="stat-number">{{ getTotalEmployeeBillingCount() }}</view>
										<view class="stat-label">总开单人数</view>
									</view>
								</view>
								<view class="stat-card">
									<view class="stat-icon">
										<u-icon name="rmb" size="32" color="#F56C6C"></u-icon>
									</view>
									<view class="stat-content">
										<view class="stat-number">{{ formatMoney(getTotalEmployeeBillingAmount()) }}</view>
										<view class="stat-label">总开单金额</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 员工统计表格 -->
						<view class="warpboxss employee-table-section">
							<view class="warpboxs-small-title">
								<view><text class="warpboxs-small-title-line"></text>员工统计列表</view>
							</view>
							<view class="employee-data-table">
								<view class="employee-table-header">
									<text class="employee-header-cell col-name">员工姓名</text>
									<text class="employee-header-cell col-dept">部门</text>
									<text class="employee-header-cell col-position">岗位</text>
									<text class="employee-header-cell col-expansion">拓客</text>
									<text class="employee-header-cell col-visit">到店</text>
									<text class="employee-header-cell col-billing">开单</text>
									<text class="employee-header-cell col-amount">金额</text>
									<text class="employee-header-cell col-rate">到店率</text>
									<text class="employee-header-cell col-rate">开单率</text>
								</view>
								<view 
									class="employee-table-row" 
									v-for="employee in employeeStatisticsList" 
									:key="employee.employeeId"
								>
									<text class="employee-table-cell col-name">{{ employee.employeeName || '未知' }}</text>
									<text class="employee-table-cell col-dept">{{ employee.departmentName || '无' }}</text>
									<text class="employee-table-cell col-position">{{ employee.position || '无' }}</text>
									<text class="employee-table-cell col-expansion">{{ employee.expansionCount || 0 }}</text>
									<text class="employee-table-cell col-visit">{{ employee.visitCount || 0 }}</text>
									<text class="employee-table-cell col-billing">{{ employee.billingCount || 0 }}</text>
									<text class="employee-table-cell col-amount">{{ formatMoney(employee.billingAmount) }}</text>
									<text class="employee-table-cell col-rate">{{ getEmployeeVisitRate(employee) }}%</text>
									<text class="employee-table-cell col-rate">{{ getEmployeeBillingRate(employee) }}%</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 微信小程序截图用的canvas -->
		<!-- #ifdef MP-WEIXIN -->
		<canvas canvas-id="screenshot-canvas"
			style="position: fixed; top: -9999px; left: -9999px; width: 100%; height: 100%;"></canvas>
		<!-- #endif -->
	</view>
	
		<!-- 底部安全区域 -->
		<view style="height: 150rpx;"></view>
		
		<!-- 活动选择弹窗 -->
		<SearchSelectModal 
			:show="showEventModal" 
			:title="'选择拓客活动'" 
			:options="eventOptions" 
			:loading="eventModalLoading"
			:has-more="hasMoreEventData" 
			@confirm="onEventConfirm" 
			@close="closeEventModal"
			@load-more="handleEventLoadMore" 
			@refresh="handleEventRefresh" 
			@search="handleEventSearch" 
		/>
	</view>
</template>

<script>
	import SearchSelectModal from '@/components/SearchSelectModal.vue'
	
	export default {
		components: {
			SearchSelectModal
		},
		data() {
			return {
				// 活动相关
				eventOptions: [], // SearchSelectModal 格式: [{value: '活动ID', label: '活动名称'}]
				currentEventId: '',
				currentEventName: '',
				showEventModal: false, // 控制弹窗显示
				eventModalLoading: false, // 弹窗加载状态
				hasMoreEventData: false, // 是否还有更多活动数据
				eventSearchKeyword: '', // 活动搜索关键词
				eventCurrentPage: 1, // 活动当前页码
				eventPageSize: 20, // 每页活动数量
				eventTotal: 0, // 活动总数

				// 选项卡
				activeTab: 'team',

				// 数据
				teamData: [],
				storeData: [],
				personData: [],
				
				// 员工统计数据
				employeeStatisticsData: null,
				employeeStatisticsList: [],
				employeeStatisticsLoading: false,
				employeeStartTime: '',
				employeeEndTime: '',

				// 截图状态
				screenshotLoading: false,
				showScreenshotBtn: true, // 是否显示截图按钮

				// 用户信息
				userInfo: null
			}
		},
		computed: {
			// 排序后的团队数据
			sortedTeamData() {
				return [...this.teamData].sort((a, b) => {
					const rateA = this.getStoreCompletionRate(a);
					const rateB = this.getStoreCompletionRate(b);
					return rateB - rateA;
				});
			},

			// 门店排行榜前三名（按完成数排序）
			topStores() {
				return [...this.storeData]
					.sort((a, b) => (b.CompletedTarget || 0) - (a.CompletedTarget || 0))
					.slice(0, 3);
			},

			// 个人排行榜前三名（按完成数排序）
			topPersons() {
				return [...this.personData]
					.sort((a, b) => (b.CompletedTarget || 0) - (a.CompletedTarget || 0))
					.slice(0, 3);
			},
			
			// 排序后的门店数据（按完成率排序）
			sortedStoreData() {
				return [...this.storeData]
					.sort((a, b) => (b.CompletionRate || 0) - (a.CompletionRate || 0));
			},
			
			// 门店总目标
			totalStoreTarget() {
				return this.storeData.reduce((total, store) => total + (store.TotalTarget || 0), 0);
			},
			
			// 门店总完成数
			totalStoreCompleted() {
				return this.storeData.reduce((total, store) => total + (store.CompletedTarget || 0), 0);
			},
			
			// 门店总完成率
			totalStoreCompletionRate() {
				if (this.totalStoreTarget === 0) return 0;
				return Math.round((this.totalStoreCompleted / this.totalStoreTarget) * 100);
			},

			// 未拓客人员数据
			noExpansionData() {
				return this.personData.filter(person => person.CompletedTarget === 0);
			},

			// 统计卡片数据
			storeCount() {
				return this.teamData.length;
			},

			teamCount() {
				return this.getTotalTeams();
			},

			totalMembers() {
				return this.getTotalMembers();
			},

			totalExpansion() {
				return this.getTotalExpansionCount();
			}
		},
		onLoad() {
			// 作为页面时使用
			this.initPage();
		},
		mounted() {
			// 作为组件时使用
			this.initPage();
		},
		methods: {
			/**
			 * 初始化方法（供父组件调用）
			 */
			init() {
				this.initPage();
			},
			/**
			 * 初始化页面
			 */
			async initPage() {
				console.log('initPage');
				this.userInfo = uni.getStorageSync('userInfo');
				if (!this.userInfo || Object.keys(this.userInfo).length === 0) {
					uni.reLaunch({
						url: '/pages/login/login'
					});
					return;
				}
				console.log('用户信息:', this.userInfo);

				try {
					// 显示加载状态
					this.showLoading();

					// 获取活动列表
					await this.getEventList();

					// 隐藏加载状态
					this.hideLoading();

				} catch (error) {
					console.error('初始化页面失败:', error);
					this.hideLoading();
					this.showError('加载数据失败，请刷新页面重试');
				}
			},

			/**
			 * 打开活动选择弹窗
			 */
			async openEventModal() {
				this.showEventModal = true;
				this.eventModalLoading = true;
				this.eventCurrentPage = 1;
				this.hasMoreEventData = true;
				this.eventSearchKeyword = '';
				this.eventOptions = [];
				
				try {
					await this.loadEventOptions(1, '');
				} catch (error) {
					console.error('获取活动列表失败:', error);
					this.showError('获取活动列表失败: ' + error.message);
					this.eventOptions = [];
				} finally {
					this.eventModalLoading = false;
				}
			},

			/**
			 * 关闭活动选择弹窗
			 */
			closeEventModal() {
				this.showEventModal = false;
				this.eventOptions = [];
				this.eventModalLoading = false;
				this.hasMoreEventData = false;
				this.eventCurrentPage = 1;
				this.eventSearchKeyword = '';
			},

			/**
			 * 加载活动选项数据
			 */
			async loadEventOptions(page = 1, searchKeyword = '') {
				try {
					console.log('正在获取活动列表...', { page, searchKeyword });
					
					// 构建请求参数
					const params = {
						page: page,
						rows: this.eventPageSize
					};
					
					// 如果有搜索关键词，添加到参数中（如果后端支持）
					if (searchKeyword) {
						params.eventName = searchKeyword;
					}
					
					const response = await this.API.getEventList(params);

					if (response.code === 200) {
						const rawList = response.data.list || [];
						const pagination = response.data.pagination || {};
						this.eventTotal = pagination.total || rawList.length;
						
						console.log('活动列表响应:', { list: rawList, total: this.eventTotal, page });

						// 转换为 SearchSelectModal 格式: [{value: '活动ID', label: '活动名称'}]
						const options = rawList.map(event => ({
							value: event.id,
							label: event.eventName || event.name || '未知活动'
						}));

						if (page === 1) {
							this.eventOptions = options;
						} else {
							this.eventOptions = [...this.eventOptions, ...options];
						}

						// 判断是否还有更多数据
						// 如果当前页返回的数据量等于每页数量，且总数大于已加载的数量，说明还有更多
						const loadedCount = this.eventOptions.length;
						this.hasMoreEventData = rawList.length === this.eventPageSize && loadedCount < this.eventTotal;

						// 如果是第一页且没有搜索关键词，默认选中第一个活动（仅在初始化时）
						if (page === 1 && !searchKeyword && options.length > 0 && !this.currentEventId) {
							this.currentEventId = options[0].value;
							this.currentEventName = options[0].label;
							console.log('默认选中活动:', options[0]);
							// 自动查询第一个活动的数据
							this.handleQuery();
						}
					} else {
						throw new Error(response.message || '获取活动列表失败');
					}

				} catch (error) {
					console.error('获取活动列表失败:', error);
					this.showError('获取活动列表失败: ' + error.message);
					if (page === 1) {
						this.eventOptions = [];
					}
				}
			},

			/**
			 * 活动选择确认
			 */
			onEventConfirm(option) {
				if (option) {
					this.currentEventId = option.value;
					this.currentEventName = option.label;
					this.closeEventModal();
					// 选择活动后自动查询数据
					if (this.activeTab === 'employee-statistics') {
						// 如果是员工统计选项卡，检查时间是否已设置
						if (this.employeeStartTime && this.employeeEndTime) {
							this.getEmployeeStatistics();
						} else {
							// 如果没有设置时间，使用默认时间（最近一个月）
							const endDate = new Date();
							const startDate = new Date();
							startDate.setMonth(startDate.getMonth() - 1);
							this.employeeEndTime = this.formatDateForPicker(endDate);
							this.employeeStartTime = this.formatDateForPicker(startDate);
							// 设置完时间后自动查询
							this.$nextTick(() => {
								this.getEmployeeStatistics();
							});
						}
					} else {
						// 其他选项卡使用原来的查询方法
						this.handleQuery();
					}
				}
			},

			/**
			 * 处理活动搜索
			 */
			async handleEventSearch(keyword) {
				this.eventSearchKeyword = keyword;
				this.eventCurrentPage = 1;
				this.hasMoreEventData = true;
				this.eventModalLoading = true;
				try {
					await this.loadEventOptions(1, keyword);
				} finally {
					this.eventModalLoading = false;
				}
			},

			/**
			 * 处理活动加载更多
			 */
			async handleEventLoadMore(page) {
				if (!this.hasMoreEventData || this.eventModalLoading) return;
				this.eventModalLoading = true;
				try {
					await this.loadEventOptions(page, this.eventSearchKeyword);
				} finally {
					this.eventModalLoading = false;
				}
			},

			/**
			 * 处理活动刷新
			 */
			async handleEventRefresh() {
				this.eventCurrentPage = 1;
				this.hasMoreEventData = true;
				await this.loadEventOptions(1, this.eventSearchKeyword);
			},

			/**
			 * 获取活动列表（初始化时使用）
			 */
			async getEventList() {
				try {
					await this.loadEventOptions(1, '');
				} catch (error) {
					console.error('获取活动列表失败:', error);
					this.showError('获取活动列表失败: ' + error.message);
				}
			},

			/**
			 * 查询数据
			 */
			handleQuery() {
				if (!this.currentEventId) {
					this.showError('请选择拓客活动');
					return;
				}
				this.getTeamData();
				this.getStoreData();
				this.getPersonData();
			},


			/**
			 * 获取团队数据
			 */
			async getTeamData() {
				try {
					console.log('正在获取团队数据...');
					const response = await this.API.getTeamData(this.currentEventId);

					if (response.code === 200) {
						this.teamData = response.data || [];
						console.log('团队数据响应:', this.teamData);
					} else {
						throw new Error(response.message || '获取团队数据失败');
					}

				} catch (error) {
					console.error('获取团队数据失败:', error);
					this.showError('获取团队数据失败: ' + error.message);
					this.teamData = [];
				}
			},

			/**
			 * 获取门店数据
			 */
			async getStoreData() {
				try {
					console.log('正在获取门店数据...');
					const response = await this.API.getStoreData(this.currentEventId);

					if (response.code === 200) {
						this.storeData = response.data || [];
						console.log('门店数据响应:', this.storeData);
					} else {
						throw new Error(response.message || '获取门店数据失败');
					}

				} catch (error) {
					console.error('获取门店数据失败:', error);
					this.showError('获取门店数据失败: ' + error.message);
					this.storeData = [];
				}
			},

			/**
			 * 获取个人数据
			 */
			async getPersonData() {
				try {
					console.log('正在获取个人数据...');
					const response = await this.API.getPersonData(this.currentEventId);

					if (response.code === 200) {
						this.personData = response.data || [];
						console.log('个人数据响应:', this.personData);
					} else {
						throw new Error(response.message || '获取个人数据失败');
					}

				} catch (error) {
					console.error('获取个人数据失败:', error);
					this.showError('获取个人数据失败: ' + error.message);
					this.personData = [];
				}
			},

			/**
			 * 切换选项卡
			 */
			switchTab(tabName) {
				this.activeTab = tabName;
				// 如果切换到员工统计选项卡，自动查询数据
				if (tabName === 'employee-statistics') {
					// 如果没有设置时间，使用默认时间（最近一个月）
					if (!this.employeeStartTime || !this.employeeEndTime) {
						const endDate = new Date();
						const startDate = new Date();
						startDate.setMonth(startDate.getMonth() - 1);
						this.employeeEndTime = this.formatDateForPicker(endDate);
						this.employeeStartTime = this.formatDateForPicker(startDate);
					}
					// 如果时间已设置且已选择活动，自动查询
					if (this.employeeStartTime && this.employeeEndTime && this.currentEventId) {
						this.getEmployeeStatistics();
					}
				}
			},

			/**
			 * 计算完成率
			 */
			getCompletionRate(completed, target) {
				if (target === 0) return 0;
				return Math.round((completed / target) * 100);
			},

			/**
			 * 计算门店总目标
			 */
			getStoreTotalTarget(store) {
				if (!store.TeamList) return 0;
				let total = 0;
				store.TeamList.forEach(team => {
					if (team.TeamUserInfo) {
						team.TeamUserInfo.forEach(member => {
							total += member.EventTarget || 0;
						});
					}
				});
				return total;
			},

			/**
			 * 计算门店总完成数
			 */
			getStoreTotalCompleted(store) {
				if (!store.TeamList) return 0;
				let total = 0;
				store.TeamList.forEach(team => {
					if (team.TeamUserInfo) {
						team.TeamUserInfo.forEach(member => {
							total += member.ExpansionCount || 0;
						});
					}
				});
				return total;
			},

			/**
			 * 计算门店完成率
			 */
			getStoreCompletionRate(store) {
				const target = this.getStoreTotalTarget(store);
				const completed = this.getStoreTotalCompleted(store);
				if (target === 0) return 0;
				return Math.round((completed / target) * 100);
			},

			/**
			 * 计算总战队数
			 */
			getTotalTeams() {
				if (!this.teamData || this.teamData.length === 0) return 0;
				let total = 0;
				this.teamData.forEach(store => {
					if (store.TeamList) {
						total += store.TeamList.length;
					}
				});
				return total;
			},

			/**
			 * 计算总参与人员数
			 */
			getTotalMembers() {
				if (!this.teamData || this.teamData.length === 0) return 0;
				let total = 0;
				this.teamData.forEach(store => {
					if (store.TeamList) {
						store.TeamList.forEach(team => {
							if (team.TeamUserInfo) {
								total += team.TeamUserInfo.length;
							}
						});
					}
				});
				return total;
			},

			/**
			 * 计算总拓客数
			 */
			getTotalExpansionCount() {
				if (!this.teamData || this.teamData.length === 0) return 0;
				let total = 0;
				this.teamData.forEach(store => {
					if (store.TeamList) {
						store.TeamList.forEach(team => {
							if (team.TeamUserInfo) {
								team.TeamUserInfo.forEach(member => {
									total += member.ExpansionCount || 0;
								});
							}
						});
					}
				});
				return total;
			},

			/**
			 * 获取员工统计数据
			 */
			async getEmployeeStatistics() {
				if (!this.currentEventId) {
					this.showError('请先选择拓客活动');
					return;
				}
				
				if (!this.employeeStartTime || !this.employeeEndTime) {
					this.showError('请选择时间范围');
					return;
				}

				this.employeeStatisticsLoading = true;
				try {
					console.log('正在获取员工统计数据...');
					// 构建参数，注意后端使用的是 PascalCase 格式
					const params = {
						StartTime: this.employeeStartTime + ' 00:00:00', // 添加时间部分
						EndTime: this.employeeEndTime + ' 23:59:59', // 添加时间部分
						EventId: this.currentEventId
					};

					const response = await this.API.getEmployeeStatistics(params);
					console.log('员工统计数据响应:', response);

					if (response.code === 200 && response.data) {
						this.employeeStatisticsData = response.data;
						// 处理字段名映射，兼容 PascalCase 和 camelCase
						const employees = response.data.employees || response.data.Employees || [];
						this.employeeStatisticsList = employees.map(item => ({
							employeeId: item.employeeId || item.EmployeeId || '',
							employeeName: item.employeeName || item.EmployeeName || '',
							departmentId: item.departmentId || item.DepartmentId || '',
							departmentName: item.departmentName || item.DepartmentName || '',
							position: item.position || item.Position || '',
							expansionCount: item.expansionCount || item.ExpansionCount || 0,
							visitCount: item.visitCount || item.VisitCount || 0,
							billingCount: item.billingCount || item.BillingCount || 0,
							billingAmount: item.billingAmount || item.BillingAmount || 0
						}));
					} else {
						this.employeeStatisticsData = null;
						this.employeeStatisticsList = [];
						this.showError(response.message || '获取员工统计数据失败');
					}
				} catch (error) {
					console.error('获取员工统计数据失败:', error);
					this.showError('获取员工统计数据失败: ' + (error.message || '未知错误'));
					this.employeeStatisticsData = null;
					this.employeeStatisticsList = [];
				} finally {
					this.employeeStatisticsLoading = false;
				}
			},

			/**
			 * 计算员工总拓客人数
			 */
			getTotalEmployeeExpansionCount() {
				if (!Array.isArray(this.employeeStatisticsList) || this.employeeStatisticsList.length === 0) return 0;
				return this.employeeStatisticsList.reduce((total, item) => total + (item.expansionCount || 0), 0);
			},

			/**
			 * 计算员工总到店人数
			 */
			getTotalEmployeeVisitCount() {
				if (!Array.isArray(this.employeeStatisticsList) || this.employeeStatisticsList.length === 0) return 0;
				return this.employeeStatisticsList.reduce((total, item) => total + (item.visitCount || 0), 0);
			},

			/**
			 * 计算员工总开单人数
			 */
			getTotalEmployeeBillingCount() {
				if (!Array.isArray(this.employeeStatisticsList) || this.employeeStatisticsList.length === 0) return 0;
				return this.employeeStatisticsList.reduce((total, item) => total + (item.billingCount || 0), 0);
			},

			/**
			 * 计算员工总开单金额
			 */
			getTotalEmployeeBillingAmount() {
				if (!Array.isArray(this.employeeStatisticsList) || this.employeeStatisticsList.length === 0) return 0;
				return this.employeeStatisticsList.reduce((total, item) => total + (Number(item.billingAmount) || 0), 0);
			},

			/**
			 * 计算员工到店率
			 */
			getEmployeeVisitRate(employee) {
				if (!employee || !employee.expansionCount || employee.expansionCount === 0) return 0;
				return Math.round((employee.visitCount || 0) / employee.expansionCount * 100);
			},

			/**
			 * 计算员工开单率
			 */
			getEmployeeBillingRate(employee) {
				if (!employee || !employee.expansionCount || employee.expansionCount === 0) return 0;
				return Math.round((employee.billingCount || 0) / employee.expansionCount * 100);
			},

			/**
			 * 格式化日期（用于显示）
			 */
			formatDate(dateStr) {
				if (!dateStr) return '无';
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			/**
			 * 格式化日期（用于日期选择器，格式：yyyy-MM-dd）
			 */
			formatDateForPicker(date) {
				if (!date) return '';
				const d = new Date(date);
				const year = d.getFullYear();
				const month = String(d.getMonth() + 1).padStart(2, '0');
				const day = String(d.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			/**
			 * 格式化金额
			 */
			formatMoney(amount) {
				if (!amount && amount !== 0) return '0.00';
				const num = Number(amount);
				if (isNaN(num)) return '0.00';
				return num.toFixed(2);
			},

			/**
			 * 开始时间变化
			 */
			onStartTimeChange(e) {
				this.employeeStartTime = e.detail.value;
				// 如果开始时间和结束时间都已选择，自动查询
				if (this.employeeStartTime && this.employeeEndTime && this.currentEventId) {
					this.getEmployeeStatistics();
				}
			},

			/**
			 * 结束时间变化
			 */
			onEndTimeChange(e) {
				this.employeeEndTime = e.detail.value;
				// 如果开始时间和结束时间都已选择，自动查询
				if (this.employeeStartTime && this.employeeEndTime && this.currentEventId) {
					this.getEmployeeStatistics();
				}
			},

			/**
			 * 保存截图
			 */
			async saveScreenshot() {
				this.screenshotLoading = true;

				try {
					// 根据平台选择不同的截图方式
					// #ifdef H5
					await this.saveScreenshotH5();
					// #endif

					// #ifdef MP-WEIXIN
					await this.saveScreenshotMiniProgram();
					// #endif

					// #ifndef H5 || MP-WEIXIN
					// 其他平台的兜底处理
					await this.saveScreenshotFallback();
					// #endif

				} catch (error) {
					console.error('截图生成失败:', error);
					this.showError('截图生成失败: ' + error.message);
				} finally {
					this.screenshotLoading = false;
				}
			},

			/**
			 * H5平台截图
			 */
			async saveScreenshotH5() {
				try {
					// 动态导入html2canvas
					const html2canvas = await import('html2canvas');

					// 根据当前选中的选项卡获取要截图的容器
					let element = document.querySelector(`#${this.activeTab}-tab .tab-panel`);

					if (!element) {
						element = document.querySelector('.tabs-container');
					}

					if (!element) {
						throw new Error('未找到要截图的内容');
					}

					// 等待页面完全渲染
					await new Promise(resolve => setTimeout(resolve, 1000));

					// 滚动到页面顶部确保所有内容可见
					window.scrollTo(0, 0);
					await new Promise(resolve => setTimeout(resolve, 500));

					// 临时修改背景色为白色，确保截图效果
					const originalBg = element.style.background;
					element.style.background = '#ffffff';

					// 等待样式生效
					await new Promise(resolve => setTimeout(resolve, 200));

					// 获取元素的实际尺寸，包括边框
					const computedStyle = window.getComputedStyle(element);
					const borderLeft = parseFloat(computedStyle.borderLeftWidth) || 0;
					const borderRight = parseFloat(computedStyle.borderRightWidth) || 0;
					const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
					const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;

					// 计算包含边框的完整尺寸
					const fullWidth = element.scrollWidth + borderLeft + borderRight;
					const fullHeight = element.scrollHeight + borderTop + borderBottom;

					console.log('元素尺寸:', {
						scrollWidth: element.scrollWidth,
						scrollHeight: element.scrollHeight,
						borderLeft,
						borderRight,
						borderTop,
						borderBottom,
						fullWidth,
						fullHeight
					});

					// 配置截图选项
					const options = {
						allowTaint: true,
						useCORS: true,
						scale: 2.0, // 提高清晰度
						backgroundColor: '#ffffff',
						logging: false,
						imageTimeout: 30000,
						removeContainer: true,
						foreignObjectRendering: false,
						scrollX: 0,
						scrollY: 0,
						// 使用包含边框的完整尺寸，并添加额外边距确保边框完整
						width: fullWidth + 4, // 额外4px确保边框完整
						height: fullHeight + 4, // 额外4px确保边框完整
						windowWidth: fullWidth + 4,
						windowHeight: fullHeight + 4,
						// 添加边距确保完整截图
						x: -borderLeft - 2, // 额外2px左边距
						y: -borderTop - 2, // 额外2px上边距
						// 强制使用白色背景
						onclone: function(clonedDoc) {
							// 确保克隆文档的背景色为白色
							clonedDoc.body.style.backgroundColor = '#ffffff';
							clonedDoc.documentElement.style.backgroundColor = '#ffffff';
						}
					};

					console.log('开始生成截图，配置选项:', options);

					// 生成截图
					let canvas;
					try {
						canvas = await html2canvas.default(element, options);
					} catch (firstError) {
						console.warn('第一次截图失败，尝试备选方案:', firstError);
						// 备选方案：使用更简单的配置
						const fallbackOptions = {
							allowTaint: true,
							useCORS: true,
							scale: 2.0,
							backgroundColor: '#ffffff',
							logging: false,
							imageTimeout: 30000,
							// 使用更宽松的尺寸设置
							width: element.offsetWidth + 10,
							height: element.offsetHeight + 10,
							x: -5,
							y: -5
						};
						canvas = await html2canvas.default(element, fallbackOptions);
					}

					console.log('截图生成完成，画布尺寸:', {
						width: canvas.width,
						height: canvas.height
					});

					// 转换为DataURL
					const dataUrl = canvas.toDataURL('image/png', 1.0);

					// 创建下载链接
					const link = document.createElement('a');
					link.download = `拓客活动报表_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.png`;
					link.href = dataUrl;

					// 触发下载
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);

					// 恢复原始背景色
					element.style.background = originalBg;

					this.showSuccess('截图保存成功');

				} catch (error) {
					console.error('H5截图失败:', error);
					// 确保在错误情况下也恢复背景色
					if (typeof originalBg !== 'undefined') {
						element.style.background = originalBg;
					}
					throw error;
				}
			},

			/**
			 * 微信小程序截图
			 */
			async saveScreenshotMiniProgram() {
				try {
					// 获取系统信息
					const systemInfo = uni.getSystemInfoSync();

					// 创建canvas上下文
					const canvasId = 'screenshot-canvas';
					const ctx = uni.createCanvasContext(canvasId, this);

					// 设置canvas尺寸
					const canvasWidth = systemInfo.windowWidth;
					const canvasHeight = systemInfo.windowHeight;

					// 设置纯白色背景
					ctx.setFillStyle('#ffffff');
					ctx.fillRect(0, 0, canvasWidth, canvasHeight);

					// 确保背景完全覆盖
					ctx.setGlobalAlpha(1.0);

					// 设置文字样式
					ctx.setFillStyle('#2e7d32');
					ctx.setFontSize(16);
					ctx.setTextAlign('center');

					// 绘制标题
					ctx.fillText('拓客活动报表', canvasWidth / 2, 50);

					// 绘制当前时间
					const timeStr = this.utils.gettime()
					ctx.setFontSize(12);
					ctx.fillText(timeStr, canvasWidth / 2, 80);

					// 绘制统计信息
					let y = 120;
					ctx.setFontSize(14);
					ctx.setTextAlign('left');

					const stats = [
						`参与门店: ${this.storeCount}`,
						`参与战队: ${this.teamCount}`,
						`参与人员: ${this.totalMembers}`,
						`总拓客数: ${this.totalExpansion}`
					];

					stats.forEach(stat => {
						ctx.fillText(stat, 50, y);
						y += 30;
					});

					// 绘制当前活动信息
					if (this.currentEventName) {
						y += 20;
						ctx.setFontSize(12);
						ctx.fillText(`当前活动: ${this.currentEventName}`, 50, y);
					}

					// 执行绘制
					ctx.draw(false, () => {
						// 导出图片
						uni.canvasToTempFilePath({
							canvasId: canvasId,
							success: (res) => {
								// 保存到相册
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: () => {
										this.showSuccess('截图已保存到相册');
									},
									fail: (err) => {
										console.error('保存到相册失败:', err);
										// 如果用户拒绝授权，提供下载链接
										uni.previewImage({
											urls: [res.tempFilePath],
											current: res.tempFilePath
										});
									}
								});
							},
							fail: (err) => {
								console.error('导出图片失败:', err);
								throw new Error('导出图片失败');
							}
						}, this);
					});

				} catch (error) {
					console.error('小程序截图失败:', error);
					throw error;
				}
			},

			/**
			 * 兜底截图方案
			 */
			async saveScreenshotFallback() {
				// 模拟截图过程
				await new Promise(resolve => setTimeout(resolve, 2000));
				this.showSuccess('截图功能暂不支持当前平台');
			},

			/**
			 * 返回上一页
			 */
			goBack() {
				uni.navigateBack();
			},


			/**
			 * 显示加载状态
			 */
			showLoading() {
				uni.showLoading({
					title: '加载中...'
				});
			},

			/**
			 * 隐藏加载状态
			 */
			hideLoading() {
				uni.hideLoading();
			},

			/**
			 * 显示错误信息
			 */
			showError(message) {
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 3000
				});
			},

			/**
			 * 显示成功信息
			 */
			showSuccess(message) {
				uni.showToast({
					title: message,
					icon: 'success',
					duration: 2000
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
	padding-bottom: 40rpx;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

.warpbox {
	padding: 0 30rpx;
	padding-top: 20rpx;
}

/* 顶部区域 */
.header-section {
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10rpx;
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #1f2937;
	}
	
	.filter-box {
		display: flex;
		align-items: center;
		gap: 12rpx;
		flex-wrap: wrap;
		
		.event-picker-trigger {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.6);
			backdrop-filter: blur(10px);
			padding: 8rpx 16rpx;
			border-radius: 30rpx;
			border: 1px solid rgba(255, 255, 255, 0.8);
			cursor: pointer;
			transition: all 0.3s;
			
			&:active {
				transform: scale(0.95);
				background: rgba(255, 255, 255, 0.8);
			}
			
			.event-text {
				font-size: 24rpx;
				color: #333;
				margin-right: 6rpx;
				max-width: 200rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
		.time-picker-group {
			display: flex;
			align-items: center;
			gap: 12rpx;
			flex-wrap: wrap;
			
			.time-picker-trigger {
				display: flex;
				align-items: center;
				gap: 6rpx;
				background: rgba(255, 255, 255, 0.6);
				backdrop-filter: blur(10px);
				padding: 8rpx 16rpx;
				border-radius: 30rpx;
				border: 1px solid rgba(255, 255, 255, 0.8);
				cursor: pointer;
				transition: all 0.3s;
				
				&:active {
					transform: scale(0.95);
					background: rgba(255, 255, 255, 0.8);
				}
				
				.time-text {
					font-size: 24rpx;
					color: #333;
				}
			}
			
			.time-separator {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		.screenshot-btn {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 8rpx 16rpx;
			background: rgba(64, 158, 255, 0.1);
			border-radius: 20rpx;
			transition: all 0.3s;
			
			&:active {
				background: rgba(64, 158, 255, 0.2);
				transform: scale(0.95);
			}
			
			&.loading {
				opacity: 0.6;
			}
			
			.screenshot-text {
				font-size: 24rpx;
				color: #409EFF;
			}
		}
	}
}

/* 卡片容器通用样式 - 玻璃拟态 */
.warpboxss {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	padding: 20rpx;
	border-radius: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
	margin-bottom: 20rpx;
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.99);
	}
}

.warpboxs-small-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 16rpx;
	
	view:first-child {
		display: flex;
		align-items: center;
	}

	.warpboxs-small-title-line {
		background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%);
		height: 26rpx;
		width: 10rpx;
		margin-right: 12rpx;
		border-radius: 18rpx;
		box-shadow:
			0 2rpx 8rpx rgba(67, 160, 71, 0.4),
			0 0 12rpx rgba(67, 160, 71, 0.3),
			inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
	}
}



/* 选项卡样式 */
.tabs-container {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-radius: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
	overflow: hidden;
	margin-bottom: 20rpx;
}

.tabs-header {
	display: flex;
	background: linear-gradient(120deg, #f8fff8 0%, #f0f8f0 100%);
	border-bottom: 2px solid #e8f5e9;
	flex-wrap: nowrap;
	overflow-x: scroll;
}

.tab-item {
	padding: 32rpx 40rpx;
	text-align: center;
	font-weight: 600;
	color: #6a9c6a;
	transition: all 0.3s ease;
	position: relative;
	white-space: nowrap;
	font-size: 26rpx;
}

.tab-item.active {
	color: #2e7d32;
	background: #fff;
	border-bottom: 6rpx solid #4CAF50;
}

.tab-content {
	padding: 24rpx;
}

.tab-panel {
	min-height: 400rpx;
}

.no-data {
	text-align: center;
	color: #999;
	font-style: italic;
	padding: 80rpx 40rpx;
	font-size: 28rpx;
}

/* 统计卡片样式 */
.stats-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16rpx;
}

.stat-card {
	background: #fff;
	padding: 32rpx 20rpx;
	border-radius: 20rpx;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	
	&:active {
		transform: scale(0.98);
	}
}

.stat-icon {
	width: 80rpx;
	height: 80rpx;
	margin: 0 auto 24rpx;
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.2);
}

.stat-content {
	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #43a047;
		margin-bottom: 12rpx;
		letter-spacing: 1rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #6a9c6a;
		font-weight: 500;
	}
}

/* 瀑布流容器样式 */
.waterfall-container {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.store-card-waterfall {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.99);
	}
}

.store-header {
	background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
	padding: 24rpx 32rpx;
	border-bottom: 1px solid #e8f5e9;
}

.store-title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16rpx;
}

.store-title {
	color: #2e7d32;
	font-size: 28rpx;
	font-weight: 600;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.store-summary {
	display: flex;
	gap: 16rpx;
	font-size: 22rpx;
	flex-shrink: 0;
}

.summary-text {
	color: #6a9c6a;
}

.summary-value {
	font-weight: 600;
	color: #2e7d32;
}

.teams-container {
	padding: 16rpx;
}

.team-card {
	margin-bottom: 16rpx;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 16rpx;
	overflow: hidden;
	background: #fafafa;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.team-header {
	background: #f0f8f0;
	padding: 16rpx 24rpx;
	border-bottom: 1px solid #e8f5e9;
}

.team-name {
	font-weight: 600;
	color: #2e7d32;
	font-size: 26rpx;
}

.team-members {
	padding: 16rpx;
}

.member-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12rpx 0;
	border-bottom: 1px solid #f0f8f0;
	
	&:last-child {
		border-bottom: none;
	}
}

.member-info {
	flex: 1;
}

.member-name {
	font-weight: 600;
	color: #2e7d32;
	font-size: 24rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.member-stats {
	display: flex;
	gap: 12rpx;
	flex-shrink: 0;
	font-size: 22rpx;
	white-space: nowrap;
}

.target {
	color: #6a9c6a;
}

.count {
	color: #4CAF50;
	font-weight: 600;
}

.rate {
	font-weight: 600;
	color: #2e7d32;
}

/* 排行榜样式 */
.ranking-section {
	margin-bottom: 0;
}

.rank-list-modern {
	.rank-item {
		display: flex;
		align-items: center;
		padding: 18rpx 0;
		
		.rank-idx {
			width: 50rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: #999;
			text-align: center;
			margin-right: 16rpx;
			
			&.rank-1 { 
				color: #FFD700; 
				font-size: 30rpx; 
				text-shadow: 0 2rpx 4rpx rgba(255, 215, 0, 0.3);
			}
			
			&.rank-2 { 
				color: #C0C0C0; 
				font-size: 30rpx; 
				text-shadow: 0 2rpx 4rpx rgba(192, 192, 192, 0.3);
			}
			
			&.rank-3 { 
				color: #CD7F32; 
				font-size: 30rpx; 
				text-shadow: 0 2rpx 4rpx rgba(205, 127, 50, 0.3);
			}
			
			&.top-3 { color: #43a047; font-size: 30rpx; }
			
			.medal-icon { width: 40rpx; height: 40rpx; }
		}
		
		.rank-avatar {
			width: 56rpx;
			height: 56rpx;
			background: #e8f5e9;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;
			color: #43a047;
			font-weight: bold;
			font-size: 24rpx;
		}
		
		.rank-info {
			flex: 1;
			
			.info-main {
				display: flex;
				flex-direction: column;
				margin-bottom: 10rpx;
				
				.name { 
					font-size: 26rpx; 
					font-weight: 500; 
					color: #333; 
					margin-bottom: 8rpx;
				}
				
				.rank-store {
					font-size: 22rpx;
					color: #999;
					margin-bottom: 8rpx;
				}
				
				.rank-stats {
					display: flex;
					flex-direction: column;
					gap: 4rpx;
					
					.stat-item {
						font-size: 22rpx;
						color: #666;
					}
				}
			}
			
			.progress-bg {
				height: 6rpx;
				background: #f5f5f5;
				border-radius: 3rpx;
				overflow: hidden;
				
				.progress-bar {
					height: 100%;
					background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%);
					border-radius: 3rpx;
					
					&.green { background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%); }
				}
			}
		}
	}
}

/* 未拓客人员统计样式 */
.no-expansion-count {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
}

/* 员工统计样式 */
.employee-summary {
	margin-bottom: 24rpx;
	padding: 16rpx 0;
	border-bottom: 2rpx solid #e8f5e9;
	
	.summary-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
		font-size: 26rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.summary-label {
			color: #666;
			margin-right: 12rpx;
			font-weight: 500;
		}
		
		.summary-value {
			color: #2e7d32;
			font-weight: 600;
		}
	}
}

.employee-table-section {
	margin-top: 20rpx;
}

.employee-data-table {
	width: 100%;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
}

.employee-table-header {
	display: flex;
	background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
	font-weight: 600;
	color: #2e7d32;
	font-size: 24rpx;
	border-bottom: 2px solid #e8f5e9;
	padding: 16rpx 0;
}

.employee-table-row {
	display: flex;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	padding: 16rpx 0;
	transition: background-color 0.2s ease;
	
	&:active {
		background-color: #f8fff8;
	}
	
	&:nth-child(even) {
		background-color: #fafafa;
	}
	
	&:last-child {
		border-bottom: none;
	}
}

.employee-header-cell,
.employee-table-cell {
	padding: 0 8rpx;
	text-align: center;
	font-size: 24rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	
	&.col-name {
		flex: 0 0 120rpx;
	}
	
	&.col-dept {
		flex: 0 0 100rpx;
	}
	
	&.col-position {
		flex: 0 0 80rpx;
	}
	
	&.col-expansion,
	&.col-visit,
	&.col-billing {
		flex: 0 0 60rpx;
	}
	
	&.col-amount {
		flex: 0 0 100rpx;
	}
	
	&.col-rate {
		flex: 0 0 70rpx;
	}
}

.employee-header-cell {
	color: #2e7d32;
	font-weight: 600;
}

.employee-table-cell {
	color: #333;
	
	&.col-amount {
		color: #F56C6C;
		font-weight: 500;
	}
}

/* 数据表格样式 */
.data-table {
	width: 100%;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
}

.ranking-data-table {
	width: 100%;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
}

.ranking-table-header {
	display: flex;
	background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
	font-weight: 600;
	color: #2e7d32;
	font-size: 26rpx;
	border-bottom: 2px solid #e8f5e9;
}

.ranking-table-row {
	display: flex;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease;
	
	&:active {
		background-color: #f8fff8;
	}
	
	&:nth-child(even) {
		background-color: #fafafa;
	}
}

.ranking-table-total {
	display: flex;
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	font-weight: 700;
	color: #2e7d32;
	font-size: 26rpx;
	border-top: 2px solid #4CAF50;
}

.ranking-header-cell,
.ranking-table-cell,
.ranking-total-cell {
	padding: 24rpx 16rpx;
	text-align: center;
	font-size: 24rpx;
	color: #2e7d32;
	border-right: 1px solid rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	
	&:last-child {
		border-right: none;
	}
}

.ranking-header-cell {
	font-weight: 700;
	font-size: 26rpx;
	padding: 28rpx 16rpx;
}

	/* 列宽定义 */
	.col-store {
		width: 26%;
		flex-shrink: 0;
		text-align: left;
		padding-left: 12px;
	}

	.col-target {
		width: 18%;
		flex-shrink: 0;
	}

	.col-count {
		width: 18%;
		flex-shrink: 0;
	}

	.col-progress {
		width: 22%;
		flex-shrink: 0;
	}

	.col-rank {
		width: 16%;
		flex-shrink: 0;
	}

/* 进度条样式 */
.progress-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	padding: 24rpx 16rpx;
}

.progress-bar {
	width: 100%;
	height: 16rpx;
	background-color: #e8f5e9;
	border-radius: 8rpx;
	overflow: hidden;
	position: relative;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4CAF50 0%, #66BB6A 100%);
	border-radius: 8rpx;
	transition: width 0.3s ease;
	min-width: 0;
}

.progress-text {
	font-size: 22rpx;
	font-weight: 600;
	color: #2e7d32;
	white-space: nowrap;
}

.rank-numbernew {
	font-weight: 600;
	color: #666;
	font-size: 24rpx;
	
	&.top-three {
		color: #d32f2f !important;
		font-weight: 700;
		font-size: 28rpx;
	}
}

.ranking-total-cell {
	font-weight: 700;
	font-size: 26rpx;
}

.table-header {
	display: flex;
	background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
	font-weight: 600;
	color: #2e7d32;
	font-size: 24rpx;
}

.table-row {
	display: flex;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	
	&:active {
		background-color: #f8fff8;
	}
}

.header-cell,
.table-cell {
	flex: 1;
	padding: 24rpx 16rpx;
	text-align: center;
	font-size: 22rpx;
	color: #2e7d32;
}

.zero-count {
	color: #F56C6C;
	font-weight: 600;
}

	/* 响应式设计 */
	/* #ifdef H5 */
/* 	@media (max-width: 768px) {
		.container {
			padding: 16px;
		}

		.filter-form {
			flex-direction: column;
			align-items: stretch;
			gap: 16px;
		}

		.form-actions {
			margin-left: 0;
			justify-content: space-between;
			gap: 8px;
			flex-wrap: nowrap;
		}

		.form-actions .u-button {
			flex: 1;
			min-width: 0;
			font-size: 12px;
		}

		.stats-cards {
			grid-template-columns: 1fr 1fr;
			gap: 16px;
			max-width: none;
			margin-left: 0;
			margin-right: 0;
		}

		.stat-card {
			padding: 24px 16px;
		}

		.stat-icon {
			width: 56px;
			height: 56px;
			margin: 0 auto 20px;
			font-size: 28px;
		}

		.stat-number {
			font-size: 24px;
			margin-bottom: 10px;
		}

		.stat-label {
			font-size: 14px;
		}

		.tabs-header {
			flex-wrap: nowrap;
			justify-content: center;
		}

		.tab-item {
			flex: 1;
			min-width: 0;
			padding: 12px 8px;
			font-size: 14px;
		}

		.waterfall-container {
			gap: 12px;
		}

		.store-card-waterfall {
			width: 100%;
		}

		.ranking-cards {
			flex-direction: column;
			gap: 16px;
		}

		.ranking-card {
			min-width: auto;
			max-width: none;
		}

		.table-header,
		.table-row {
			font-size: 10px;
		}

		.header-cell,
		.table-cell {
			padding: 8px 4px;
		}
		
		.ranking-header-cell,
		.ranking-table-cell,
		.ranking-total-cell {
			padding: 12px 8px;
			font-size: 12px;
		}
		
		.progress-cell {
			padding: 8px 4px;
			gap: 2px;
		}
		
		.progress-bar {
			height: 6px;
		}
		
		.progress-text {
			font-size: 10px;
		}
		
		.rank-number {
			font-size: 12px;
		}
		
		.rank-number.top-three {
			font-size: 14px;
		}
	} */

	/* #endif */
</style>