<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="techDepartmentOptions" range-key="fullName"
						:value="techDepartmentIndex" @change="onTechDepartmentChange">
						<view class="tech-department-picker-trigger">
							<text class="tech-department-text">{{ currentTechDepartmentName || '请选择科技部' }}</text>
							<u-icon name="arrow-down" size="14" color="#666"></u-icon>
						</view>
					</picker>
					<!-- 截图按钮 -->
					<!-- #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>

			<!-- 核心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' }">
							<!-- <view class="count-icon" :class="kpi.type">
								<u-icon :name="getKpiIconName(kpi.key)" :size="20" color="#fff"></u-icon>
							</view> -->
							<text class="count-text">
								<text class="count-value">{{ kpi.label + ' ' + formatNumber(kpi.value) }}</text>
							</text>
						</view>
					</view>
				</view>
				<!-- 新增5个指标 -->
				<view class="glass-card new-kpi-card" style="margin-top: 20rpx;">
					<view class="new-kpi-grid">
						<view class="new-kpi-item" v-for="(kpi, index) in kpiListTop.slice(5, 10)" :key="index"
							@click="handleKpiClick(kpi)" :style="{ cursor: kpi.clickable ? 'pointer' : 'default' }">
							<view class="new-kpi-icon" :class="kpi.type">
								<u-icon :name="getKpiIconName(kpi.key)" :size="18" color="#fff"></u-icon>
							</view>
							<view class="new-kpi-content">
								<text class="new-kpi-label">{{ kpi.label }}</text>
								<view class="new-kpi-value">
									<text class="new-kpi-currency" v-if="kpi.isMoney">￥</text>
									<text class="new-kpi-number">{{ kpi.isMoney ? formatMoney(kpi.value) : formatNumber(kpi.value) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 运营统计 -->
			<view class="warpboxss operation-section" v-if="operationStatistics || statistics">
				<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((statistics && statistics.BillingAmount) || 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 class="operation-card">
						<view class="operation-title">储扣分析</view>
						<view class="operation-item">
							<text class="operation-label">退卡溯源金额</text>
							<text
								class="operation-value">￥{{ formatMoney((statistics && statistics.RefundTraceabilityAmount) || 0) }}</text>
						</view>
						<view class="operation-item">
							<text class="operation-label">开单Cell金额</text>
							<text
								class="operation-value">￥{{ formatMoney((statistics && statistics.BillingCellAmount) || 0) }}</text>
						</view>
						<view class="operation-item">
							<text class="operation-label">退卡Cell金额</text>
							<text
								class="operation-value">￥{{ formatMoney((statistics && statistics.RefundCellAmount) || 0) }}</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.TotalKemeiIncome) }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 股份趋势 -->
			<view class="warpboxss share-trend-section"
				v-if="shareTrend.TrendData && shareTrend.TrendData.length > 0 &&false">
				<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="shareTrendMonthCount === 3 ? 'active' : ''"
								@click="switchShareTrendMonthCount(3)">3月</view>
							<view class="pill-item" :class="shareTrendMonthCount === 6 ? 'active' : ''"
								@click="switchShareTrendMonthCount(6)">6月</view>
							<view class="pill-item" :class="shareTrendMonthCount === 12 ? 'active' : ''"
								@click="switchShareTrendMonthCount(12)">12月</view>
						</view>
					</view>
				</view>
				<view class="chart-wrapper">
					<qiun-data-charts type="line" :opts="shareTrendChartOpts" :chartData="shareTrendChartData"
						:ontouch="true" :inScrollView="true" :pageScrollTop="pageScrollTop"
						background="rgba(255, 255, 255, 0.8)" />
				</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.TotalKemeiIncome) }}</text>
							</view>
							<view class="progress-bg">
								<view class="progress-bar"
									:style="{ width: (item.TotalKemeiIncome / (storeRanking[0].TotalKemeiIncome || 1) * 100) + '%' }">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 老师业绩排行 -->
			<view class="warpboxss teacher-section" v-if="teacherRanking.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 teacherRanking.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.EmployeeName ? item.EmployeeName.substring(0, 1) : '无' }}</text>
						</view>
						<view class="rank-info">
							<view class="info-main">
								<text class="name">{{ item.EmployeeName || '未知' }}</text>
								<text class="value">￥{{ formatMoney(item.TotalPerformance) }}</text>
							</view>
							<view class="progress-bg">
								<view class="progress-bar green"
									:style="{ width: (item.TotalPerformance / (teacherRanking[0].TotalPerformance || 1) * 100) + '%' }">
								</view>
							</view>
						</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.TraceabilityAmountChangeRate > 0 ? 'positive' : (monthOverMonthComparison.TraceabilityAmountChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(monthOverMonthComparison.TraceabilityAmountChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">Cell金额变化率</text>
								<text class="comparison-value"
									:class="monthOverMonthComparison.CellAmountChangeRate > 0 ? 'positive' : (monthOverMonthComparison.CellAmountChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(monthOverMonthComparison.CellAmountChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">科美总收入变化率</text>
								<text class="comparison-value"
									:class="monthOverMonthComparison.TotalKemeiIncomeChangeRate > 0 ? 'positive' : (monthOverMonthComparison.TotalKemeiIncomeChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(monthOverMonthComparison.TotalKemeiIncomeChangeRate) }}%
								</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.TraceabilityAmountChangeRate > 0 ? 'positive' : (yearOverYearComparison.TraceabilityAmountChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(yearOverYearComparison.TraceabilityAmountChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">Cell金额变化率</text>
								<text class="comparison-value"
									:class="yearOverYearComparison.CellAmountChangeRate > 0 ? 'positive' : (yearOverYearComparison.CellAmountChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(yearOverYearComparison.CellAmountChangeRate) }}%
								</text>
							</view>
							<view class="comparison-item">
								<text class="comparison-label">科美总收入变化率</text>
								<text class="comparison-value"
									:class="yearOverYearComparison.TotalKemeiIncomeChangeRate > 0 ? 'positive' : (yearOverYearComparison.TotalKemeiIncomeChangeRate < 0 ? 'negative' : '')">
									{{ formatPercent(yearOverYearComparison.TotalKemeiIncomeChangeRate) }}%
								</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.TraceabilityAmount) }}</text>
								</view>
								<view class="detail-row detail-row-compact">
									<text class="detail-label">Cell金额：</text>
									<text class="detail-value">￥{{ formatMoney(item.CellAmount) }}</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.TotalKemeiIncome) }}</text>
								</view>
								<view class="detail-row detail-row-compact">
									<text class="detail-label">占比：</text>
									<text class="detail-value">{{ formatPercent(item.Percentage) }}%</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="teacher-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="teacherDetailList.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="teacherDetailList.data.length > 0">
					<view class="detail-list">
						<view class="detail-item" v-for="(item, index) in teacherDetailList.data" :key="index">
							<view class="detail-row detail-row-title">
								<text class="detail-label">老师姓名：</text>
								<text class="detail-value">{{ item.EmployeeName || '无' }}</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-group">
								<view class="detail-row detail-row-compact">
									<text class="detail-label">开单业绩：</text>
									<text class="detail-value">￥{{ formatMoney(item.OrderAchievement) }}</text>
								</view>
								<view class="detail-row detail-row-compact">
									<text class="detail-label">消耗业绩：</text>
									<text class="detail-value">￥{{ formatMoney(item.ConsumeAchievement) }}</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.TotalPerformance) }}</text>
								</view>
								<view class="detail-row detail-row-compact">
									<text class="detail-label">手工费：</text>
									<text class="detail-value">￥{{ formatMoney(item.HandworkFee) }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="detail-pagination"
						v-if="teacherDetailList.pagination.total > teacherDetailList.pagination.pageSize">
						<view class="pagination-info">
							共 {{ teacherDetailList.pagination.total }} 条，当前第
							{{ teacherDetailList.pagination.currentPage }} /
							{{ Math.ceil(teacherDetailList.pagination.total / teacherDetailList.pagination.pageSize) }}
							页
						</view>
						<view class="pagination-buttons">
							<button class="pagination-btn" :disabled="teacherDetailList.pagination.currentPage === 1"
								@click="handleTeacherDetailPageChange(teacherDetailList.pagination.currentPage - 1)">上一页</button>
							<button class="pagination-btn"
								:disabled="teacherDetailList.pagination.currentPage >= Math.ceil(teacherDetailList.pagination.total / teacherDetailList.pagination.pageSize)"
								@click="handleTeacherDetailPageChange(teacherDetailList.pagination.currentPage + 1)">下一页</button>
						</view>
					</view>
				</scroll-view>
				<view class="detail-empty" v-else>
					<text>暂无数据</text>
				</view>
			</view>

			<!-- 开单明细列表 -->
			<view id="billing-detail-list" class="warpboxss detail-list-section" v-if="false">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>开单明细列表</view>
				</view>
				<view v-if="billingDetailList.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="billingDetailList.data.length > 0">
					<view class="detail-list">
						<view class="detail-item" v-for="(item, index) in billingDetailList.data" :key="index">
							<view class="detail-row detail-row-title">
								<text class="detail-label">开单日期：</text>
								<text class="detail-value">{{ formatDate(item.BillingDate) || '无' }}</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">{{ item.MemberName || '无' }}</text>
							</view>
							<view class="detail-row-group">
								<view class="detail-row detail-row-compact">
									<text class="detail-label">美业类型：</text>
									<text class="detail-value">{{ item.BeautyType || '无' }}</text>
								</view>
								<view class="detail-row detail-row-compact">
									<text class="detail-label">金额：</text>
									<text class="detail-value">￥{{ formatMoney(item.Amount) }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="detail-pagination"
						v-if="billingDetailList.pagination.total > billingDetailList.pagination.pageSize">
						<view class="pagination-info">
							共 {{ billingDetailList.pagination.total }} 条，当前第
							{{ billingDetailList.pagination.currentPage }} /
							{{ Math.ceil(billingDetailList.pagination.total / billingDetailList.pagination.pageSize) }}
							页
						</view>
						<view class="pagination-buttons">
							<button class="pagination-btn" :disabled="billingDetailList.pagination.currentPage === 1"
								@click="handleBillingDetailPageChange(billingDetailList.pagination.currentPage - 1)">上一页</button>
							<button class="pagination-btn"
								:disabled="billingDetailList.pagination.currentPage >= Math.ceil(billingDetailList.pagination.total / billingDetailList.pagination.pageSize)"
								@click="handleBillingDetailPageChange(billingDetailList.pagination.currentPage + 1)">下一页</button>
						</view>
					</view>
				</scroll-view>
				<view class="detail-empty" v-else>
					<text>暂无数据</text>
				</view>
			</view>

			<!-- 消耗明细列表 -->
			<view id="consume-detail-list" class="warpboxss detail-list-section" v-if="false">
				<view class="warpboxs-small-title">
					<view><text class="warpboxs-small-title-line"></text>消耗明细列表</view>
				</view>
				<view v-if="consumeDetailList.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="consumeDetailList.data.length > 0">
					<view class="detail-list">
						<view class="detail-item" v-for="(item, index) in consumeDetailList.data" :key="index">
							<view class="detail-row detail-row-title">
								<text class="detail-label">消耗日期：</text>
								<text class="detail-value">{{ formatDate(item.ConsumeDate) || '无' }}</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">{{ item.MemberName || '无' }}</text>
							</view>
							<view class="detail-row detail-row-compact">
								<text class="detail-label">金额：</text>
								<text class="detail-value">￥{{ formatMoney(item.Amount) }}</text>
							</view>
						</view>
					</view>
					<view class="detail-pagination"
						v-if="consumeDetailList.pagination.total > consumeDetailList.pagination.pageSize">
						<view class="pagination-info">
							共 {{ consumeDetailList.pagination.total }} 条，当前第
							{{ consumeDetailList.pagination.currentPage }} /
							{{ Math.ceil(consumeDetailList.pagination.total / consumeDetailList.pagination.pageSize) }}
							页
						</view>
						<view class="pagination-buttons">
							<button class="pagination-btn" :disabled="consumeDetailList.pagination.currentPage === 1"
								@click="handleConsumeDetailPageChange(consumeDetailList.pagination.currentPage - 1)">上一页</button>
							<button class="pagination-btn"
								:disabled="consumeDetailList.pagination.currentPage >= Math.ceil(consumeDetailList.pagination.total / consumeDetailList.pagination.pageSize)"
								@click="handleConsumeDetailPageChange(consumeDetailList.pagination.currentPage + 1)">下一页</button>
						</view>
					</view>
				</scroll-view>
				<view class="detail-empty" v-else>
					<text>暂无数据</text>
				</view>
			</view>
			<!-- 股份统计KPI -->
			<view class="warpboxss share-kpi-section" v-if="shareStatistics">
				<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 shareKpiList" :key="index">
						<view class="kpi-header">
							<view class="kpi-icon-square" :class="kpi.type">
								<u-icon :name="getShareKpiIconName(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 style="height: 150rpx;"></view>
		</view>
	</view>
</template>

<script>
	import techDepartmentDashboardAPI from '@/apis/modules/tech-department-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: '',
				techDepartmentIndex: -1,
				techDepartmentOptions: [],
				currentTechDepartmentName: '',
				currentTechDepartmentId: '',
				pageScrollTop: 0,
				trendMonthCount: 12,
				shareTrendMonthCount: 12,

				// 统计数据
				statistics: null,
				shareStatistics: null,
				performanceTrend: {
					TrendData: []
				},
				shareTrend: {
					TrendData: []
				},
				storeRanking: [],
				storeDistribution: {
					DistributionData: []
				},
				teacherRanking: [],
				operationStatistics: null,
				comparisonAnalysis: null,

				// 明细列表弹窗
				// 明细列表数据
				storeDetailList: {
					loading: false,
					data: [],
					pagination: {
						currentPage: 1,
						pageSize: 10,
						total: 0
					}
				},
				teacherDetailList: {
					loading: false,
					data: [],
					pagination: {
						currentPage: 1,
						pageSize: 10,
						total: 0
					}
				},
				billingDetailList: {
					loading: false,
					data: [],
					pagination: {
						currentPage: 1,
						pageSize: 10,
						total: 0
					}
				},
				consumeDetailList: {
					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())
							}
						}
					}
				},
				// 股份趋势图表数据
				shareTrendChartData: {},
				shareTrendChartOpts: {
					color: ["#409EFF", "#F56C6C", "#67C23A"],
					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
							}
						}
					}
				}
			}
		},
		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: 'traceability',
						label: '溯源金额',
						value: d.TraceabilityAmount || 0,
						type: 'primary',
						isMoney: true,
						clickable: true
					},
					{
						key: 'cell',
						label: 'Cell金额',
						value: d.CellAmount || 0,
						type: 'success',
						isMoney: true,
						clickable: true
					},
					{
						key: 'total',
						label: '科美总收入',
						value: d.TotalKemeiIncome || 0,
						type: 'warning',
						isMoney: true,
						clickable: true
					},
					{
						key: 'managed',
						label: '管理门店数',
						value: d.ManagedStoreCount || 0,
						type: 'info',
						isMoney: false,
						clickable: true
					},
					{
						key: 'active',
						label: '活跃门店数',
						value: d.ActiveStoreCount || 0,
						type: 'danger',
						isMoney: false,
						clickable: true
					},
					{
						key: 'billingAmount',
						label: '开单金额',
						value: d.BillingAmount || 0,
						type: 'primary',
						isMoney: true,
						clickable: false
					},
					{
						key: 'deductAmount',
						label: '储扣金额',
						value: d.DeductAmount || 0,
						type: 'warning',
						isMoney: true,
						clickable: false
					},
					{
						key: 'refundAmount',
						label: '退款金额',
						value: d.RefundAmount || 0,
						type: 'danger',
						isMoney: true,
						clickable: false
					},
					{
						key: 'consumeAmount',
						label: '消耗金额',
						value: d.ConsumeAmount || 0,
						type: 'success',
						isMoney: true,
						clickable: false
					},
					{
						key: 'handworkFee',
						label: '手工费',
						value: d.HandworkFee || 0,
						type: 'info',
						isMoney: true,
						clickable: false
					}
				]
			},
			// 对比分析数据简化
			monthOverMonthComparison() {
				if (!this.comparisonAnalysis || !this.comparisonAnalysis.TimeComparison || !this.comparisonAnalysis
					.TimeComparison.MonthOverMonth) {
					return {
						TraceabilityAmountChangeRate: 0,
						CellAmountChangeRate: 0,
						TotalKemeiIncomeChangeRate: 0
					}
				}
				return this.comparisonAnalysis.TimeComparison.MonthOverMonth
			},
			yearOverYearComparison() {
				if (!this.comparisonAnalysis || !this.comparisonAnalysis.TimeComparison || !this.comparisonAnalysis
					.TimeComparison.YearOverYear) {
					return {
						TraceabilityAmountChangeRate: 0,
						CellAmountChangeRate: 0,
						TotalKemeiIncomeChangeRate: 0
					}
				}
				return this.comparisonAnalysis.TimeComparison.YearOverYear
			},
			shareKpiList() {
				const d = this.shareStatistics || {}
				const totalCost = (d.CostReimbursement || 0) + (d.CostTeacherBase || 0) + (d.CostTeacherManual || 0) +
					(d.CostTeacherBillingComm || 0) + (d.CostTeacherConsumeComm || 0) + (d.CostGMBase || 0) + (d
						.CostGMComm || 0)
				return [{
						key: 'income',
						label: '收入',
						value: d.Income || 0,
						type: 'primary',
						isMoney: true
					},
					{
						key: 'cost',
						label: '总成本',
						value: totalCost,
						type: 'warning',
						isMoney: true
					},
					{
						key: 'profit',
						label: '毛利',
						value: d.Profit || 0,
						type: d.Profit >= 0 ? 'success' : 'danger',
						isMoney: true
					}
				]
			}
		},
		onLoad() {
			const now = new Date()
			this.selectedMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
			this.loadTechDepartmentOptions()
		},
		// 组件挂载时调用（作为组件使用时）
		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.loadTechDepartmentOptions()
			},
			// 月份选择变化
			onMonthChange(e) {
				this.selectedMonth = e.detail.value
				if (this.currentTechDepartmentId) {
					this.search()
				}
			},
			// 科技部选择变化
			onTechDepartmentChange(e) {
				this.techDepartmentIndex = e.detail.value
				if (this.techDepartmentIndex >= 0 && this.techDepartmentOptions[this.techDepartmentIndex]) {
					const dept = this.techDepartmentOptions[this.techDepartmentIndex]
					this.currentTechDepartmentName = dept.fullName || dept.FullName || ''
					this.currentTechDepartmentId = dept.id || dept.Id || ''
					this.search()
				}
			},
			// 切换趋势月份数量
			switchTrendMonthCount(count) {
				this.trendMonthCount = count
				this.loadPerformanceTrend()
			},
			// 切换股份趋势月份数量
			switchShareTrendMonthCount(count) {
				this.shareTrendMonthCount = count
				this.loadShareTrend()
			},
			// 加载科技部选项
			async loadTechDepartmentOptions() {
				try {
					// 检查是否有科技部数据开关按钮权限
					const menuData = uni.getStorageSync('appMenuData') || []
					if (Array.isArray(menuData) && menuData.length > 0) {
						const rootNode = menuData.find(item => item.fullName == 'app科技部数据开关按钮')
						if (rootNode) {
							// 如果有这个菜单项，直接获取所有科技部
							await this.loadAllTechDepartments()
							return
						}
					}

					// 如果没有权限，只加载用户自己的科技部
					const newuserInfo = uni.getStorageSync('newuserInfo') || {}
					const organizeId = newuserInfo.organizeId || ''

					if (!organizeId) {
						uni.showToast({
							title: '未获取到用户组织信息',
							icon: 'none'
						})
						return
					}

					// 先获取所有科技部，然后筛选出用户自己的科技部
					const res = await request.get(`${config.getApiBaseUrl()}/api/Extend/Organize/GetByName`, {
						organizeName: '科技部'
					})
					if (res.code === 200 && res.data) {
						const allTechDepartments = res.data.map(item => ({
							id: item.Id || item.id,
							FullName: item.FullName || item.fullName,
							fullName: item.FullName || item.fullName
						}))

						// 筛选出用户自己的科技部
						const userDept = allTechDepartments.find(dept => dept.id === organizeId)

						if (userDept) {
							// 找到用户自己的科技部，只显示这一个
							this.techDepartmentOptions = [userDept]
							this.techDepartmentIndex = 0
							this.currentTechDepartmentName = userDept.fullName
							this.currentTechDepartmentId = userDept.id
							// 自动加载数据
							this.search()
						} else {
							// 如果找不到，提示用户
							uni.showToast({
								title: '未找到您的科技部信息',
								icon: 'none'
							})
							this.techDepartmentOptions = []
						}
					}
				} catch (error) {
					console.error('加载科技部列表失败:', error)
					uni.showToast({
						title: '加载科技部列表失败',
						icon: 'none'
					})
				}
			},
			// 加载所有科技部
			async loadAllTechDepartments() {
				try {
					const res = await request.get(`${config.getApiBaseUrl()}/api/Extend/Organize/GetByName`, {
						organizeName: '科技部'
					})
					if (res.code === 200 && res.data) {
						this.techDepartmentOptions = res.data.map(item => ({
							id: item.Id || item.id,
							FullName: item.FullName || item.fullName,
							fullName: item.FullName || item.fullName
						}))
						// 获取当前登录用户信息，尝试匹配默认选中
						const newuserInfo = uni.getStorageSync('newuserInfo') || {}
						const organizeId = newuserInfo.organizeId || ''

						if (organizeId && this.techDepartmentOptions.length > 0) {
							// 尝试找到用户自己的科技部
							const userDeptIndex = this.techDepartmentOptions.findIndex(dept =>
								dept.id === organizeId
							)

							if (userDeptIndex >= 0) {
								// 找到用户自己的科技部，默认选中
								this.techDepartmentIndex = userDeptIndex
								this.currentTechDepartmentName = this.techDepartmentOptions[userDeptIndex].fullName
								this.currentTechDepartmentId = this.techDepartmentOptions[userDeptIndex].id
							} else {
								// 没找到，默认选择第一个
								this.techDepartmentIndex = 0
								this.currentTechDepartmentName = this.techDepartmentOptions[0].fullName
								this.currentTechDepartmentId = this.techDepartmentOptions[0].id
							}
							// 自动加载数据
							this.search()
						} else if (this.techDepartmentOptions.length > 0 && !this.currentTechDepartmentId) {
							// 如果没有用户信息，默认选择第一个科技部
							const firstDept = this.techDepartmentOptions[0]
							this.techDepartmentIndex = 0
							this.currentTechDepartmentName = firstDept.fullName || firstDept.FullName || ''
							this.currentTechDepartmentId = 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.currentTechDepartmentId) {
					uni.showToast({
						title: '请选择科技部',
						icon: 'none'
					})
					return
				}
				try {
					this.loading = true
					const statisticsMonth = this.selectedMonth.replace('-', '')
					const params = {
						statisticsMonth,
						techDepartmentId: this.currentTechDepartmentId,
						storeIds: []
					}
					await Promise.all([
						this.loadStatistics(params),
						this.loadShareStatistics(params),
						this.loadPerformanceTrend(),
						this.loadShareTrend(),
						this.loadStoreRanking(params),
						this.loadStoreDistribution(params),
						this.loadTeacherRanking(params),
						this.loadOperationStatistics(params),
						this.loadComparisonAnalysis(params),
						this.loadStoreDetailList(params),
						this.loadTeacherDetailList(params),
						this.loadBillingDetailList(params),
						this.loadConsumeDetailList(params)
					])
				} catch (error) {
					console.error('加载数据失败:', error)
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			// 加载统计数据
			async loadStatistics(params) {
				try {
					const res = await techDepartmentDashboardAPI.getStatistics(params)
					if (res.code === 200) {
						this.statistics = res.data || null
					}
				} catch (error) {
					console.error('加载统计数据失败:', error)
				}
			},
			// 加载股份统计数据
			async loadShareStatistics(params) {
				try {
					const res = await techDepartmentDashboardAPI.getShareStatistics(params)
					if (res.code === 200) {
						this.shareStatistics = res.data || null
					}
				} catch (error) {
					console.error('加载股份统计数据失败:', error)
				}
			},
			// 加载业绩趋势
			async loadPerformanceTrend() {
				if (!this.selectedMonth || !this.currentTechDepartmentId) return
				try {
					const statisticsMonth = this.selectedMonth.replace('-', '')
					const res = await techDepartmentDashboardAPI.getPerformanceTrend({
						statisticsMonth,
						techDepartmentId: this.currentTechDepartmentId,
						storeIds: [],
						monthCount: this.trendMonthCount
					})
					if (res.code === 200) {
						this.performanceTrend = res.data || {
							TrendData: []
						}
						this.$nextTick(() => {
							this.drawPerformanceTrendChart()
						})
					}
				} catch (error) {
					console.error('加载业绩趋势失败:', error)
				}
			},
			// 加载股份趋势
			async loadShareTrend() {
				if (!this.selectedMonth || !this.currentTechDepartmentId) return
				try {
					const statisticsMonth = this.selectedMonth.replace('-', '')
					const res = await techDepartmentDashboardAPI.getShareTrend({
						statisticsMonth,
						techDepartmentId: this.currentTechDepartmentId,
						storeIds: [],
						monthCount: this.shareTrendMonthCount
					})
					if (res.code === 200) {
						this.shareTrend = res.data || {
							TrendData: []
						}
						this.$nextTick(() => {
							this.drawShareTrendChart()
						})
					}
				} catch (error) {
					console.error('加载股份趋势失败:', error)
				}
			},
			// 加载门店排行
			async loadStoreRanking(params) {
				try {
					const res = await techDepartmentDashboardAPI.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 techDepartmentDashboardAPI.getStoreDistribution(params)
					if (res.code === 200) {
						this.storeDistribution = res.data || {
							DistributionData: []
						}
						this.$nextTick(() => {
							this.drawStoreDistributionChart()
						})
					}
				} catch (error) {
					console.error('加载门店分布失败:', error)
				}
			},
			// 加载老师排行
			async loadTeacherRanking(params) {
				try {
					const res = await techDepartmentDashboardAPI.getTeacherRanking(params)
					if (res.code === 200) {
						this.teacherRanking = (res.data && res.data.RankingData) || []
					}
				} catch (error) {
					console.error('加载老师排行失败:', error)
				}
			},
			// 加载运营统计
			async loadOperationStatistics(params) {
				try {
					const res = await techDepartmentDashboardAPI.getOperationStatistics(params)
					if (res.code === 200) {
						this.operationStatistics = res.data || null
					}
				} catch (error) {
					console.error('加载运营统计失败:', error)
				}
			},
			// 加载对比分析
			async loadComparisonAnalysis(params) {
				try {
					const res = await techDepartmentDashboardAPI.getComparisonAnalysis(params)
					if (res.code === 200) {
						this.comparisonAnalysis = res.data || null
					}
				} catch (error) {
					console.error('加载对比分析失败:', error)
				}
			},
			// 加载门店明细列表
			async loadStoreDetailList(params) {
				this.storeDetailList.loading = true
				try {
					const res = await techDepartmentDashboardAPI.getStoreDetailList({
						...params,
						currentPage: this.storeDetailList.pagination.currentPage,
						pageSize: this.storeDetailList.pagination.pageSize
					})
					if (res.code === 200 && res.data) {
						this.storeDetailList.data = res.data.list || []
						this.storeDetailList.pagination.total = (res.data.pagination && res.data.pagination.total) || 0
					}
				} catch (error) {
					console.error('加载门店明细列表失败:', error)
				} finally {
					this.storeDetailList.loading = false
				}
			},
			// 加载老师明细列表
			async loadTeacherDetailList(params) {
				this.teacherDetailList.loading = true
				try {
					const res = await techDepartmentDashboardAPI.getTeacherDetailList({
						...params,
						currentPage: this.teacherDetailList.pagination.currentPage,
						pageSize: this.teacherDetailList.pagination.pageSize
					})
					if (res.code === 200 && res.data) {
						this.teacherDetailList.data = res.data.list || []
						this.teacherDetailList.pagination.total = (res.data.pagination && res.data.pagination.total) ||
							0
					}
				} catch (error) {
					console.error('加载老师明细列表失败:', error)
				} finally {
					this.teacherDetailList.loading = false
				}
			},
			// 加载开单明细列表
			async loadBillingDetailList(params) {
				this.billingDetailList.loading = true
				try {
					const res = await techDepartmentDashboardAPI.getBillingDetailList({
						...params,
						currentPage: this.billingDetailList.pagination.currentPage,
						pageSize: this.billingDetailList.pagination.pageSize
					})
					if (res.code === 200 && res.data) {
						this.billingDetailList.data = res.data.list || []
						this.billingDetailList.pagination.total = (res.data.pagination && res.data.pagination.total) ||
							0
					}
				} catch (error) {
					console.error('加载开单明细列表失败:', error)
				} finally {
					this.billingDetailList.loading = false
				}
			},
			// 加载消耗明细列表
			async loadConsumeDetailList(params) {
				this.consumeDetailList.loading = true
				try {
					const res = await techDepartmentDashboardAPI.getConsumeDetailList({
						...params,
						currentPage: this.consumeDetailList.pagination.currentPage,
						pageSize: this.consumeDetailList.pagination.pageSize
					})
					if (res.code === 200 && res.data) {
						this.consumeDetailList.data = res.data.list || []
						this.consumeDetailList.pagination.total = (res.data.pagination && res.data.pagination.total) ||
							0
					}
				} catch (error) {
					console.error('加载消耗明细列表失败:', error)
				} finally {
					this.consumeDetailList.loading = false
				}
			},
			// KPI点击滚动到对应明细列表
			handleKpiClick(kpi) {
				if (!kpi.clickable) return
				let targetId = ''
				switch (kpi.key) {
					case 'traceability':
					case 'cell':
					case 'total':
						targetId = 'billing-detail-list'
						break
					case 'managed':
					case 'active':
						targetId = 'store-detail-list'
						break
					default:
						return
				}
				if (targetId) {
					this.$nextTick(() => {
						uni.createSelectorQuery().in(this).select('#' + targetId).boundingClientRect((data) => {
							if (data) {
								uni.pageScrollTo({
									scrollTop: data.top - 100,
									duration: 300
								})
							}
						}).exec()
					})
				}
			},
			// 门店明细列表分页变化
			handleStoreDetailPageChange(page) {
				this.storeDetailList.pagination.currentPage = page
				const statisticsMonth = this.selectedMonth.replace('-', '')
				const params = {
					statisticsMonth,
					techDepartmentId: this.currentTechDepartmentId,
					storeIds: []
				}
				this.loadStoreDetailList(params)
			},
			// 老师明细列表分页变化
			handleTeacherDetailPageChange(page) {
				this.teacherDetailList.pagination.currentPage = page
				const statisticsMonth = this.selectedMonth.replace('-', '')
				const params = {
					statisticsMonth,
					techDepartmentId: this.currentTechDepartmentId,
					storeIds: []
				}
				this.loadTeacherDetailList(params)
			},
			// 开单明细列表分页变化
			handleBillingDetailPageChange(page) {
				this.billingDetailList.pagination.currentPage = page
				const statisticsMonth = this.selectedMonth.replace('-', '')
				const params = {
					statisticsMonth,
					techDepartmentId: this.currentTechDepartmentId,
					storeIds: []
				}
				this.loadBillingDetailList(params)
			},
			// 消耗明细列表分页变化
			handleConsumeDetailPageChange(page) {
				this.consumeDetailList.pagination.currentPage = page
				const statisticsMonth = this.selectedMonth.replace('-', '')
				const params = {
					statisticsMonth,
					techDepartmentId: this.currentTechDepartmentId,
					storeIds: []
				}
				this.loadConsumeDetailList(params)
			},
			// 绘制业绩趋势图表
			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.TraceabilityAmount || 0)
							.toFixed(2)))
					},
					{
						name: 'Cell金额',
						data: this.performanceTrend.TrendData.map(item => parseFloat((item.CellAmount || 0).toFixed(
							2)))
					},
					{
						name: '科美总收入',
						data: this.performanceTrend.TrendData.map(item => parseFloat((item.TotalKemeiIncome || 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.TotalKemeiIncome || 0,
					color: colors[index % colors.length]
				}))
				this.storeDistributionChartData = {
					series: [{
						data: data
					}]
				}
			},
			// 绘制股份趋势图表
			drawShareTrendChart() {
				if (!this.shareTrend.TrendData || this.shareTrend.TrendData.length === 0) {
					this.shareTrendChartData = {}
					return
				}
				const dates = this.shareTrend.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.shareTrend.TrendData.map(item => parseFloat((item.Income || 0).toFixed(2)))
					},
					{
						name: '总成本',
						data: this.shareTrend.TrendData.map(item => {
							const totalCost = (item.CostReimbursement || 0) + (item.CostTeacherBase || 0) + (
									item.CostTeacherManual || 0) +
								(item.CostTeacherBillingComm || 0) + (item.CostTeacherConsumeComm || 0) + (item
									.CostGMBase || 0) + (item.CostGMComm || 0)
							return parseFloat(totalCost.toFixed(2))
						})
					},
					{
						name: '利润',
						data: this.shareTrend.TrendData.map(item => parseFloat((item.Profit || 0).toFixed(2)))
					}
				]
				this.shareTrendChartData = {
					categories: dates,
					series: series
				}
			},
			// 获取KPI图标名称
			getKpiIconName(key) {
				const iconMap = {
					traceability: 'grid',
					cell: 'star',
					total: 'trophy',
					managed: 'home',
					active: 'checkmark-circle',
					billingAmount: 'red-packet',
					deductAmount: 'list',
					refundAmount: 'close-circle',
					consumeAmount: 'checkmark-circle',
					handworkFee: 'star'
				}
				return iconMap[key] || 'chart'
			},
			// 获取股份KPI图标名称
			getShareKpiIconName(key) {
				const iconMap = {
					income: 'red-packet',
					cost: 'list',
					profit: '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
			},
			// 保存截图
			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.currentTechDepartmentName || '未选择'}_${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,
			.tech-department-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,
				.tech-department-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-icon {
		width: 36rpx;
		height: 36rpx;
		border-radius: 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;
		}
	}

	.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(3, 1fr);
		gap: 16rpx;
	}

	/* 新增KPI指标样式 */
	.new-kpi-card {
		width: 100%;
		padding: 24rpx;
		background: rgba(255, 255, 255, 0.95);
		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;
	}

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

	.new-kpi-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 16rpx;
		border: 1px solid rgba(67, 160, 71, 0.1);
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		}
	}

	.new-kpi-icon {
		width: 56rpx;
		height: 56rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		flex-shrink: 0;

		&.primary {
			background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
		}

		&.success {
			background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
		}

		&.warning {
			background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%);
		}

		&.danger {
			background: linear-gradient(135deg, #F56C6C 0%, #f78989 100%);
		}

		&.info {
			background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
		}
	}

	.new-kpi-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.new-kpi-label {
		font-size: 24rpx;
		color: #666;
		font-weight: 500;
		line-height: 1.2;
	}

	.new-kpi-value {
		display: flex;
		align-items: baseline;
		line-height: 1;
	}

	.new-kpi-currency {
		font-size: 22rpx;
		color: #333;
		font-weight: 500;
		margin-right: 2rpx;
	}

	.new-kpi-number {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		letter-spacing: -0.5rpx;
	}

	.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;
				}

				&.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;
				}
			}
		}
	}

	// 明细列表样式 - 优化为与页面整体风格一致
	.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: 10rpx 0 !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;

						&::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;
							}
						}
					}
				}
			}
		}


	}

	.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(2, 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-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>