<template>
	<view class="page">
		<view class="warpbox">
			<!-- 顶部筛选区域 -->
			<view class="header-section">
				<view class="page-title"></view>
				<view class="filter-box">
					<picker mode="date" fields="month" :value="selectedMonth" @change="onMonthChange">
						<view class="date-picker-trigger">
							<text class="date-text">{{ selectedMonthText }}</text>
							<u-icon name="arrow-down" size="14" color="#666"></u-icon>
						</view>
					</picker>
					<picker mode="selector" :range="businessUnitOptions" range-key="fullName" :value="businessUnitIndex" @change="onBusinessUnitChange">
						<view class="business-unit-picker-trigger">
							<text class="business-unit-text">{{ currentBusinessUnitName || '请选择事业部' }}</text>
							<u-icon name="arrow-down" size="14" color="#666"></u-icon>
						</view>
					</picker>
					<!-- 截图按钮 -->
					<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>
				</view>
			</view>

			<!-- 核心KPI指标 -->
			<view class="kpi-section" v-if="statistics">
				<!-- 上方5个指标 -->
				<view class="glass-card billing-card">
					<view class="billing-main" v-for="(kpi, index) in kpiListTop.slice(0, 2)" :key="index" @click="handleKpiClick(kpi)" :style="{ cursor: kpi.clickable ? 'pointer' : 'default' }">
						<view class="stat-content">
							<view class="label-row">
								<view class="stat-icon-small" :class="kpi.type">
									<u-icon :name="getKpiIconName(kpi.key)" :size="20" color="#fff"></u-icon>
								</view>
								<view class="card-label">{{ kpi.label }}</view>
							</view>
							<view class="billing-value">
								<text class="currency" v-if="kpi.isMoney">￥</text>
								<text class="value">{{ kpi.isMoney ? formatMoney(kpi.value) : formatNumber(kpi.value) }}</text>
							</view>
						</view>
					</view>
					<view class="billing-footer">
						<view class="count-item" v-for="(kpi, index) in kpiListTop.slice(2, 5)" :key="index" @click="handleKpiClick(kpi)" :style="{ cursor: kpi.clickable ? 'pointer' : 'default' }">
							<text class="count-text">
								<text class="count-value">{{ kpi.label + ' ' + formatNumber(kpi.value) }}</text>
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 品项分类业绩KPI -->
			<view class="warpboxss category-kpi-section" v-if="statistics">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>品项分类业绩</view>
				</view>
				<view class="kpi-grid-bottom">
					<view class="kpi-card" v-for="(kpi, index) in categoryKpiList" :key="index">
						<view class="kpi-header">
							<view class="kpi-icon-square" :class="kpi.type">
								<u-icon :name="getCategoryKpiIconName(kpi.key)" :size="16" color="#fff"></u-icon>
							</view>
							<text class="kpi-label">{{ kpi.label }}</text>
						</view>
						<view class="kpi-value-group">
							<text class="value">
								<text class="currency" v-if="kpi.isMoney">￥</text>
								{{ kpi.isMoney ? formatMoney(kpi.value) : formatNumber(kpi.value) }}
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 业绩趋势 -->
			<view class="warpboxss trend-section" v-if="performanceTrend.TrendData && performanceTrend.TrendData.length > 0">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>业绩趋势</view>
					<view class="trend-controls">
						<view class="pill-switch">
							<view class="pill-item" :class="trendMonthCount === 3 ? 'active' : ''" @click="switchTrendMonthCount(3)">3月</view>
							<view class="pill-item" :class="trendMonthCount === 6 ? 'active' : ''" @click="switchTrendMonthCount(6)">6月</view>
							<view class="pill-item" :class="trendMonthCount === 12 ? 'active' : ''" @click="switchTrendMonthCount(12)">12月</view>
						</view>
					</view>
				</view>
				<view class="chart-wrapper">
					<qiun-data-charts 
						type="line"
						:opts="performanceTrendChartOpts"
						:chartData="performanceTrendChartData"
						:ontouch="true"
						:inScrollView="true"
						:pageScrollTop="pageScrollTop"
						background="rgba(255, 255, 255, 0.8)"
					/>
				</view>
			</view>

			<!-- 门店业绩分布 -->
			<view class="warpboxss distribution-section" v-if="storeDistribution.DistributionData && storeDistribution.DistributionData.length > 0">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>门店业绩分布</view>
				</view>
				<view class="distribution-chart-container">
					<view class="distribution-chart-wrapper">
						<qiun-data-charts 
							type="pie"
							:opts="storeDistributionChartOpts"
							:chartData="storeDistributionChartData"
							:ontouch="true"
							:inScrollView="true"
							:pageScrollTop="pageScrollTop"
						/>
					</view>
					<view class="distribution-legend">
						<view class="legend-item" v-for="(item, index) in storeDistribution.DistributionData.slice(0, 5)" :key="index">
							<view class="legend-dot" :style="{ backgroundColor: getDistributionColor(index) }"></view>
							<text class="legend-name">{{ item.StoreName || '未知门店' }}</text>
							<text class="legend-value">￥{{ formatMoney(item.Performance) }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 门店业绩排行 -->
			<view class="warpboxss ranking-section" v-if="storeRanking.length > 0">
				<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="(item, index) in storeRanking.slice(0, 10)" :key="index">
						<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">{{ item.StoreName || '未知门店' }}</text>
								<text class="value">￥{{ formatMoney(item.NetPerformance) }}</text>
							</view>
							<view class="progress-bg">
								<view class="progress-bar" :style="{ width: (item.NetPerformance / (storeRanking[0].NetPerformance || 1) * 100) + '%' }"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 经理业绩排行 -->
			<view class="warpboxss manager-section" v-if="managerRanking.length > 0">
				<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="(item, index) in managerRanking.slice(0, 10)" :key="index">
						<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>{{ item.ManagerName ? item.ManagerName.substring(0, 1) : '无' }}</text>
						</view>
						<view class="rank-info">
							<view class="info-main">
								<text class="name">{{ item.ManagerName || '未知' }}</text>
							<text class="value">￥{{ formatMoney(item.TotalBillingPerformance) }}</text>
						</view>
						<view class="progress-bg">
							<view class="progress-bar green" :style="{ width: (item.TotalBillingPerformance / (managerRanking[0].TotalBillingPerformance || 1) * 100) + '%' }"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 店长业绩排行 -->
			<view class="warpboxss ranking-section" v-if="storeManagerRanking.length > 0">
				<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="(item, index) in storeManagerRanking.slice(0, 10)" :key="index">
						<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">{{ item.StoreManagerName || '未知' }}</text>
								<text class="value">￥{{ formatMoney(item.TotalPerformance) }}</text>
							</view>
							<view class="progress-bg">
								<view class="progress-bar green" :style="{ width: (item.TotalPerformance / (storeManagerRanking[0].TotalPerformance || 1) * 100) + '%' }"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 健康师业绩排行 -->
			<view class="warpboxss ranking-section" v-if="healthCoachRanking.length > 0">
				<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="(item, index) in healthCoachRanking.slice(0, 10)" :key="index">
						<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">{{ item.HealthCoachName || '未知' }}</text>
								<text class="value">￥{{ formatMoney(item.TotalPerformance) }}</text>
							</view>
							<view class="progress-bg">
								<view class="progress-bar green" :style="{ width: (item.TotalPerformance / (healthCoachRanking[0].TotalPerformance || 1) * 100) + '%' }"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 运营统计 -->
			<view class="warpboxss operation-section" v-if="operationStatistics">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>运营统计</view>
				</view>
				<view class="operation-grid">
					<view class="operation-card">
						<view class="operation-title">开单分析</view>
						<view class="operation-item">
							<text class="operation-label">开单次数</text>
							<text class="operation-value">{{ formatNumber((operationStatistics && operationStatistics.BillingAnalysis && operationStatistics.BillingAnalysis.BillingCount) || 0) }}</text>
						</view>
						<view class="operation-item">
							<text class="operation-label">平均开单金额</text>
							<text class="operation-value">￥{{ formatMoney((operationStatistics && operationStatistics.BillingAnalysis && operationStatistics.BillingAnalysis.AverageBillingAmount) || 0) }}</text>
						</view>
					</view>
					<view class="operation-card">
						<view class="operation-title">消耗分析</view>
						<view class="operation-item">
							<text class="operation-label">消耗次数</text>
							<text class="operation-value">{{ formatNumber((operationStatistics && operationStatistics.ConsumeAnalysis && operationStatistics.ConsumeAnalysis.ConsumeCount) || 0) }}</text>
						</view>
						<view class="operation-item">
							<text class="operation-label">消耗金额</text>
							<text class="operation-value">￥{{ formatMoney((operationStatistics && operationStatistics.ConsumeAnalysis && operationStatistics.ConsumeAnalysis.ConsumeAmount) || 0) }}</text>
						</view>
						<view class="operation-item">
							<text class="operation-label">消耗率</text>
							<text class="operation-value">{{ formatPercent((operationStatistics && operationStatistics.ConsumeAnalysis && operationStatistics.ConsumeAnalysis.ConsumeRate) || 0) }}%</text>
						</view>
					</view>
					<view class="operation-card">
						<view class="operation-title">退卡分析</view>
						<view class="operation-item">
							<text class="operation-label">退卡次数</text>
							<text class="operation-value">{{ formatNumber((operationStatistics && operationStatistics.RefundAnalysis && operationStatistics.RefundAnalysis.RefundCount) || 0) }}</text>
						</view>
						<view class="operation-item">
							<text class="operation-label">退卡金额</text>
							<text class="operation-value">￥{{ formatMoney((operationStatistics && operationStatistics.RefundAnalysis && operationStatistics.RefundAnalysis.RefundAmount) || 0) }}</text>
						</view>
						<view class="operation-item">
							<text class="operation-label">退卡率</text>
							<text class="operation-value">{{ formatPercent((operationStatistics && operationStatistics.RefundAnalysis && operationStatistics.RefundAnalysis.RefundRate) || 0) }}%</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 对比分析 -->
			<view class="warpboxss comparison-section" v-if="comparisonAnalysis">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>对比分析</view>
				</view>
				<view class="comparison-content">
					<view class="comparison-block">
						<view class="comparison-title">环比对比（与上月对比）</view>
						<view class="comparison-items">
							<view class="comparison-item">
								<text class="comparison-label">开单业绩变化率</text>
								<text class="comparison-value" :class="monthOverMonthComparison.BillingPerformanceChangeRate > 0 ? 'positive' : (monthOverMonthComparison.BillingPerformanceChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(monthOverMonthComparison.BillingPerformanceChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">消耗业绩变化率</text>
								<text class="comparison-value" :class="monthOverMonthComparison.ConsumePerformanceChangeRate > 0 ? 'positive' : (monthOverMonthComparison.ConsumePerformanceChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(monthOverMonthComparison.ConsumePerformanceChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">净业绩变化率</text>
								<text class="comparison-value" :class="monthOverMonthComparison.NetPerformanceChangeRate > 0 ? 'positive' : (monthOverMonthComparison.NetPerformanceChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(monthOverMonthComparison.NetPerformanceChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">完成率变化</text>
								<text class="comparison-value" :class="monthOverMonthComparison.CompletionRateChange > 0 ? 'positive' : (monthOverMonthComparison.CompletionRateChange < 0 ? 'negative' : '')">
									{{ formatPercent(monthOverMonthComparison.CompletionRateChange) }}%
								</text>
							</view>
						</view>
					</view>
					<view class="comparison-block">
						<view class="comparison-title">同比对比（与去年同月对比）</view>
						<view class="comparison-items">
							<view class="comparison-item">
								<text class="comparison-label">开单业绩变化率</text>
								<text class="comparison-value" :class="yearOverYearComparison.BillingPerformanceChangeRate > 0 ? 'positive' : (yearOverYearComparison.BillingPerformanceChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(yearOverYearComparison.BillingPerformanceChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">消耗业绩变化率</text>
								<text class="comparison-value" :class="yearOverYearComparison.ConsumePerformanceChangeRate > 0 ? 'positive' : (yearOverYearComparison.ConsumePerformanceChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(yearOverYearComparison.ConsumePerformanceChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">净业绩变化率</text>
								<text class="comparison-value" :class="yearOverYearComparison.NetPerformanceChangeRate > 0 ? 'positive' : (yearOverYearComparison.NetPerformanceChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(yearOverYearComparison.NetPerformanceChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">完成率变化</text>
								<text class="comparison-value" :class="yearOverYearComparison.CompletionRateChange > 0 ? 'positive' : (yearOverYearComparison.CompletionRateChange < 0 ? 'negative' : '')">
									{{ formatPercent(yearOverYearComparison.CompletionRateChange) }}%
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 门店明细列表 -->
			<view id="store-detail-list" class="warpboxss detail-list-section">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>门店明细列表</view>
				</view>
				<view v-if="storeDetailList.loading" class="detail-loading">
					<u-loading-icon mode="spinner" size="40"></u-loading-icon>
					<text>加载中...</text>
				</view>
				<scroll-view scroll-y class="detail-content" v-else-if="storeDetailList.data.length > 0">
					<view class="detail-list">
						<view class="detail-item" v-for="(item, index) in storeDetailList.data" :key="index">
							<view class="detail-row detail-row-title">
								<text class="detail-label">门店名称：</text>
								<text class="detail-value">{{ item.StoreName || '无' }}</text>
							</view>
							<view class="detail-row-group">
								<view class="detail-row detail-row-compact">
									<text class="detail-label">开单业绩：</text>
									<text class="detail-value">￥{{ formatMoney(item.BillingPerformance) }}</text>
								</view>
								<view class="detail-row detail-row-compact">
									<text class="detail-label">消耗业绩：</text>
									<text class="detail-value">￥{{ formatMoney(item.ConsumePerformance) }}</text>
								</view>
							</view>
							<view class="detail-row-group">
								<view class="detail-row detail-row-compact">
									<text class="detail-label">净业绩：</text>
									<text class="detail-value">￥{{ formatMoney(item.NetPerformance) }}</text>
								</view>
								<view class="detail-row detail-row-compact">
									<text class="detail-label">完成率：</text>
									<text class="detail-value">{{ formatPercent(item.CompletionRate) }}%</text>
								</view>
							</view>
						</view>
					</view>
					<view class="detail-pagination" v-if="storeDetailList.pagination.total > storeDetailList.pagination.pageSize">
						<view class="pagination-info">
							共 {{ storeDetailList.pagination.total }} 条，当前第 {{ storeDetailList.pagination.currentPage }} / {{ Math.ceil(storeDetailList.pagination.total / storeDetailList.pagination.pageSize) }} 页
						</view>
						<view class="pagination-buttons">
							<button class="pagination-btn" :disabled="storeDetailList.pagination.currentPage === 1" @click="handleStoreDetailPageChange(storeDetailList.pagination.currentPage - 1)">上一页</button>
							<button class="pagination-btn" :disabled="storeDetailList.pagination.currentPage >= Math.ceil(storeDetailList.pagination.total / storeDetailList.pagination.pageSize)" @click="handleStoreDetailPageChange(storeDetailList.pagination.currentPage + 1)">下一页</button>
						</view>
					</view>
				</scroll-view>
				<view class="detail-empty" v-else>
					<text>暂无数据</text>
				</view>
			</view>

			<!-- 经理明细列表 -->
			<view id="manager-detail-list" class="warpboxss detail-list-section">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>经理明细列表</view>
				</view>
				<view v-if="managerDetailList.loading" class="detail-loading">
					<u-loading-icon mode="spinner" size="40"></u-loading-icon>
					<text>加载中...</text>
				</view>
				<scroll-view scroll-y class="detail-content" v-else-if="managerDetailList.data.length > 0">
					<view class="detail-list">
						<view class="detail-item" v-for="(item, index) in managerDetailList.data" :key="index">
							<view class="detail-row detail-row-title">
								<text class="detail-label">经理姓名：</text>
								<text class="detail-value">{{ item.ManagerName || '无' }}</text>
							</view>
							<view class="detail-row detail-row-compact">
								<text class="detail-label">管理门店数：</text>
								<text class="detail-value">{{ item.ManagedStoreCount || 0 }}</text>
							</view>
							<view class="detail-row-group">
								<view class="detail-row detail-row-compact">
									<text class="detail-label">总业绩：</text>
									<text class="detail-value">￥{{ formatMoney(item.TotalBillingPerformance) }}</text>
								</view>
								<view class="detail-row detail-row-compact">
									<text class="detail-label">总消耗业绩：</text>
									<text class="detail-value">￥{{ formatMoney(item.TotalConsumePerformance) }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="detail-pagination" v-if="managerDetailList.pagination.total > managerDetailList.pagination.pageSize">
						<view class="pagination-info">
							共 {{ managerDetailList.pagination.total }} 条，当前第 {{ managerDetailList.pagination.currentPage }} / {{ Math.ceil(managerDetailList.pagination.total / managerDetailList.pagination.pageSize) }} 页
						</view>
						<view class="pagination-buttons">
							<button class="pagination-btn" :disabled="managerDetailList.pagination.currentPage === 1" @click="handleManagerDetailPageChange(managerDetailList.pagination.currentPage - 1)">上一页</button>
							<button class="pagination-btn" :disabled="managerDetailList.pagination.currentPage >= Math.ceil(managerDetailList.pagination.total / managerDetailList.pagination.pageSize)" @click="handleManagerDetailPageChange(managerDetailList.pagination.currentPage + 1)">下一页</button>
						</view>
					</view>
				</scroll-view>
				<view class="detail-empty" v-else>
					<text>暂无数据</text>
				</view>
			</view>

			<!-- 店长明细列表 -->
			<view id="store-manager-detail-list" class="warpboxss detail-list-section">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>店长明细列表</view>
				</view>
				<view v-if="storeManagerDetailList.loading" class="detail-loading">
					<u-loading-icon mode="spinner" size="40"></u-loading-icon>
					<text>加载中...</text>
				</view>
				<scroll-view scroll-y class="detail-content" v-else-if="storeManagerDetailList.data.length > 0">
					<view class="detail-list">
						<view class="detail-item" v-for="(item, index) in storeManagerDetailList.data" :key="index">
							<view class="detail-row detail-row-title">
								<text class="detail-label">店长姓名：</text>
								<text class="detail-value">{{ item.StoreManagerName || '无' }}</text>
							</view>
							<view class="detail-row detail-row-compact">
								<text class="detail-label">门店名称：</text>
								<text class="detail-value">{{ item.StoreName || '无' }}</text>
							</view>
							<view class="detail-row detail-row-compact">
								<text class="detail-label">总业绩：</text>
								<text class="detail-value">￥{{ formatMoney(item.TotalPerformance) }}</text>
							</view>
						</view>
					</view>
					<view class="detail-pagination" v-if="storeManagerDetailList.pagination.total > storeManagerDetailList.pagination.pageSize">
						<view class="pagination-info">
							共 {{ storeManagerDetailList.pagination.total }} 条，当前第 {{ storeManagerDetailList.pagination.currentPage }} / {{ Math.ceil(storeManagerDetailList.pagination.total / storeManagerDetailList.pagination.pageSize) }} 页
						</view>
						<view class="pagination-buttons">
							<button class="pagination-btn" :disabled="storeManagerDetailList.pagination.currentPage === 1" @click="handleStoreManagerDetailPageChange(storeManagerDetailList.pagination.currentPage - 1)">上一页</button>
							<button class="pagination-btn" :disabled="storeManagerDetailList.pagination.currentPage >= Math.ceil(storeManagerDetailList.pagination.total / storeManagerDetailList.pagination.pageSize)" @click="handleStoreManagerDetailPageChange(storeManagerDetailList.pagination.currentPage + 1)">下一页</button>
						</view>
					</view>
				</scroll-view>
				<view class="detail-empty" v-else>
					<text>暂无数据</text>
				</view>
			</view>

			<!-- 健康师明细列表 -->
			<view id="health-coach-detail-list" class="warpboxss detail-list-section">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>健康师明细列表</view>
				</view>
				<view v-if="healthCoachDetailList.loading" class="detail-loading">
					<u-loading-icon mode="spinner" size="40"></u-loading-icon>
					<text>加载中...</text>
				</view>
				<scroll-view scroll-y class="detail-content" v-else-if="healthCoachDetailList.data.length > 0">
					<view class="detail-list">
						<view class="detail-item" v-for="(item, index) in healthCoachDetailList.data" :key="index">
							<view class="detail-row detail-row-title">
								<text class="detail-label">健康师姓名：</text>
								<text class="detail-value">{{ item.HealthCoachName || '无' }}</text>
							</view>
							<view class="detail-row detail-row-compact">
								<text class="detail-label">门店名称：</text>
								<text class="detail-value">{{ item.StoreName || '无' }}</text>
							</view>
							<view class="detail-row detail-row-compact">
								<text class="detail-label">总业绩：</text>
								<text class="detail-value">￥{{ formatMoney(item.TotalPerformance) }}</text>
							</view>
						</view>
					</view>
					<view class="detail-pagination" v-if="healthCoachDetailList.pagination.total > healthCoachDetailList.pagination.pageSize">
						<view class="pagination-info">
							共 {{ healthCoachDetailList.pagination.total }} 条，当前第 {{ healthCoachDetailList.pagination.currentPage }} / {{ Math.ceil(healthCoachDetailList.pagination.total / healthCoachDetailList.pagination.pageSize) }} 页
						</view>
						<view class="pagination-buttons">
							<button class="pagination-btn" :disabled="healthCoachDetailList.pagination.currentPage === 1" @click="handleHealthCoachDetailPageChange(healthCoachDetailList.pagination.currentPage - 1)">上一页</button>
							<button class="pagination-btn" :disabled="healthCoachDetailList.pagination.currentPage >= Math.ceil(healthCoachDetailList.pagination.total / healthCoachDetailList.pagination.pageSize)" @click="handleHealthCoachDetailPageChange(healthCoachDetailList.pagination.currentPage + 1)">下一页</button>
						</view>
					</view>
				</scroll-view>
				<view class="detail-empty" v-else>
					<text>暂无数据</text>
				</view>
			</view>

			<!-- 底部安全区域 -->
			<view style="height: 150rpx;"></view>
		</view>
	</view>
</template>

<script>
import businessUnitDashboardAPI from '@/apis/modules/business-unit-dashboard.js'
import request from '@/service/request.js'
import config from '@/common/config.js'

export default {
	data() {
		return {
			loading: false,
			screenshotLoading: false, // 截图加载状态
			showScreenshotBtn: true, // 是否显示截图按钮
			selectedMonth: '',
			businessUnitIndex: -1,
			businessUnitOptions: [],
			currentBusinessUnitName: '',
			currentBusinessUnitId: '',
			pageScrollTop: 0,
			trendMonthCount: 12,
			
			// 统计数据
			statistics: null,
			performanceTrend: { TrendData: [] },
			storeRanking: [],
			storeDistribution: { DistributionData: [] },
			managerRanking: [],
			storeManagerRanking: [],
			healthCoachRanking: [],
			operationStatistics: null,
			comparisonAnalysis: null,
			
			// 明细列表数据
			storeDetailList: {
				loading: false,
				data: [],
				pagination: {
					currentPage: 1,
					pageSize: 10,
					total: 0
				}
			},
			managerDetailList: {
				loading: false,
				data: [],
				pagination: {
					currentPage: 1,
					pageSize: 10,
					total: 0
				}
			},
			storeManagerDetailList: {
				loading: false,
				data: [],
				pagination: {
					currentPage: 1,
					pageSize: 10,
					total: 0
				}
			},
			healthCoachDetailList: {
				loading: false,
				data: [],
				pagination: {
					currentPage: 1,
					pageSize: 10,
					total: 0
				}
			},
			
			// 业绩趋势图表数据
			performanceTrendChartData: {},
			performanceTrendChartOpts: {
				color: ["#409EFF", "#67C23A", "#E6A23C"],
				padding: [15, 10, 0, 15],
				enableScroll: true,
				dataLabel: false,
				dataPointShape: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					scrollShow: true,
					itemCount: 4
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2,
					format: (val) => {
						return val >= 10000 ? (val / 10000).toFixed(1) + '万' : val.toString()
					}
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					},
					tooltip: {
						showBox: true,
						showArrow: true,
						showCategory: true,
						format: (item, category) => {
							const val = item.data >= 10000 ? (item.data / 10000).toFixed(1) + '万' : item.data.toString()
							return category + '\n' + item.name + ': ￥' + val
						}
					}
				}
			},
			// 门店分布图表数据
			storeDistributionChartData: {},
			storeDistributionChartOpts: {
				color: ["#F56C6C", "#67C23A", "#409EFF", "#E6A23C", "#909399"],
				padding: [15, 15, 0, 15],
				dataLabel: false,
				legend: {
					show: false
				},
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: '#FFFFFF',
						ringWidth: 30
					},
					tooltip: {
						showBox: true,
						showArrow: true,
						format: (item) => {
							return item.name + ': ￥' + (item.data >= 10000 ? (item.data / 10000).toFixed(1) + '万' : item.data.toString())
						}
					}
				}
			}
		}
	},
	computed: {
		selectedMonthText() {
			if (!this.selectedMonth) return '请选择月份'
			const date = new Date(this.selectedMonth)
			return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月`
		},
		kpiListTop() {
			const d = this.statistics || {}
			return [
				{
					key: 'billing',
					label: '开单业绩',
					value: d.BillingPerformance || 0,
					type: 'primary',
					isMoney: true,
					clickable: true
				},
				{
					key: 'net',
					label: '净业绩',
					value: d.NetPerformance || 0,
					type: 'warning',
					isMoney: true,
					clickable: true
				},
				{
					key: 'target',
					label: '目标业绩',
					value: d.TargetPerformance || 0,
					type: 'info',
					isMoney: true
				},
				{
					key: 'completion',
					label: '完成率',
					value: d.CompletionRate || 0,
					type: d.CompletionRate >= 100 ? 'success' : 'danger',
					isPercent: true
				},
				{
					key: 'managed',
					label: '管理门店数',
					value: d.ManagedStoreCount || 0,
					type: 'info',
					isMoney: false
				}
			]
		},
		categoryKpiList() {
			const d = this.statistics || {}
			return [
				{
					key: 'lifeBeauty',
					label: '生美业绩',
					value: d.LifeBeautyPerformance || 0,
					type: 'primary',
					isMoney: true
				},
				{
					key: 'techBeauty',
					label: '科美业绩',
					value: d.TechBeautyPerformance || 0,
					type: 'success',
					isMoney: true
				},
				{
					key: 'medicalBeauty',
					label: '医美业绩',
					value: d.MedicalBeautyPerformance || 0,
					type: 'warning',
					isMoney: true
				},
				{
					key: 'product',
					label: '产品业绩',
					value: d.ProductPerformance || 0,
					type: 'info',
					isMoney: true
				}
			]
		},
		// 对比分析数据简化
		monthOverMonthComparison() {
			if (!this.comparisonAnalysis || !this.comparisonAnalysis.TimeComparison || !this.comparisonAnalysis.TimeComparison.MonthOverMonth) {
				return {
					BillingPerformanceChangeRate: 0,
					ConsumePerformanceChangeRate: 0,
					NetPerformanceChangeRate: 0,
					CompletionRateChange: 0
				}
			}
			const data = this.comparisonAnalysis.TimeComparison.MonthOverMonth
			return {
				BillingPerformanceChangeRate: (data.BillingPerformance && data.BillingPerformance.GrowthRate) || 0,
				ConsumePerformanceChangeRate: (data.ConsumePerformance && data.ConsumePerformance.GrowthRate) || 0,
				NetPerformanceChangeRate: (data.NetPerformance && data.NetPerformance.GrowthRate) || 0,
				CompletionRateChange: (data.CompletionRate && data.CompletionRate.GrowthRate) || 0
			}
		},
		yearOverYearComparison() {
			if (!this.comparisonAnalysis || !this.comparisonAnalysis.TimeComparison || !this.comparisonAnalysis.TimeComparison.YearOverYear) {
				return {
					BillingPerformanceChangeRate: 0,
					ConsumePerformanceChangeRate: 0,
					NetPerformanceChangeRate: 0,
					CompletionRateChange: 0
				}
			}
			const data = this.comparisonAnalysis.TimeComparison.YearOverYear
			return {
				BillingPerformanceChangeRate: (data.BillingPerformance && data.BillingPerformance.GrowthRate) || 0,
				ConsumePerformanceChangeRate: (data.ConsumePerformance && data.ConsumePerformance.GrowthRate) || 0,
				NetPerformanceChangeRate: (data.NetPerformance && data.NetPerformance.GrowthRate) || 0,
				CompletionRateChange: (data.CompletionRate && data.CompletionRate.GrowthRate) || 0
			}
		}
	},
	onLoad() {
		const now = new Date()
		this.selectedMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
		this.loadBusinessUnitOptions()
	},
	// 组件挂载时调用（作为组件使用时）
	mounted() {
		this.init()
	},
	onPullDownRefresh() {
		this.search().finally(() => {
			uni.stopPullDownRefresh()
		})
	},
	onPageScroll(e) {
		this.pageScrollTop = e.scrollTop || 0
	},
	methods: {
		// 初始化方法（供父组件调用）
		init() {
			const now = new Date()
			this.selectedMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
			this.loadBusinessUnitOptions()
		},
		// 月份选择变化
		onMonthChange(e) {
			this.selectedMonth = e.detail.value
			if (this.currentBusinessUnitId) {
				this.search()
			}
		},
		// 事业部选择变化
		onBusinessUnitChange(e) {
			this.businessUnitIndex = e.detail.value
			if (this.businessUnitIndex >= 0 && this.businessUnitOptions[this.businessUnitIndex]) {
				const dept = this.businessUnitOptions[this.businessUnitIndex]
				this.currentBusinessUnitName = dept.fullName || dept.FullName || ''
				this.currentBusinessUnitId = dept.id || dept.Id || ''
				this.search()
			}
		},
		// 切换趋势月份数量
		switchTrendMonthCount(count) {
			this.trendMonthCount = count
			this.loadPerformanceTrend()
		},
		// 加载事业部选项
		async loadBusinessUnitOptions() {
			try {
				const res = await request.get(`${config.getApiBaseUrl()}/api/Extend/Organize/GetByName`, {
					organizeName: '事业部'
				})
				if (res.code === 200 && res.data) {
					this.businessUnitOptions = res.data.map(item => ({
						id: item.Id || item.id,
						FullName: item.FullName || item.fullName,
						fullName: item.FullName || item.fullName
					}))
					// 默认选择第一个事业部
					if (this.businessUnitOptions.length > 0 && !this.currentBusinessUnitId) {
						const firstDept = this.businessUnitOptions[0]
						this.businessUnitIndex = 0
						this.currentBusinessUnitName = firstDept.fullName || firstDept.FullName || ''
						this.currentBusinessUnitId = firstDept.id || firstDept.Id || ''
						// 自动加载数据
						this.search()
					}
				}
			} catch (error) {
				console.error('加载事业部列表失败:', error)
				uni.showToast({
					title: '加载事业部列表失败',
					icon: 'none'
				})
			}
		},
		// 主搜索方法
		async search() {
			if (!this.selectedMonth) {
				uni.showToast({
					title: '请选择月份',
					icon: 'none'
				})
				return
			}
			if (!this.currentBusinessUnitId) {
				uni.showToast({
					title: '请选择事业部',
					icon: 'none'
				})
				return
			}
			try {
				this.loading = true
				const statisticsMonth = this.selectedMonth.replace('-', '')
				const params = {
					statisticsMonth,
					businessUnitId: this.currentBusinessUnitId,
					storeIds: []
				}
				await Promise.all([
					this.loadStatistics(params),
					this.loadPerformanceTrend(),
					this.loadStoreRanking(params),
					this.loadStoreDistribution(params),
					this.loadManagerRanking(params),
					this.loadManagerDistribution(params),
					this.loadManagerTrend(),
					this.loadStoreManagerRanking(params),
					this.loadHealthCoachRanking(params),
					this.loadOperationStatistics(params),
					this.loadComparisonAnalysis(params),
					this.loadStoreDetailList(params),
					this.loadManagerDetailList(params),
					this.loadStoreManagerDetailList(params),
					this.loadHealthCoachDetailList(params)
				])
			} catch (error) {
				console.error('加载数据失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		// 加载统计数据
		async loadStatistics(params) {
			try {
				const res = await businessUnitDashboardAPI.getStatistics(params)
				if (res.code === 200) {
					this.statistics = res.data || null
				}
			} catch (error) {
				console.error('加载统计数据失败:', error)
			}
		},
		// 加载业绩趋势
		async loadPerformanceTrend() {
			if (!this.selectedMonth || !this.currentBusinessUnitId) return
			try {
				const statisticsMonth = this.selectedMonth.replace('-', '')
				const res = await businessUnitDashboardAPI.getPerformanceTrend({
					statisticsMonth,
					businessUnitId: this.currentBusinessUnitId,
					storeIds: [],
					monthCount: this.trendMonthCount
				})
				if (res.code === 200) {
					this.performanceTrend = res.data || { TrendData: [] }
					this.$nextTick(() => {
						this.drawPerformanceTrendChart()
					})
				}
			} catch (error) {
				console.error('加载业绩趋势失败:', error)
			}
		},
		// 加载门店排行
		async loadStoreRanking(params) {
			try {
				const res = await businessUnitDashboardAPI.getStoreRanking(params)
				if (res.code === 200) {
					this.storeRanking = (res.data && res.data.RankingData) || []
				}
			} catch (error) {
				console.error('加载门店排行失败:', error)
			}
		},
		// 加载门店分布
		async loadStoreDistribution(params) {
			try {
				const res = await businessUnitDashboardAPI.getStoreDistribution(params)
				if (res.code === 200) {
					this.storeDistribution = res.data || { DistributionData: [] }
					this.$nextTick(() => {
						this.drawStoreDistributionChart()
					})
				}
			} catch (error) {
				console.error('加载门店分布失败:', error)
			}
		},
		// 加载经理排行
		async loadManagerRanking(params) {
			try {
				const res = await businessUnitDashboardAPI.getManagerRanking(params)
				if (res.code === 200) {
					this.managerRanking = (res.data && res.data.RankingData) || []
					// 加载经理排行后，触发经理趋势加载
					this.$nextTick(() => {
						this.loadManagerTrend()
					})
				}
			} catch (error) {
				console.error('加载经理排行失败:', error)
			}
		},
		// 加载经理分布
		async loadManagerDistribution(params) {
			try {
				const res = await businessUnitDashboardAPI.getManagerDistribution(params)
				if (res.code === 200) {
					// H5端暂不展示经理分布图表，但接口已调用
					// this.managerDistribution = res.data || { DistributionData: [] }
				}
			} catch (error) {
				console.error('加载经理分布失败:', error)
			}
		},
		// 加载经理趋势
		async loadManagerTrend() {
			if (!this.selectedMonth || !this.currentBusinessUnitId) return
			// 从经理排行中获取经理ID列表（取前5名）
			if (!this.managerRanking || this.managerRanking.length === 0) {
				return
			}
			const managerIds = this.managerRanking.slice(0, 5).map(item => item.ManagerId).filter(id => id)
			if (managerIds.length === 0) return
			
			try {
				const statisticsMonth = this.selectedMonth.replace('-', '')
				const res = await businessUnitDashboardAPI.getManagerTrend({
					statisticsMonth,
					businessUnitId: this.currentBusinessUnitId,
					storeIds: [],
					monthCount: this.trendMonthCount,
					ManagerIds: managerIds
				})
				if (res.code === 200) {
					// H5端暂不展示经理趋势图表，但接口已调用
					// this.managerTrend = res.data || { ManagerTrendData: [] }
				}
			} catch (error) {
				console.error('加载经理趋势失败:', error)
			}
		},
		// 加载店长排行
		async loadStoreManagerRanking(params) {
			try {
				const res = await businessUnitDashboardAPI.getStoreManagerRanking(params)
				if (res.code === 200) {
					this.storeManagerRanking = (res.data && res.data.RankingData) || []
				}
			} catch (error) {
				console.error('加载店长排行失败:', error)
			}
		},
		// 加载健康师排行
		async loadHealthCoachRanking(params) {
			try {
				const res = await businessUnitDashboardAPI.getHealthCoachRanking(params)
				if (res.code === 200) {
					this.healthCoachRanking = (res.data && res.data.RankingData) || []
				}
			} catch (error) {
				console.error('加载健康师排行失败:', error)
			}
		},
		// 加载运营统计
		async loadOperationStatistics(params) {
			try {
				const res = await businessUnitDashboardAPI.getOperationStatistics(params)
				if (res.code === 200) {
					this.operationStatistics = res.data || null
				}
			} catch (error) {
				console.error('加载运营统计失败:', error)
			}
		},
		// 加载对比分析
		async loadComparisonAnalysis(params) {
			try {
				const res = await businessUnitDashboardAPI.getComparisonAnalysis(params)
				if (res.code === 200) {
					this.comparisonAnalysis = res.data || null
				}
			} catch (error) {
				console.error('加载对比分析失败:', error)
			}
		},
		// 绘制业绩趋势图表
		drawPerformanceTrendChart() {
			if (!this.performanceTrend.TrendData || this.performanceTrend.TrendData.length === 0) {
				this.performanceTrendChartData = {}
				return
			}
			const dates = this.performanceTrend.TrendData.map(item => {
				const month = item.Month
				if (month && month.length === 6) {
					return month.substring(0, 4) + '-' + month.substring(4, 6)
				}
				return month
			})
			const series = [
				{
					name: '开单业绩',
					data: this.performanceTrend.TrendData.map(item => parseFloat((item.BillingPerformance || 0).toFixed(2)))
				},
				{
					name: '消耗业绩',
					data: this.performanceTrend.TrendData.map(item => parseFloat((item.ConsumePerformance || 0).toFixed(2)))
				},
				{
					name: '净业绩',
					data: this.performanceTrend.TrendData.map(item => parseFloat((item.NetPerformance || 0).toFixed(2)))
				}
			]
			this.performanceTrendChartData = {
				categories: dates,
				series: series
			}
		},
		// 绘制门店分布图表
		drawStoreDistributionChart() {
			if (!this.storeDistribution.DistributionData || this.storeDistribution.DistributionData.length === 0) {
				this.storeDistributionChartData = {}
				return
			}
			const colors = ['#F56C6C', '#67C23A', '#409EFF', '#E6A23C', '#909399']
			const data = this.storeDistribution.DistributionData.map((item, index) => ({
				name: item.StoreName || '未知门店',
				value: item.Performance || 0,
				color: colors[index % colors.length]
			}))
			this.storeDistributionChartData = {
				series: [{
					data: data
				}]
			}
		},
		// 获取KPI图标名称
		getKpiIconName(key) {
			const iconMap = {
				billing: 'grid',
				net: 'red-packet',
				target: 'aim',
				completion: 'checkmark-circle',
				managed: 'home'
			}
			return iconMap[key] || 'chart'
		},
		// 获取品项分类KPI图标名称
		getCategoryKpiIconName(key) {
			const iconMap = {
				lifeBeauty: 'star',
				techBeauty: 'star',
				medicalBeauty: 'star',
				product: 'star'
			}
			return iconMap[key] || 'chart'
		},
		// 获取分布颜色
		getDistributionColor(index) {
			const colors = ['#F56C6C', '#67C23A', '#409EFF', '#E6A23C', '#909399']
			return colors[index % colors.length]
		},
		// 格式化数字
		formatNumber(num) {
			if (num === null || num === undefined) return '0'
			if (typeof num === 'string') num = parseFloat(num)
			if (isNaN(num)) return '0'
			if (num >= 10000) {
				return (num / 10000).toFixed(2) + '万'
			}
			return num.toLocaleString()
		},
		// 格式化金额
		formatMoney(amount) {
			if (amount === null || amount === undefined) return '0.00'
			if (typeof amount === 'string') amount = parseFloat(amount)
			if (isNaN(amount)) return '0.00'
			if (amount >= 10000) {
				return (amount / 10000).toFixed(2) + '万'
			}
			return amount.toFixed(2)
		},
		// 格式化百分比
		formatPercent(percent) {
			if (percent === null || percent === undefined || isNaN(percent)) {
				return '0.00'
			}
			if (typeof percent === 'string') {
				percent = parseFloat(percent)
			}
			if (isNaN(percent)) {
				return '0.00'
			}
			return (Math.round(percent * 100) / 100).toFixed(2)
		},
		// 格式化日期
		formatDate(dateValue) {
			if (!dateValue) return '无'
			// 如果是时间戳（数字或字符串数字）
			let timestamp = null
			if (typeof dateValue === 'number') {
				timestamp = dateValue
			} else if (typeof dateValue === 'string') {
				// 尝试解析为数字
				const num = parseFloat(dateValue)
				if (!isNaN(num) && num > 1000000000000) {
					// 看起来是时间戳（毫秒）
					timestamp = num
				} else if (dateValue.length === 8) {
					// YYYYMMDD格式
					return dateValue.substring(0, 4) + '-' + dateValue.substring(4, 6) + '-' + dateValue.substring(6, 8)
				} else if (dateValue.includes('-')) {
					// 已经是日期格式
					return dateValue
				}
			}
			
			if (timestamp) {
				const date = new Date(timestamp)
				if (isNaN(date.getTime())) return dateValue
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}`
			}
			
			return dateValue
		},
		// 处理KPI点击
		handleKpiClick(kpi) {
			if (kpi.clickable) {
				this.openKpiDrill(kpi)
			}
		},
		// KPI穿透功能 - 滚动到对应明细列表
		openKpiDrill(kpi) {
			let targetId = ''
			switch (kpi.key) {
				case 'billing':
				case 'net':
				case 'managed':
					targetId = 'store-detail-list'
					break
				case 'manager':
					targetId = 'manager-detail-list'
					break
				case 'storeManager':
					targetId = 'store-manager-detail-list'
					break
				case 'healthCoach':
					targetId = 'health-coach-detail-list'
					break
				default:
					return
			}
			
			if (targetId) {
				uni.createSelectorQuery().in(this).select('#' + targetId).boundingClientRect((data) => {
					if (data) {
						uni.pageScrollTo({
							scrollTop: data.top + this.pageScrollTop - 20,
							duration: 300
						})
					}
				}).exec()
			}
		},
		// 打开明细列表
		// 加载门店明细列表
		async loadStoreDetailList(params) {
			this.storeDetailList.loading = true
			try {
				const requestParams = {
					...params,
					currentPage: this.storeDetailList.pagination.currentPage,
					pageSize: this.storeDetailList.pagination.pageSize
				}
				const res = await businessUnitDashboardAPI.getStoreDetailList(requestParams)
				if (res.code === 200 && res.data) {
					this.storeDetailList.data = res.data.list || []
					this.storeDetailList.pagination.total = res.data.total || 0
				}
			} catch (error) {
				console.error('加载门店明细列表失败:', error)
			} finally {
				this.storeDetailList.loading = false
			}
		},
		// 加载经理明细列表
		async loadManagerDetailList(params) {
			this.managerDetailList.loading = true
			try {
				const requestParams = {
					...params,
					currentPage: this.managerDetailList.pagination.currentPage,
					pageSize: this.managerDetailList.pagination.pageSize
				}
				const res = await businessUnitDashboardAPI.getManagerDetailList(requestParams)
				if (res.code === 200 && res.data) {
					this.managerDetailList.data = res.data.list || []
					this.managerDetailList.pagination.total = res.data.total || 0
				}
			} catch (error) {
				console.error('加载经理明细列表失败:', error)
			} finally {
				this.managerDetailList.loading = false
			}
		},
		// 加载店长明细列表
		async loadStoreManagerDetailList(params) {
			this.storeManagerDetailList.loading = true
			try {
				const requestParams = {
					...params,
					currentPage: this.storeManagerDetailList.pagination.currentPage,
					pageSize: this.storeManagerDetailList.pagination.pageSize
				}
				const res = await businessUnitDashboardAPI.getStoreManagerDetailList(requestParams)
				if (res.code === 200 && res.data) {
					this.storeManagerDetailList.data = res.data.list || []
					this.storeManagerDetailList.pagination.total = res.data.total || 0
				}
			} catch (error) {
				console.error('加载店长明细列表失败:', error)
			} finally {
				this.storeManagerDetailList.loading = false
			}
		},
		// 加载健康师明细列表
		async loadHealthCoachDetailList(params) {
			this.healthCoachDetailList.loading = true
			try {
				const requestParams = {
					...params,
					currentPage: this.healthCoachDetailList.pagination.currentPage,
					pageSize: this.healthCoachDetailList.pagination.pageSize
				}
				const res = await businessUnitDashboardAPI.getHealthCoachDetailList(requestParams)
				if (res.code === 200 && res.data) {
					this.healthCoachDetailList.data = res.data.list || []
					this.healthCoachDetailList.pagination.total = res.data.total || 0
				}
			} catch (error) {
				console.error('加载健康师明细列表失败:', error)
			} finally {
				this.healthCoachDetailList.loading = false
			}
		},
		// 门店明细列表分页变化
		handleStoreDetailPageChange(page) {
			this.storeDetailList.pagination.currentPage = page
			const statisticsMonth = this.selectedMonth.replace('-', '')
			const params = {
				statisticsMonth,
				businessUnitId: this.currentBusinessUnitId,
				storeIds: []
			}
			this.loadStoreDetailList(params)
		},
		// 经理明细列表分页变化
		handleManagerDetailPageChange(page) {
			this.managerDetailList.pagination.currentPage = page
			const statisticsMonth = this.selectedMonth.replace('-', '')
			const params = {
				statisticsMonth,
				businessUnitId: this.currentBusinessUnitId,
				storeIds: []
			}
			this.loadManagerDetailList(params)
		},
		// 店长明细列表分页变化
		handleStoreManagerDetailPageChange(page) {
			this.storeManagerDetailList.pagination.currentPage = page
			const statisticsMonth = this.selectedMonth.replace('-', '')
			const params = {
				statisticsMonth,
				businessUnitId: this.currentBusinessUnitId,
				storeIds: []
			}
			this.loadStoreManagerDetailList(params)
		},
		// 健康师明细列表分页变化
		handleHealthCoachDetailPageChange(page) {
			this.healthCoachDetailList.pagination.currentPage = page
			const statisticsMonth = this.selectedMonth.replace('-', '')
			const params = {
				statisticsMonth,
				businessUnitId: this.currentBusinessUnitId,
				storeIds: []
			}
			this.loadHealthCoachDetailList(params)
		},
		// 保存截图
		async saveScreenshot() {
			// 隐藏截图按钮
			this.showScreenshotBtn = false
			// 显示加载提示
			uni.showLoading({
				title: '截图中'
			})
			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)
				uni.showToast({
					title: '截图生成失败: ' + (error.message || '未知错误'),
					icon: 'none',
					duration: 3000
				})
			} finally {
				this.screenshotLoading = false
				// 隐藏加载提示
				uni.hideLoading()
				// 恢复显示截图按钮
				this.showScreenshotBtn = true
			}
		},
		// H5平台截图
		async saveScreenshotH5() {
			try {
				const html2canvas = await import('html2canvas')
				let element = document.querySelector('.warpbox')
				if (!element) element = document.querySelector('.page')
				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 options = {
					allowTaint: true,
					useCORS: true,
					scale: 2.0,
					backgroundColor: '#ffffff',
					logging: false,
					imageTimeout: 30000,
					scrollX: 0,
					scrollY: 0,
					onclone: function(clonedDoc) {
						clonedDoc.body.style.backgroundColor = '#ffffff'
						clonedDoc.documentElement.style.backgroundColor = '#ffffff'
					}
				}
				
				let canvas
				try {
					canvas = await html2canvas.default(element, options)
				} catch (firstError) {
					console.warn('第一次截图失败，尝试备选方案:', firstError)
					canvas = await html2canvas.default(element, {
						allowTaint: true,
						useCORS: true,
						scale: 2.0,
						backgroundColor: '#ffffff',
						logging: false,
						imageTimeout: 30000
					})
				}
				
				const dataUrl = canvas.toDataURL('image/png', 1.0)
				const link = document.createElement('a')
				const fileName = `事业部数据_${this.currentBusinessUnitName || '未选择'}_${this.selectedMonth}_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.png`
				link.download = fileName
				link.href = dataUrl
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
				element.style.background = originalBg
				
				uni.showToast({
					title: '截图保存成功',
					icon: 'success',
					duration: 2000
				})
			} catch (error) {
				console.error('H5截图失败:', error)
				throw error
			}
		},
		// 微信小程序截图
		async saveScreenshotMiniProgram() {
			try {
				uni.canvasToTempFilePath({
					canvasId: 'screenshot-canvas',
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '截图已保存到相册',
									icon: 'success',
									duration: 2000
								})
							},
							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))
			uni.showToast({
				title: '截图功能暂不支持当前平台',
				icon: 'none',
				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;
		
		.date-picker-trigger,
		.business-unit-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);
			
			.date-text,
			.business-unit-text {
				font-size: 24rpx;
				color: #333;
				margin-right: 6rpx;
			}
		}
		
		.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);
	}
}

/* KPI 核心指标 */
.kpi-section {
	margin-bottom: 20rpx;
}

/* 上方5个指标 - 按照dashboard.vue样式 */
.billing-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24rpx;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
	margin-bottom: 16rpx;
	box-sizing: border-box;
}

.billing-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex: 1;
	width: 100%;
	padding: 0 8rpx;
	margin-bottom: 30rpx;
}

.billing-card .stat-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: 10rpx;
}

.billing-card .label-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	gap: 8rpx;
}

.billing-card .card-label {
	font-size: 24rpx;
	font-weight: 500;
	color: #666;
}

.billing-card .stat-icon-small {
	width: 48rpx;
	height: 48rpx;
	border-radius: 12rpx;
	margin-right: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	
	&.primary { background: #409EFF; }
	&.success { background: #67C23A; }
	&.warning { background: #E6A23C; }
	&.info { background: #909399; }
	&.danger { background: #F56C6C; }
}

.billing-value {
	font-size: 38rpx;
	font-weight: bold;
	color: #1f2937;
	line-height: 1.1;
	text-align: center;
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: baseline;
	justify-content: center;
	
	.currency {
		font-size: 24rpx;
		margin-right: 4rpx;
	}
	
	.value {
		font-size: 38rpx;
	}
}

.billing-footer {
	display: flex;
	justify-content: space-around;
	width: 100%;
	padding-top: 30rpx;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	margin-top: auto;
}

.count-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.count-text {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.5;
	display: flex;
	align-items: baseline;
	
	.count-value {
		font-size: 26rpx;
		font-weight: 500;
	}
}

.kpi-grid-bottom {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16rpx;
}

.kpi-card {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-radius: 24rpx;
	padding: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
	
	.kpi-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		
		.kpi-icon-square {
			width: 50rpx;
			height: 50rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12rpx;
			flex-shrink: 0;
			
			&.primary { background: #409EFF; }
			&.success { background: #67C23A; }
			&.warning { background: #E6A23C; }
			&.info { background: #F56C6C; }
			&.danger { background: #F56C6C; }
		}
		
		.kpi-label {
			font-size: 24rpx;
			color: #666;
		}
	}
	
	.kpi-value-group {
		display: flex;
		align-items: baseline;
		
		.currency { 
			font-size: 24rpx; 
			color: #333; 
			margin-right: 4rpx; 
		}
		.value { 
			font-size: 36rpx; 
			font-weight: bold; 
			color: #333; 
			letter-spacing: -1rpx; 
			flex: 1;
			text-align: center;
		}
	}
}

/* 趋势图表 */
.trend-controls {
	.pill-switch {
		display: flex;
		background: #f5f5f5;
		border-radius: 26rpx;
		padding: 3rpx;
		
		.pill-item {
			padding: 5rpx 18rpx;
			font-size: 22rpx;
			color: #666;
			border-radius: 24rpx;
			transition: all 0.3s;
			
			&.active {
				background: #fff;
				color: #43a047;
				box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
				font-weight: 500;
			}
		}
	}
}

.chart-wrapper {
	width: 100%;
	height: 400rpx;
	position: relative;
}

/* 门店分布 */
.distribution-chart-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.distribution-chart-wrapper {
	width: 100%;
	height: 480rpx;
	margin-bottom: 16rpx;
}

.distribution-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16rpx;
	padding: 16rpx;
	border-radius: 12rpx;
	width: 100%;
}

.distribution-legend .legend-item {
	display: flex;
	align-items: center;
	gap: 6rpx;
	padding: 6rpx 12rpx;
	background: #fff;
	border-radius: 8rpx;
}

.distribution-legend .legend-dot {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
}

.distribution-legend .legend-name {
	font-size: 22rpx;
	color: #666;
	margin-right: 6rpx;
}

.distribution-legend .legend-value {
	font-size: 22rpx;
	color: #333;
	font-weight: bold;
}

/* 排行榜通用 */
.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; 
			}
			
			&.rank-2 { 
				color: #C0C0C0; 
				font-size: 30rpx; 
			}
			
			&.rank-3 { 
				color: #CD7F32; 
				font-size: 30rpx; 
			}
			
			&.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;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				
				.name { font-size: 26rpx; font-weight: 500; color: #333; }
				.value { font-size: 26rpx; font-weight: bold; color: #43a047; }
			}
			
			.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%); }
				}
			}
		}
	}
}

/* 运营统计 */
.operation-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16rpx;
}

.operation-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 16rpx;
	
	.operation-title {
		font-size: 24rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 16rpx;
		padding-bottom: 12rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.operation-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 12rpx 0;
		
		.operation-label {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 8rpx;
		}
		
		.operation-value {
			font-size: 26rpx;
			font-weight: bold;
			color: #333;
		}
	}
}

/* 对比分析 */
.comparison-content {
	.comparison-block {
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.comparison-title {
			font-size: 26rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 16rpx;
		}
		
		.comparison-items {
			display: flex;
			flex-direction: column;
			gap: 12rpx;
		}
		
		.comparison-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx;
			background: #f5f7fa;
			border-radius: 8rpx;
			
			.comparison-label {
				font-size: 24rpx;
				color: #666;
			}
			
			.comparison-value {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				
				&.positive {
					color: #67C23A;
				}
				
				&.negative {
					color: #F56C6C;
				}
			}
		}
	}
}

// 明细列表样式 - 优化为与页面整体风格一致
.detail-list-section {
	margin-bottom: 20rpx;
	
	.warpboxs-small-title {
		margin-bottom: 20rpx;
	}
	
	.detail-loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
		color: #909399;
		font-size: 28rpx;
	}
	
	.detail-content {
		// max-height: 1200rpx;
		
		.detail-list {
			.detail-item {
				background: rgba(255, 255, 255, 0.95);
				backdrop-filter: blur(20px) saturate(180%);
				-webkit-backdrop-filter: blur(20px) saturate(180%);
				border-radius: 20rpx;
				padding: 28rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
				transition: all 0.3s ease;
				border: 1px solid rgba(67, 160, 71, 0.08);
				
				&:active {
					transform: scale(0.99);
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(67, 160, 71, 0.15) inset;
				}
				
				.detail-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 18rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					&.detail-row-title {
						margin-bottom: 24rpx;
						padding-bottom: 20rpx;
						border-bottom: 2px solid rgba(67, 160, 71, 0.2);
						position: relative;
						
						&::after {
							content: '';
							position: absolute;
							bottom: -2px;
							left: 0;
							width: 80rpx;
							height: 2px;
							background: linear-gradient(90deg, #43a047 0%, rgba(67, 160, 71, 0) 100%);
						}
						
						.detail-label {
							font-size: 28rpx;
							font-weight: 600;
							color: #1f2937;
						}
						
						.detail-value {
							font-size: 32rpx;
							font-weight: 700;
							color: #43a047;
							letter-spacing: 0.5rpx;
						}
					}
					
					&.detail-row-compact {
						margin-bottom: 14rpx;
						
						.detail-label {
							font-size: 26rpx;
							color: #666;
							font-weight: 500;
						}
						
						.detail-value {
							font-size: 28rpx;
							color: #333;
							font-weight: 600;
						}
					}
					
					.detail-label {
						font-size: 26rpx;
						color: #666;
						font-weight: 500;
						white-space: nowrap;
					}
					
					.detail-value {
						font-size: 28rpx;
						color: #333;
						flex: 1;
						text-align: right;
						font-weight: 600;
						word-break: break-all;
					}
				}
				
				.detail-row-group {
					display: flex;
					justify-content: space-between;
					margin-bottom: 14rpx;
					background: linear-gradient(135deg, rgba(67, 160, 71, 0.06) 0%, rgba(67, 160, 71, 0.03) 100%);
					border-radius: 14rpx;
					padding: 20rpx;
					border: 1px solid rgba(67, 160, 71, 0.1);
					
					.detail-row {
						flex: 1;
						margin-bottom: 0;
						padding: 0;
						
						&:first-child {
							margin-right: 24rpx;
							padding-right: 24rpx;
							border-right: 1px solid rgba(67, 160, 71, 0.15);
						}
						
						.detail-label {
							font-size: 24rpx;
							color: #666;
						}
						
						.detail-value {
							font-size: 26rpx;
							color: #333;
							font-weight: 600;
						}
					}
				}
			}
		}
		
		.detail-pagination {
			margin-top: 40rpx;
			padding: 0;
			
			.pagination-info {
				text-align: center;
				font-size: 26rpx;
				color: #666;
				margin-bottom: 24rpx;
				padding: 16rpx 20rpx;
				background: rgba(255, 255, 255, 0.9);
				backdrop-filter: blur(20px) saturate(180%);
				-webkit-backdrop-filter: blur(20px) saturate(180%);
				border-radius: 16rpx;
				border: 1px solid rgba(67, 160, 71, 0.12);
				box-shadow: 0 2rpx 12rpx rgba(67, 160, 71, 0.1);
				font-weight: 500;
				letter-spacing: 0.5rpx;
			}
			
			.pagination-buttons {
				display: flex;
				justify-content: space-between;
				gap: 20rpx;
				
				.pagination-btn {
					flex: 1;
					padding: 24rpx 0 !important;
					min-height: 80rpx !important;
					background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%) !important;
					color: #fff !important;
					border-radius: 18rpx !important;
					font-size: 30rpx !important;
					font-weight: 700 !important;
					border: none !important;
					box-shadow: 0 8rpx 24rpx rgba(67, 160, 71, 0.35),
								0 3rpx 10rpx rgba(67, 160, 71, 0.25),
								inset 0 1rpx 2rpx rgba(255, 255, 255, 0.25) !important;
					transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
					position: relative;
					overflow: hidden;
					letter-spacing: 1rpx;
					line-height: 1.5 !important;
					text-align: center !important;
					display: flex !important;
					align-items: center !important;
					justify-content: center !important;
					
					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: -100%;
						width: 100%;
						height: 100%;
						background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
						transition: left 0.6s ease;
					}
					
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 0;
						height: 0;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.3);
						transform: translate(-50%, -50%);
						transition: width 0.4s ease, height 0.4s ease;
					}
					
					&:active {
						transform: translateY(3rpx) scale(0.97);
						box-shadow: 0 4rpx 16rpx rgba(67, 160, 71, 0.3),
									0 2rpx 6rpx rgba(67, 160, 71, 0.2),
									inset 0 1rpx 1rpx rgba(255, 255, 255, 0.15);
						
						&::before {
							left: 100%;
						}
						
						&::after {
							width: 300rpx;
							height: 300rpx;
						}
					}
					
					&:disabled {
						background: linear-gradient(135deg, #e8e8e8 0%, #f0f0f0 100%) !important;
						color: #b0b0b0 !important;
						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08),
									inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5) !important;
						cursor: not-allowed;
						opacity: 0.7;
						transform: none;
						
						&::before,
						&::after {
							display: none;
						}
					}
				}
			}
		}
		
		.detail-empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 100rpx 0;
			font-size: 28rpx;
			color: #909399;
			
			&::before {
				content: '📋';
				font-size: 80rpx;
				margin-bottom: 20rpx;
				opacity: 0.3;
			}
		}
	}
}
</style>

