jiayouhouyuan/pages/trace/detail.vue

<template>
		<view class="page">
		<view class="pageDecor">
			<view class="pageGlow glowA" />
			<view class="pageGlow glowB" />
			<view class="pageGlow glowC" />
			<view class="pageGrain" />
		</view>

			<!-- 顶部留白：兼容 iOS 刘海 -->
			<view class="safeTop" />

		<!-- 品牌页头：任何状态下均显示 -->
		<view class="brandPageHeader">
			<view class="brandPageHeaderInner">
				<text class="brandPageHeaderName">佳友厚苑</text>
				<view class="brandPageHeaderDot" />
				<text class="brandPageHeaderLabel">官方溯源 品质可验</text>
			</view>
		</view>

		<!-- ===== 加载中状态 ===== -->
		<view v-if="!traceLoaded" class="loadingState">
			<text class="loadingText">溯源信息加载中…</text>
		</view>

		<!-- ===== 数据加载完成后：正常态 / 异常态 ===== -->
		<view v-else class="mainContent">
			<!-- 正常态：已发布 -->
			<view v-if="canShowTraceContent">
			<!-- Hero 首屏：商品图 + 品牌氛围 + 商品信息面板 -->
			<view class="hero">
				<view class="heroCard">
					<!-- Hero 视觉区：商品图 + 品牌氛围 -->
					<view class="heroBg">
						<image
							class="heroImage"
							:src="traceDetail.product?.image || traceDetail.farm?.image"
							mode="aspectFill"
						/>
						<!-- 底部大字号水印，营造品牌氛围 -->
						<view class="heroBrandAnchor">
							<text class="heroBrandAnchorText">JIAYOU</text>
						</view>
						<!-- 光感层：多层次渐变 + 景深 + 底部暗化 -->
						<view class="heroMask" />
					</view>

					<!-- 商品信息面板：嵌入 Hero 底部，与 Hero 自然过渡 -->
					<view class="heroInfoPanel">
						<view class="infoPanelInner">
							<view class="sectionHeader">
								<view class="sectionHeaderLeft">
									<text class="sectionEn">Product</text>
									<text class="sectionTitle">商品信息</text>
								</view>
								<view v-if="traceDetail.batch?.statusBadge" class="trustBadge" :class="traceDetail.batch.statusBadge.type">
									<!-- 认证徽章 SVG：双圆环 + 对勾，图标主视觉，文字辅助 -->
									<svg class="trustBadgeIcon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
										<circle cx="10" cy="10" r="9" stroke="rgba(27,71,42,0.38)" stroke-width="0.9" />
										<circle cx="10" cy="10" r="5.5" stroke="rgba(27,71,42,0.22)" stroke-width="0.7" />
										<path d="M6.6 10.4L9.1 12.9L13.8 8" stroke="rgba(27,71,42,0.8)" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round" />
									</svg>
									<text class="trustBadgeText">{{ traceDetail.batch.statusBadge.text }}</text>
								</view>
							</view>

							<view class="infoPanelBody">
								<text class="infoPanelName">{{ traceDetail.product.name }}</text>

								<view v-if="traceDetail.product.spec" class="infoPanelSpec">
									<view class="specDot" />
									<text class="specText">{{ traceDetail.product.spec }}</text>
								</view>

								<view v-if="traceDetail.product?.intro" class="infoPanelIntro">
									<text>{{ traceDetail.product.intro }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<scroll-view class="content" scroll-y>
			<!-- 溯源信息卡：融合溯源结论 + 批次核心信息 -->
			<view v-if="traceDetail.batch?.exists && traceDetail.traceConclusionCard" class="card cardLevel1 cardConclusion">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Conclusion</text>
						<text class="sectionTitle">溯源信息</text>
					</view>
				</view>

				<!-- 溯源信息卡片主体：三层竖向结构 -->
				<view class="conclusionIdentity">
					<!-- 第一层：批次号主信息区 -->
					<view class="conclusionBatchWrap">
						<text class="conclusionBatchLabel">批次编号</text>
						<text class="conclusionBatchNo">{{ traceDetail.batch.no }}</text>
					</view>

					<!-- 第二层：时间摘要区 -->
					<view v-if="traceDetail.batch?.harvestTime || traceDetail.batch?.packTime" class="conclusionSummary">
						<template v-if="traceDetail.batch?.harvestTime && traceDetail.batch?.packTime">
							<text class="summaryLabel">生产/采收日期：</text>
							<text class="summaryText">{{ traceDetail.batch.harvestTime }}</text>
							<text class="summaryDivider">｜</text>
							<text class="summaryLabel">包装日期：</text>
							<text class="summaryText">{{ traceDetail.batch.packTime }}</text>
						</template>
						<template v-else-if="traceDetail.batch?.harvestTime">
							<text class="summaryLabel">生产/采收日期：</text>
							<text class="summaryText">{{ traceDetail.batch.harvestTime }}</text>
						</template>
						<template v-else-if="traceDetail.batch?.packTime">
							<text class="summaryLabel">包装日期：</text>
							<text class="summaryText">{{ traceDetail.batch.packTime }}</text>
						</template>
					</view>

					<!-- 第三层：结论标签区 -->
					<view class="conclusionTags">
						<view class="conclusionTag">
							<text>全程可追溯</text>
						</view>
						<view class="conclusionTag">
							<text>已通过安全检测</text>
						</view>
					</view>
				</view>
			</view>

				<!-- 农场信息（合并为单卡：图片+名称+地区+介绍连续表达） -->
			<view v-if="traceDetail.farm?.name" class="card cardLevel2 cardFarm">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Origin</text>
						<text class="sectionTitle">源头农场</text>
					</view>
				</view>

				<!-- 农场主体：左图右文结构，融入主体内容 -->
				<view class="farmBody">
					<view class="farmImageWrap">
						<image class="farmImage" :src="traceDetail.farm.image" mode="aspectFill" />
						<view class="farmImageVignette" />
					</view>
					<view class="farmMeta">
						<text class="farmName">{{ traceDetail.farm.name }}</text>
						<view class="farmTags">
							<text class="farmTag">真实种植</text>
							<text class="farmTag">可追溯来源</text>
						</view>
						<view v-if="traceDetail.farm.location" class="farmLocation">
							<svg class="locationIcon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M10 2C7.24 2 5 4.24 5 7c0 4 5 11 5 11s5-7 5-11c0-2.76-2.24-5-5-5zm0 6.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="rgba(39,113,76,0.6)"/>
							</svg>
							<text class="locationText">产地：{{ traceDetail.farm.location }}</text>
						</view>
					</view>
				</view>
				<view v-if="traceDetail.farm?.intro" class="farmIntro">
					<text class="farmIntroOrigin">{{ traceDetail.farm.intro }}</text>
				</view>
			</view>

			<!-- 农事时间轴：关键种植过程 -->
			<view v-if="traceDetail.batch?.exists && traceDetail.farmTimeline?.length" class="card cardLevel1 cardTimeline">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Process</text>
						<text class="sectionTitle">种植过程记录</text>
					</view>
				</view>

				<view class="timelineList">
					<view
						v-for="(item, index) in traceDetail.farmTimeline"
						:key="`timeline-${index}`"
						:class="{
							'timelineItem': true,
							'is-key': item.stage === 'test',
							'is-current': item.stage === 'pack'
						}"
					>
						<view class="timelineLeft">
							<view class="timelineDot" />
							<view v-if="index !== traceDetail.farmTimeline.length - 1" class="timelineLine" />
						</view>

						<view class="timelineRight">
							<text v-if="item.time" class="timelineTime">{{ item.time }}</text>
							<text class="timelineTitle">{{ item.title }}</text>
							<text class="timelineDesc">{{ item.desc }}</text>
						</view>
					</view>
				</view>

				<view class="timelineFootnote">
					<text>以上信息真实有效，可追溯验证</text>
				</view>
			</view>

			<!-- 种植现场实时画面 -->
			<view v-if="traceDetail.batch?.exists && traceDetail.camera" class="card cardLevel1 cardLive">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Live Scene</text>
						<text class="sectionTitle">种植现场</text>
					</view>
				</view>

				
					<!-- <image
						v-if="traceDetail.camera.coverImage"
						class="liveCover"
						:src="traceDetail.camera.coverImage"
						mode="aspectFill"
					/>
					<view v-else class="livePlaceholder">
						<view class="livePlayIcon">
							<view class="livePlayDot" />
							<view class="livePlayDot dot2" />
							<view class="livePlayDot dot3" />
						</view>
						<text class="livePlaceholderMain">实时画面接入中</text>
						<text class="livePlaceholderSub">请稍候查看现场情况</text>
					</view> -->
					<!-- 视频预览区域 -->
					<view class="video-section">
											<view class="video-container" :class="{'fullscreen-mode': isFullscreen}">
												<!-- 默认未播放态背景：深灰绿 + 柔和层次感 -->
												<view v-if="!isPlaying" class="video-placeholder-bg">
													<image :src="deviceInfo.imageUrl" mode="aspectFill" style="width:100%;height:100%"></image>
												</view>

											<!-- 使用跨平台视频播放组件 -->
											<!-- #ifdef H5 -->
											<!-- iOS H5：使用 video 直接播放 HLS（绕过 Jessibuca + wss_flv） -->
											<video
												v-if="isPlaying && isH5IOS"
												id="h5IosVideo"
												class="video-player"
												:src="getIOSH5StreamUrl"
												:autoplay="true"
												:controls="true"
												:show-center-play-btn="true"
												:enable-progress-gesture="false"
												:object-fit="'contain'"
												@error="onVideoError"
												@play="onVideoPlay"
												@pause="onVideoPause"
												@ended="onVideoEnded"
												@timeupdate="onTimeUpdate"
												@fullscreenchange="onFullscreenChange"
											></video>
											<!-- 非 iOS H5：使用 Jessibuca + wss_flv（保持安卓/PC 原有逻辑） -->
											<view v-else-if="isPlaying && !isH5IOS" class="h5-video-wrapper">
												<Jessibuca ref="jessibucaRef" :videoUrl="getH5StreamUrl" :hasAudio="true" @error="onVideoError" />
											</view>
											<!-- #endif -->

												<!-- 微信小程序视频播放 -->
												<!-- #ifdef MP-WEIXIN -->
												<video
													v-if="isPlaying"
													id="myVideo"
													class="video-player"
													:src="getAppStreamUrl"
													:autoplay="true"
													:controls="true"
													:show-center-play-btn="true"
													:enable-progress-gesture="false"
													:object-fit="'contain'"
													@error="onVideoError"
													@play="onVideoPlay"
													@pause="onVideoPause"
													@ended="onVideoEnded"
													@timeupdate="onTimeUpdate"
													@fullscreenchange="onFullscreenChange"
												></video>
												<!-- #endif -->
												<!-- App端视频播放 -->
												<!-- #ifdef APP-PLUS || APP-HARMONY -->
												<video
													v-if="isPlaying"
													id="appVideo"
													class="video-player"
													:src="getAppStreamUrl"
													:autoplay="true"
													:controls="true"
													:show-center-play-btn="true"
													@error="onVideoError"
												></video>
												<!-- #endif -->

												<!-- 视频控制层 -->
												<view class="video-controls">
													<view class="control-row top-controls">
														<!-- 左上角留空，保持简洁 -->

														<!-- 右上角：全屏按钮（仅播放态显示） -->
														<view v-if="isPlaying" class="fullscreen-button" @click="toggleFullscreen">
															<image src="/static/icons/resize_icon.png" mode="aspectFit"
																style="width: 18px; height: 18px;"></image>
														</view>
													</view>

													<view class="control-row center-controls">
														<!-- 默认未播放态：圆形播放按钮 -->
														<view v-if="!isPlaying" class="play-button" @click="togglePlayState">
															<view class="play-btn-circle">
																<view class="play-btn-icon"></view>
															</view>
														</view>
														<!-- 播放态：暂停按钮 -->
														<view v-else class="center-button-container" @click="togglePlayState">
															<view class="pause-icon">
																<image src="/static/icons/pause_icon.png" mode="aspectFit"
																	style="width: 24px; height: 24px;"></image>
															</view>
														</view>
													</view>

													<view class="control-row bottom-controls">
														<!-- 只在播放时显示时间码 -->
														<view v-if="isPlaying && !isH5IOS" class="video-time">{{ currentTime }}</view>
													</view>
												</view>

												<!-- 实时在线状态标签（固定在右上角，不受其他元素影响） -->
												<view class="video-fixed-status">
													<view class="liveStatusPill" :class="cameraStatus.value">
														<view class="liveStatusDot" />
														<text class="liveStatusText">实时在线</text>
													</view>
												</view>
											</view>
										</view>
				

				<view class="liveDesc">
					<text>现场画面可见，种植状态真实呈现</text>
				</view>
			</view>

			<!-- 种植环境记录 -->
			<view v-if="traceDetail.batch?.exists && traceDetail.environment" class="card cardLevel1 cardEnvironment">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Environment</text>
						<text class="sectionTitle">种植环境记录</text>
					</view>
				</view>

				<view class="environmentSummary">
					<text>{{ traceDetail.environment.summary }}</text>
				</view>

				<!-- 土壤养分趋势图 -->
				<view v-if="traceDetail.environment.chart" class="environmentChart">
					<view class="environmentChartHead">
						<text class="environmentChartTitle">土壤养分变化趋势</text>
						<text class="environmentChartSub">氮 / 磷 / 钾 种植期记录</text>
					</view>

					<view class="environmentChartCanvas">
						<!-- SVG 绘图区 -->
						<view class="chartPlotArea">
							<svg class="chartSvg" viewBox="0 0 700 200" preserveAspectRatio="none">
								<!-- 网格线 -->
								<line v-for="(line, idx) in svgGridLines" :key="`grid-${idx}`"
									class="chartGridLineSvg"
									:x1="0" :y1="line" :x2="700" :y2="line"
								/>

								<!-- 定义渐变和发光滤镜 -->
								<defs>
									<linearGradient id="gradN" x1="0%" y1="0%" x2="100%" y2="0%">
										<stop offset="0%" stop-color="rgba(47, 125, 85, 0.3)" />
										<stop offset="50%" stop-color="rgba(47, 125, 85, 0.7)" />
										<stop offset="100%" stop-color="rgba(47, 125, 85, 0.3)" />
									</linearGradient>
									<linearGradient id="gradP" x1="0%" y1="0%" x2="100%" y2="0%">
										<stop offset="0%" stop-color="rgba(180, 140, 70, 0.3)" />
										<stop offset="50%" stop-color="rgba(180, 140, 70, 0.7)" />
										<stop offset="100%" stop-color="rgba(180, 140, 70, 0.3)" />
									</linearGradient>
									<linearGradient id="gradK" x1="0%" y1="0%" x2="100%" y2="0%">
										<stop offset="0%" stop-color="rgba(84, 130, 110, 0.3)" />
										<stop offset="50%" stop-color="rgba(84, 130, 110, 0.7)" />
										<stop offset="100%" stop-color="rgba(84, 130, 110, 0.3)" />
									</linearGradient>
									<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
										<feGaussianBlur stdDeviation="3" result="blur" />
										<feMerge>
											<feMergeNode in="blur" />
											<feMergeNode in="SourceGraphic" />
										</feMerge>
									</filter>
								</defs>

								<!-- 面积渐变层（先绘制，在线下方） -->
								<path class="chartAreaN" :d="chartAreas.n" />
								<path class="chartAreaP" :d="chartAreas.p" />
								<path class="chartAreaK" :d="chartAreas.k" />

								<!-- 曲线层（带渐变和发光） -->
								<path class="chartPathN" :d="chartPaths.n" stroke="url(#gradN)" />
								<path class="chartPathP" :d="chartPaths.p" stroke="url(#gradP)" />
								<path class="chartPathK" :d="chartPaths.k" stroke="url(#gradK)" />

								<!-- 数据点 -->
								<circle v-for="(pt, idx) in chartPoints.n" :key="`n-${idx}`"
									class="chartDotN"
									cx="0" cy="0" r="3"
									:transform="`translate(${pt.x}, ${pt.y})`"
								/>
								<circle v-for="(pt, idx) in chartPoints.p" :key="`p-${idx}`"
									class="chartDotP"
									cx="0" cy="0" r="3"
									:transform="`translate(${pt.x}, ${pt.y})`"
								/>
								<circle v-for="(pt, idx) in chartPoints.k" :key="`k-${idx}`"
									class="chartDotK"
									cx="0" cy="0" r="3"
									:transform="`translate(${pt.x}, ${pt.y})`"
								/>
							</svg>
						</view>

						<!-- 日期标签：独立于绘图区 -->
						<view class="chartLabels">
							<text v-for="(label, idx) in traceDetail.environment.chart.labels" :key="`label-${idx}`">{{ label }}</text>
						</view>
					</view>

					<view class="environmentChartLegend">
						<view class="legendItem">
							<view class="legendDot legendN" />
							<text>氮</text>
						</view>
						<view class="legendItem">
							<view class="legendDot legendP" />
							<text>磷</text>
						</view>
						<view class="legendItem">
							<view class="legendDot legendK" />
							<text>钾</text>
						</view>
					</view>
				</view>

				<!-- 环境摘要项 -->
				<view class="environmentGrid">
					<view
						v-for="(item, index) in traceDetail.environment.items"
						:key="`env-${index}`"
						class="environmentItem"
					>
						<text class="environmentLabel">{{ item.label }}</text>
						<text class="environmentValue">{{ item.value }}</text>
						<text class="environmentStatus">{{ item.status }}</text>
					</view>
				</view>
			</view>

			<!-- 检测报告：横向卡片列表 -->
			<view v-if="traceDetail.batch?.exists" class="card cardLevel2 cardCredential">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Report</text>
						<text class="sectionTitle">检测报告</text>
					</view>
				</view>

				<!-- 横向滑动卡片列表 -->
				<scroll-view
					v-if="reportItems.length"
					class="reportCardList"
					scroll-x
					:show-scrollbar="false"
					enhanced
				>
					<view class="reportCardTrack">
						<view
							v-for="(item, itemIdx) in reportItems"
							:key="`report-card-${itemIdx}`"
							class="reportCard"
							@click="previewDoc('report', getReportGlobalIndex(itemIdx, 0))"
						>
							<!-- 报告缩略图（带页数角标） -->
							<view class="reportCardThumb">
								<image
									v-if="item.images && item.images.length"
									class="reportCardThumbImg"
									:src="item.images[0]"
									mode="aspectFit"
								/>
								<view v-else class="reportCardThumbEmpty">
									<text class="reportCardThumbEmptyText">暂无图片</text>
								</view>
								<view v-if="item.images && item.images.length > 1" class="reportCardPages">
									共{{ item.images.length }}页
								</view>
							</view>

							<!-- 报告信息 -->
							<view class="reportCardMeta">
								<view v-if="item.detectDate" class="reportCardRow">
									<text class="reportCardLabel">检测日期</text>
									<text class="reportCardValue">{{ item.detectDate }}</text>
								</view>
								<view v-if="item.no" class="reportCardRow">
									<text class="reportCardLabel">报告编号</text>
									<text class="reportCardValue reportCardValueNo">{{ item.no }}</text>
								</view>
							</view>

							<!-- 点击提示 -->
							<text class="reportCardHint">点击查看大图</text>
						</view>
					</view>
				</scroll-view>

				<!-- 待补充状态 -->
				<view v-else class="docPlaceholder">
					<text class="docPlaceholderTitle">检测报告待补充</text>
					<text class="docPlaceholderText">
						{{ traceDetail.report?.emptyMessage || '检测报告待补充，请耐心等待。' }}
					</text>
				</view>
			</view>

			<!-- 合格证：信息摘要 + 缩略图一体化布局 -->
			<view v-if="traceDetail.batch?.exists" class="card cardLevel1 cardCredential">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Certificate</text>
						<text class="sectionTitle">合格证</text>
					</view>
				</view>

				<!-- 信息与缩略图一体化区域 -->
				<view class="certSummary">
					<!-- 左侧：信息摘要 -->
					<view class="certSummaryInfo">
						<view v-if="traceDetail.certificate?.issueDate" class="certSummaryRow">
							<text class="certSummaryLabel">开具日期</text>
							<text class="certSummaryValue">{{ traceDetail.certificate.issueDate }}</text>
						</view>
						<view v-if="traceDetail.certificate?.no" class="certSummaryRow">
							<text class="certSummaryLabel">合格证编号</text>
							<text class="certSummaryValue">{{ traceDetail.certificate.no }}</text>
						</view>
					</view>

					<!-- 右侧：缩略图 -->
					<view
						v-if="traceDetail.certificate?.status === 'uploaded' && certificateImages.length"
						class="certThumbContainer"
						@click="previewDoc('certificate', 0)"
					>
						<view class="certThumbWrap">
							<image class="certThumbImage" :src="certificateImages[0]" mode="aspectFit" />
						</view>
						<text class="certPreviewHint">点击查看</text>
					</view>

					<!-- 待补充状态：仅显示提示 -->
					<view v-else class="certPendingHint">
						<text class="certPendingText">
							{{ traceDetail.certificate?.emptyMessage || '合格证待补充，请耐心等待。' }}
						</text>
					</view>
				</view>
			</view>

			<!-- 安心收口文案 -->
			<view class="pageEndHint">
				<text>本产品已完成全流程溯源记录，信息真实可查，请放心食用。</text>
			</view>

			<!-- 底部柔和收口渐变 -->
			<view class="footerFade" />
			<!-- 轻量页脚 -->
			<view class="traceFooter">
				<view class="traceFooterHint">如需帮助，联系客服</view>
				<view class="traceFooterPhone" @click="contactCustomer">
					<image class="traceFooterPhoneIcon" src="/static/icons/phone.svg" mode="aspectFit" />
					<text class="traceFooterPhoneNum">13379508760</text>
				</view>
				<view class="traceFooterBrand">佳友厚苑 · 安心之选</view>
			</view>
		</scroll-view>
		</view>

		<!-- ===== 异常态：待发布 / 已下线 / 无效批次 ===== -->
		<view v-if="!canShowTraceContent">
			<view class="abnormalStateCard">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Status</text>
						<text class="sectionTitle">暂无相关溯源码信息</text>
					</view>
				</view>
				<view class="emptyText">{{ traceDetail.batch?.emptyMessage || '未找到对应溯源码信息，请确认二维码是否正确。' }}</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getTraceDetail } from '@/api/base/index.js'
import {
	getDeviceCollectorDetail,
	getChannels,
	playStart,
	pause ,
	querySnap
} from '@/api/device.js'
import Jessibuca from '@/components/common/jessibuca.vue'
// 页面状态选择（H5 演示用）：通过路由参数传入 state 即可切换 mock 场景
// 例如：/pages/trace/detail?state=reportPending
// 加载状态
const loading = ref(false)
// 数据首次加载完成标记（用于区分"加载中"与"加载后异常态"）
const traceLoaded = ref(false)
// 数据存储
const traceInfo = ref(null)
const routeOptions = ref({})
const mockStateKey = ref('normal')
const isFullscreen = ref(false)
const isPlaying = ref(false)
const livePlayerContext = ref(null) // 小程序视频上下文
const appLivePlayerContext = ref(null) // App端视频上下文
const h5IosVideoContext = ref(null) // H5 iOS video 上下文
const jessibucaRef = ref(null)

const isMuted = ref(false)
const isRecording = ref(false)
const isVoiceActive = ref(false)
const isGridView = ref(false)
const isZoomMode = ref(false)
const currentTime = ref('14:30:25')

// ===== 平台识别：iPhone / iOS 设备判断 =====
const isIOSDevice = computed(() => {
	// #ifdef H5
	const ua = navigator.userAgent.toLowerCase()
	return /iphone|ipad|ipod/.test(ua)
	// #endif
	// #ifdef APP-PLUS
	const platform = uni.getSystemInfoSync().platform
	return platform === 'ios'
	// #endif
	return false
})

const isIPhoneH5 = computed(() => {
	// #ifdef H5
	const ua = navigator.userAgent.toLowerCase()
	return /iphone/.test(ua) && !/ipad|ipod/.test(ua)
	// #endif
	return false
})

const isIPadH5 = computed(() => {
	// #ifdef H5
	const ua = navigator.userAgent.toLowerCase()
	return /ipad/.test(ua)
	// #endif
	return false
})

// H5 iOS 设备（包括 iPhone 和 iPad）
const isH5IOS = computed(() => {
	// #ifdef H5
	const ua = navigator.userAgent.toLowerCase()
	return /iphone|ipad|ipod/.test(ua)
	// #endif
	return false
})
// 响应式数据
const deviceInfo = reactive({
	deviceId: '34020000001110000001',
	name: '设备加载中...',
	status: 'off',
	location: '正在获取位置...',
	lastUpdate: '',
	deviceType: 'weather', // 默认类型，会根据API返回更新
	deviceTypeId: null,
	streamUrl: '',
	channelId: null, // 当前通道ID
	// ===== 流地址：分格式保存，不再互相覆盖 =====
	originalStreamUrl: '',    // 兼容旧逻辑
	wsFlvStreamUrl: '',       // wss_flv 流地址（安卓 H5 用）
	hlsStreamUrl: '',         // hls 流地址（iOS H5 / 小程序 / App iOS 用）
	fmp4StreamUrl: '',        // fmp4 流地址（App Android 用）
	imageUrl: ''              // 设备图片（如果有）
})
const MOCK_TRACE_DETAILS = {
	normal: {
		product: {
			name: '',
			spec: '',			
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: '',
			intro: ''
		},
			batch: {
			status: '',
			statusText: '',
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			plantStartTime: '2026-03-01',
			harvestTime: '',
			packTime: '',
			emptyTitle: '暂无相关溯源码信息',
			emptyMessage: '未找到对应溯源码信息，请确认二维码是否正确。'
		},
		report: {
			status: '',
			statusBadge: { text: '', type: '' },
			// 每份报告独立 detectDate / no / images
			items: [
				{
					detectDate: '',
					no: '',
					images: ['']
				},
				{
					detectDate: '',
					no: '',
					images: ['']
				},
				{
					detectDate: '',
					no: '',
					images: ['']
				}
			]
		},
		certificate: {
			status: '',
			statusBadge: { text: '', type: '' },
			issueDate: '',
			no: '',
			fileUrl: '',
			images: ['']
		},
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: [
			{
				time: '2026-03-01',
				stage: 'planting',
				title: '开始种植',
				desc: '本批次产品进入种植管理阶段'
			},
			{
				time: '2026-03-12',
				stage: 'care',
				title: '生长期养护',
				desc: '种植期间已持续开展灌溉、施肥等日常养护'
			},
			{
				time: '2026-03-20',
				stage: 'inspection',
				title: '田间巡检',
				desc: '种植期间已持续开展长势检查与环境巡检'
			},
			{
				time: '2026-03-30',
				stage: 'harvest',
				title: '成熟采收',
				desc: '本批次产品进入成熟采收阶段'
			},
			{
				time: '2026-03-31',
				stage: 'test',
				title: '安全检测',
				desc: '已完成安全检测，相关结果可查'
			},
			{
				time: '2026-04-01',
				stage: 'pack',
				title: '包装日期：出库',
				desc: '已完成包装日期：整理，进入销售流通环节'
			}
		],
		camera: {
			liveUrl: '',
			coverImage: '',
			status: 'online',
			desc: '来自农场实景画面，种植环境真实呈现'
		},
	environment: {
		summary: '本批次种植期环境稳定，整体处于适宜生长区间',
		chart: {
			type: 'npk_trend',
			labels: ['03-01', '03-06', '03-10', '03-15', '03-21', '03-27', '04-01'],
			values: {
				n: [26.2, 25.8, 26.4, 25.9, 26.6, 26.1, 26.4],
				p: [20.5, 20.1, 20.4, 20.0, 20.3, 20.2, 20.4],
				k: [14.2, 14.6, 14.3, 14.7, 14.4, 14.8, 14.5]
			}
		},
		items: [
			{ label: '气温', value: '22.3℃', status: '种植期平均' },
			{ label: '湿度', value: '45%', status: '种植期平均' },
			{ label: '降雨量', value: '118mm', status: '种植期累计' },
			{ label: '光照', value: '充足', status: '表现稳定' }
		],
		current: {
			temperature: '24.5℃',
			humidity: '42.2%'
		}
	}
},
reportPending: {
		product: {
			name: '',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			status: '',
			statusText: '',
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			plantStartTime: '',
			harvestTime: '',
			packTime: '',
			emptyTitle: '暂无相关溯源码信息',
			emptyMessage: '未找到对应溯源码信息，请确认二维码是否正确。'
		},
		report: {
			status: '',
			statusBadge: { text: '', type: '' },
			emptyMessage: '',
			items: []
		},
		certificate: {
			status: '',
			statusBadge: { text: '', type: '' },
			issueDate: '',
			no: '',
			fileUrl: '',
			images: []
		},
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: []
	},
	certificatePending: {
		product: {
			name: '',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			status: '',
			statusText: '',
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			plantStartTime: '',
			harvestTime: '',
			packTime: '',
			emptyTitle: '暂无相关溯源码信息',
			emptyMessage: '未找到对应溯源码信息，请确认二维码是否正确。'
		},
		report: {
			status: '',
			statusBadge: { text: '', type: '' },
			items: [
				{
					detectDate: '',
					no: '',
					images: []
				}
			]
		},
		certificate: {
			status: '',
			statusBadge: { text: '', type: '' },
			emptyMessage: ''
		},
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: []
	},
	batchNotFound: {
		product: {
			name:'',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			status: '',
			statusText: '',
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			plantStartTime: '',
			harvestTime: '',
			packTime: '',
			emptyTitle: '暂无相关溯源码信息',
			emptyMessage: '未找到对应溯源码信息，请确认二维码是否正确。'
		},
		report: null,
		certificate: null,
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: []
	},
	batchOfflined: {
		product: {
			name: '',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			status: '',
			statusText: '',
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			plantStartTime: '',
			harvestTime: '',
			packTime: '',
			emptyTitle: '暂无相关溯源码信息',
			emptyMessage: '未找到对应溯源码信息，请确认二维码是否正确。'
		},
		report: null,
		certificate: null,
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		farmTimeline: []
	}
}
// 加载Jessibuca脚本
	const loadJessibucaScript = () => {
		// #ifdef H5
		const script = document.createElement('script')
		script.src = '/static/js/jessibuca/jessibuca.js'
		script.onload = () => {
			console.log('Jessibuca 脚本加载成功')
		}
		script.onerror = (error) => {
			console.error('Jessibuca 脚本加载失败:', error)
		}
		document.head.appendChild(script)
		// #endif
	}
// 获取H5环境使用的流地址（非 iOS H5 用 wss_flv）
	const getH5StreamUrl = computed(() => {
		// 确保使用安全的 WSS 协议
		let url = deviceInfo.wsFlvStreamUrl
		if (url && url.startsWith('ws://')) {
			console.warn('检测到不安全的 ws:// 协议，自动转换为 wss://')
			url = url.replace('ws://', 'wss://')
		}
		return url
	})

	// ===== iOS H5 专用流地址（直接用 HLS，不走 Jessibuca） =====
	const getIOSH5StreamUrl = computed(() => {
		// iOS H5 优先使用 HLS 地址
		const hlsUrl = deviceInfo.hlsStreamUrl
		console.log('========== [诊断] iOS H5 流地址 ==========')
		console.log('hlsStreamUrl:', hlsUrl)
		return hlsUrl || ''
	})

	// 当前 H5 实际使用的流地址（根据设备类型选择）
	const getCurrentH5StreamUrl = computed(() => {
		if (isH5IOS.value) {
			return getIOSH5StreamUrl.value
		} else {
			return getH5StreamUrl.value
		}
	})
function resolveStateKey(opts) {
	const raw = (opts?.state || opts?.batchState || opts?.scene || '').toString().trim()
	if (!raw) return 'normal'
	const allowed = ['normal', 'reportPending', 'certificatePending', 'batchNotFound', 'batchOfflined']
	return allowed.includes(raw) ? raw : 'normal'
}

onLoad((opts) => {
	// 拿到浏览器路径参数
	const fullPath = window.location.pathname
	const batchId = fullPath.split('/').filter(Boolean).pop()
	
	// 优先使用路由参数中的 id，其次使用 URL 路径中的 id
	const finalId = batchId || 1
	loadData(finalId)
	queryChannels()
	routeOptions.value = opts || {}
	mockStateKey.value = resolveStateKey(opts || {})
	startTimeUpdate()
	
	// #ifdef MP-WEIXIN
	setTimeout(() => {
		livePlayerContext.value = uni.createVideoContext('myVideo')
		console.log('微信小程序视频上下文已创建')
	}, 500)
	// #endif
	
	// #ifdef APP-PLUS || APP-HARMONY
	setTimeout(() => {
		appLivePlayerContext.value = uni.createVideoContext('appVideo')
		console.log('App视频上下文已创建')
	}, 500)
	// #endif
	
	// #ifdef H5
	loadJessibucaScript()
	setTimeout(() => {
		h5IosVideoContext.value = uni.createVideoContext('h5IosVideo')
		console.log('H5 iOS 视频上下文已创建')
	}, 500)
	// #endif
})
// 根据设备id获取通道列表
	const queryChannels = () => {
		console.log('========== [诊断] queryChannels 被调用 ==========')
		getChannels(deviceInfo.deviceId)
			.then(response => {
				console.log('获取通道列表:', response)
				const res = response.data
				if (res.code === 0 && res.data.total > 0) {
					const channels = res.data.list
					deviceInfo.channelId = channels[0].deviceId
					deviceInfo.status = channels[0].status
					console.log('通道信息:', { channelId: deviceInfo.channelId, status: deviceInfo.status })

					// ===== 诊断日志：调用 playStart 前 =====
					console.log('========== [诊断] 准备调用 playStart ==========')
					console.log('deviceId:', deviceInfo.deviceId)
					console.log('channelId:', deviceInfo.channelId)
					console.log('isH5IOS:', isH5IOS.value)
					console.log('isIPhoneH5:', isIPhoneH5.value)
					querySnap(deviceInfo.deviceId, deviceInfo.channelId).then(url => {
					  deviceInfo.imageUrl = url
					})
					playStart(deviceInfo.deviceId, deviceInfo.channelId).then(res => {
						if (res.data.code !== 0) {
							console.error('播放开始失败:', res.message)
							uni.showToast({
								title: '播放失败: ' + res.message,
								icon: 'none'
							})
							return
						}
						console.log('playStart 返回数据:', res.data.data)
						console.log('playStart 可用流地址:', Object.keys(res.data.data || {}))

						// ===== 诊断日志：playStart 成功，保存各格式流地址 =====
						console.log('========== [诊断] 保存各格式流地址 ==========')

						// #ifdef H5
						// H5 环境：分别保存 wss_flv 和 hls
						const rawWsFlv = res.data.data.wss_flv
						const rawHls = res.data.data.hls

						// 非 iOS H5：走 wss_flv + Jessibuca，保留 URL 替换逻辑
						if (!isH5IOS.value && rawWsFlv) {
							const urlObj = new URL(rawWsFlv)
							urlObj.hostname = 'nxy.gbdfarm.com'
							urlObj.port = '9000'
							deviceInfo.wsFlvStreamUrl = urlObj.toString()
							console.log('H5 非iOS - wsFlvStreamUrl:', deviceInfo.wsFlvStreamUrl)
						} else if (!isH5IOS.value) {
							console.warn('H5 非iOS - 未获取到 wss_flv')
						}

						// iOS H5：直接用 HLS，不做 URL 替换
						if (isH5IOS.value && rawHls) {
							deviceInfo.hlsStreamUrl = rawHls  // 直接使用原始 HLS 地址，不替换域名
							console.log('H5 iOS - hlsStreamUrl (不替换域名):', deviceInfo.hlsStreamUrl)
						} else if (isH5IOS.value) {
							console.warn('H5 iOS - 未获取到 hls，使用 wss_flv 兜底')
							// iOS 没有 HLS 时，尝试用 wss_flv（可能也会黑屏，但至少有尝试）
							deviceInfo.hlsStreamUrl = rawWsFlv || ''
						}

						// 兼容旧逻辑
						deviceInfo.originalStreamUrl = isH5IOS.value
							? deviceInfo.hlsStreamUrl
							: deviceInfo.wsFlvStreamUrl
						console.log('H5 - originalStreamUrl (兼容):', deviceInfo.originalStreamUrl)
						// #endif

						// #ifdef MP-WEIXIN
						deviceInfo.hlsStreamUrl = res.data.data.hls || deviceInfo.hlsStreamUrl
						deviceInfo.originalStreamUrl = deviceInfo.hlsStreamUrl
						console.log("queryChannels - 小程序 hlsStreamUrl:", deviceInfo.hlsStreamUrl)
						// #endif

						// #ifdef APP-PLUS || APP-HARMONY
						deviceInfo.fmp4StreamUrl = res.data.data.fmp4 || deviceInfo.fmp4StreamUrl
						deviceInfo.hlsStreamUrl = res.data.data.hls || deviceInfo.hlsStreamUrl
						deviceInfo.originalStreamUrl = deviceInfo.fmp4StreamUrl
						console.log("queryChannels - App fmp4StreamUrl:", deviceInfo.fmp4StreamUrl)
						console.log("queryChannels - App hlsStreamUrl:", deviceInfo.hlsStreamUrl)
						// #endif

						// ===== 最终诊断日志 =====
						console.log('========== [诊断] 流地址保存完成 ==========')
						console.log('wsFlvStreamUrl:', deviceInfo.wsFlvStreamUrl)
						console.log('hlsStreamUrl:', deviceInfo.hlsStreamUrl)
						console.log('fmp4StreamUrl:', deviceInfo.fmp4StreamUrl)
						console.log('originalStreamUrl (兼容):', deviceInfo.originalStreamUrl)
					}).catch(err => {
						console.error('播放开始失败:', err)
					})
				} else {
					uni.showToast({
						title: '获取通道列表失败: ' + res.data.message,
						icon: 'none'
					})
					return
				}
			})
			.catch(err => {
				console.error('获取通道列表错误:', err)
			})
	}
const loadData = async (batchId) => {
  // 重置首次加载标记，确保请求开始时不会误判为"已加载"
  traceLoaded.value = false
  loading.value = true

  try {
    // 调用接口
    const res = await getTraceDetail(batchId)
    traceInfo.value = res.data.data
    console.log('接口返回数据：', res)
  } catch (error) {
    console.error('加载失败', error)
    // 错误提示已在拦截器中自动处理
  } finally {
    // 无论成功失败都关闭 loading
    loading.value = false
    // 标记数据已完成首次加载
    traceLoaded.value = true
  }
}
// 视频播放错误处理
	const onVideoError = (e) => {
		console.error('========== [诊断] 视频播放错误 ==========')
		console.error('视频播放错误:', e)

		let errorMsg = '视频加载失败'

		// 微信小程序video组件错误码
		if (e && e.detail) {
			const errCode = e.detail.errCode
			console.error('微信错误码:', errCode)
			console.error('微信错误信息:', e.detail.errMsg)
			switch(errCode) {
				case 10001:
					errorMsg = '网络错误,请检查网络连接'
					break
				case 10002:
					errorMsg = '视频格式不支持'
					break
				case 10003:
					errorMsg = '视频解码失败'
					break
				case 10004:
					errorMsg = '视频地址无效'
					break
				default:
					errorMsg = `播放失败(错误码:${errCode})`
			}
		}

		// ===== 诊断日志：当前环境信息 =====
		// #ifdef H5
		console.log('========== [诊断] H5 错误上下文 ==========')
		console.log('isH5IOS:', isH5IOS.value)
		console.log('getH5StreamUrl (非iOS):', getH5StreamUrl.value)
		console.log('getIOSH5StreamUrl (iOS):', getIOSH5StreamUrl.value)
		// #endif

		uni.showToast({
			title: errorMsg,
			icon: 'none',
			duration: 3000
		})

		isPlaying.value = false

		// #ifdef H5
		// 只对非 iOS H5 做 Jessibuca 重试
		setTimeout(() => {
			if (isPlaying.value && !isH5IOS.value && jessibucaRef.value) {
				console.log('尝试重新加载视频流')
			} else if (isH5IOS.value) {
				console.log('【诊断】iOS H5 播放失败，hlsStreamUrl:', deviceInfo.hlsStreamUrl)
			}
		}, 3000)
		// #endif
	}

	// 更新时间
	const startTimeUpdate = () => {
		setInterval(() => {
			const now = new Date()
			const hours = String(now.getHours()).padStart(2, '0')
			const minutes = String(now.getMinutes()).padStart(2, '0')
			const seconds = String(now.getSeconds()).padStart(2, '0')
			currentTime.value = `${hours}:${minutes}:${seconds}`
		}, 1000)
	}
// 播放/暂停切换
	const togglePlayState = () => {
		console.log('========== [诊断] togglePlayState 被调用 ==========')
		console.log('当前 isPlaying:', isPlaying.value)
		console.log('isH5IOS:', isH5IOS.value)

		if (!isPlaying.value) {
			// 开始播放
			isPlaying.value = true

			// ===== 诊断日志：播放链路选择 =====
			// #ifdef H5
			if (isH5IOS.value) {
				console.log('========== [诊断] H5 iOS 播放链路 ==========')
				console.log('使用 iOS H5 专用流地址')
				console.log('getIOSH5StreamUrl:', getIOSH5StreamUrl.value)
			} else {
				console.log('========== [诊断] H5 非iOS 播放链路 ==========')
				console.log('使用 Jessibuca + wss_flv')
				console.log('getH5StreamUrl:', getH5StreamUrl.value)
			}
			// #endif

			// #ifdef MP-WEIXIN
			console.log('========== [诊断] 微信小程序播放链路 ==========')
			console.log('使用 video + hls')
			console.log('getAppStreamUrl:', getAppStreamUrl.value)
			setTimeout(() => {
				if (livePlayerContext.value) {
					livePlayerContext.value.play()
					console.log('微信小程序开始播放')
				}
			}, 300)
			// #endif

			// #ifdef APP-PLUS || APP-HARMONY
			console.log('========== [诊断] App 播放链路 ==========')
			console.log('使用 video + fmp4/hls')
			console.log('getAppStreamUrl:', getAppStreamUrl.value)
			setTimeout(() => {
				if (appLivePlayerContext.value) {
					appLivePlayerContext.value.play()
					console.log('App开始播放')
				}
			}, 300)
			// #endif

			// #ifdef H5
			// 【最小修复】不再重复调用 playStart，直接使用 queryChannels 中已保存的流地址
			console.log('【修复】togglePlayState 不再调用 playStart，使用已保存的流地址')
			console.log('H5 实际播放 URL:', getCurrentH5StreamUrl.value)

			// iOS H5 需要手动调用 video.play()
			if (isH5IOS.value) {
				setTimeout(() => {
					if (h5IosVideoContext.value) {
						h5IosVideoContext.value.play()
						console.log('H5 iOS video.play() 已调用')
					}
				}, 300)
			}

			uni.vibrateShort()
			// #endif
		} else {
			// #ifdef H5
			// iOS H5 的 video 暂停
			if (isH5IOS.value && h5IosVideoContext.value) {
				h5IosVideoContext.value.pause()
				console.log('H5 iOS video.pause() 已调用')
			}
			// 非 iOS H5 的 Jessibuca 暂停
			if (!isH5IOS.value && jessibucaRef.value) {
				jessibucaRef.value.pause()
			}
			// #endif

			// #ifdef MP-WEIXIN
			if (livePlayerContext.value) {
				livePlayerContext.value.pause()
			}
			// #endif

			// #ifdef APP-PLUS || APP-HARMONY
			if (appLivePlayerContext.value) {
				appLivePlayerContext.value.pause()
			}
			// #endif

			isPlaying.value = false

			uni.showToast({
				title: '视频已暂停',
				icon: 'none',
				duration: 1500
			})
		}
	}

	// 静音切换
	const toggleMute = () => {
		isMuted.value = !isMuted.value

		// #ifdef H5
		if (jessibucaRef.value) {
			if (isMuted.value) {
				jessibucaRef.value.mute()
			} else {
				jessibucaRef.value.cancelMute()
			}
		}
		// #endif

		// #ifndef H5
		// App端的静音通过 live-player 的 muted 属性控制，会自动响应
		uni.showToast({
			title: isMuted.value ? '已静音' : '已取消静音',
			icon: 'none'
		})
		// #endif
	}

	// 全屏切换
	const toggleFullscreen = () => {
		if (!isPlaying.value) {
			togglePlayState()
			setTimeout(() => {
				setFullscreen(true)
			}, 500)
		} else {
			setFullscreen(!isFullscreen.value)
		}
	}

	// 设置全屏状态
	const setFullscreen = (fullscreen) => {
		isFullscreen.value = fullscreen

		// #ifdef H5
		if (isFullscreen.value) {
			const ua = navigator.userAgent.toLowerCase()
			const isMobile = /mobile|android|iphone|ipad/.test(ua)

			if (isMobile && jessibucaRef.value) {
				jessibucaRef.value.fullscreenSwich()
			} else {
				setTimeout(() => {
					if (jessibucaRef.value) {
						jessibucaRef.value.resize()
					}
				}, 300)
			}

			if (window.screen && window.screen.orientation && window.screen.orientation.lock) {
				window.screen.orientation.lock('landscape').catch(err => {
					console.error('无法锁定屏幕方向:', err)
				})
			}
		} else {
			if (jessibucaRef.value) {
				if (jessibucaRef.value.isFullscreen()) {
					jessibucaRef.value.fullscreenSwich()
				}

				setTimeout(() => {
					if (jessibucaRef.value) {
						jessibucaRef.value.resize()
					}
				}, 300)
			}

			if (window.screen && window.screen.orientation && window.screen.orientation.unlock) {
				window.screen.orientation.unlock()
			}
		}
		// #endif

		// #ifdef MP-WEIXIN
		if (livePlayerContext.value) {
			if (isFullscreen.value) {
				livePlayerContext.value.requestFullScreen({
					direction: 90
				})
			} else {
				livePlayerContext.value.exitFullScreen()
			}
		}
		// #endif

		// #ifdef APP-PLUS || APP-HARMONY
		if (appLivePlayerContext.value) {
			if (isFullscreen.value) {
				appLivePlayerContext.value.requestFullScreen({
					direction: 90
				})
			} else {
				appLivePlayerContext.value.exitFullScreen()
			}
		}
		// #endif
	}

	// 截图
	const takeScreenshot = () => {
		// #ifdef H5
		if (jessibucaRef.value && isPlaying.value) {
			jessibucaRef.value.screenshot()
			uni.showToast({
				title: '截图已保存',
				icon: 'success'
			})
		} else {
			uni.showToast({
				title: '请先播放视频',
				icon: 'none'
			})
		}
		// #endif

		
		// if (livePlayerContext.value && isPlaying.value) {
		// 	livePlayerContext.value.snapshot({
		// 		success: (res) => {
		// 			console.log('截图成功:', res.tempImagePath)
		// 			uni.saveImageToPhotosAlbum({
		// 				filePath: res.tempImagePath,
		// 				success: () => {
		// 					uni.showToast({
		// 						title: '截图已保存到相册',
		// 						icon: 'success'
		// 					})
		// 				},
		// 				fail: (err) => {
		// 					console.error('保存截图失败:', err)
		// 					uni.showToast({
		// 						title: '保存截图失败',
		// 						icon: 'none'
		// 					})
		// 				}
		// 			})
		// 		},
		// 		fail: (err) => {
		// 			console.error('截图失败:', err)
		// 			uni.showToast({
		// 				title: '截图失败',
		// 				icon: 'none'
		// 			})
		// 		}
		// 	})
		// } else {
		// 	uni.showToast({
		// 		title: '请先播放视频',
		// 		icon: 'none'
		// 	})
		// }
		

		// #ifndef H5
		if (appLivePlayerContext.value && isPlaying.value) {
			appLivePlayerContext.value.snapshot({
				success: (res) => {
					console.log('App截图成功:', res.tempImagePath)
					uni.saveImageToPhotosAlbum({
						filePath: res.tempImagePath,
						success: () => {
							uni.showToast({
								title: '截图已保存到相册',
								icon: 'success'
							})
						},
						fail: (err) => {
							console.error('App保存截图失败:', err)
							uni.showToast({
								title: '保存截图失败',
								icon: 'none'
							})
						}
					})
				},
				fail: (err) => {
					console.error('App截图失败:', err)
					uni.showToast({
						title: '截图失败',
						icon: 'none'
					})
				}
			})
		} else {
			uni.showToast({
				title: '请先播放视频',
				icon: 'none'
			})
		}
		// #endif
	}

	// 小程序播放器状态变化处理
	const onVideoPlay = () => {
		console.log('视频开始播放')
		isPlaying.value = true
	}

	const onVideoPause = () => {
		console.log('视频暂停')
	}

	const onVideoEnded = () => {
		console.log('视频播放结束')
		isPlaying.value = false
	}

	const onTimeUpdate = (e) => {
		// 更新播放时间
		if (e && e.detail) {
			const currentSeconds = Math.floor(e.detail.currentTime)
			const hours = String(Math.floor(currentSeconds / 3600)).padStart(2, '0')
			const minutes = String(Math.floor((currentSeconds % 3600) / 60)).padStart(2, '0')
			const seconds = String(currentSeconds % 60).padStart(2, '0')
			currentTime.value = `${hours}:${minutes}:${seconds}`
		}
	}

	const onStateChange = (e) => {
		console.log('播放器状态变化:', e.detail)
		const state = e.detail.code
		switch (state) {
			case 2001:
				console.log('已连接服务器')
				break
			case 2002:
				console.log('开始拉流')
				break
			case 2003:
				console.log('网络接收到首个视频帧')
				break
			case 2004:
				console.log('视频播放开始')
				break
			case 2005:
				console.log('视频播放进度')
				break
			case 2006:
				console.log('视频播放结束')
				isPlaying.value = false
				break
			case 2007:
				console.log('视频播放Loading')
				break
			case 2008:
				console.log('解码器启动')
				break
			case 2009:
				console.log('视频分辨率改变')
				break
			case -2301:
				console.error('网络断连，且重新连接亦不能恢复，播放器已停止')
				isPlaying.value = false
				uni.showToast({
					title: '网络断连，请重试',
					icon: 'none'
				})
				break
			case -2302:
				console.error('获取加速拉流地址失败')
				break
			case 2101:
				console.error('当前视频帧解码失败')
				break
			case 2102:
				console.error('当前音频帧解码失败')
				break
			case 2103:
				console.warn('网络断连, 已启动自动重连')
				break
			case 2104:
				console.warn('网络断连, 重连中...')
				break
			case 2105:
				console.log('网络断连, 重连成功')
				break
			case 2106:
				console.error('网络断连, 重连失败')
				break
			case 2107:
				console.error('播放器连接超时')
				break
			case 2108:
				console.error('获取点播文件信息失败')
				break
			default:
				console.log('其他状态:', state)
		}
	}

	// 小程序全屏状态变化
	const onFullscreenChange = (e) => {
		isFullscreen.value = e.detail.fullScreen
		console.log('全屏状态变化:', isFullscreen.value)
	}
// 获取App（安卓/鸿蒙）环境使用的流地址
	const getAppStreamUrl = computed(() => {
		// ===== 诊断日志 =====
		console.log('========== [诊断] getAppStreamUrl ==========')
		console.log('fmp4StreamUrl:', deviceInfo.fmp4StreamUrl)
		console.log('hlsStreamUrl:', deviceInfo.hlsStreamUrl)

		// App iOS 优先使用 HLS
		// #ifdef APP-PLUS
		const platform = uni.getSystemInfoSync().platform
		console.log('App 平台:', platform)
		if (platform === 'ios') {
			if (deviceInfo.hlsStreamUrl) {
				console.log('App iOS 优先使用 hlsStreamUrl')
				return deviceInfo.hlsStreamUrl
			} else if (deviceInfo.fmp4StreamUrl) {
				console.log('App iOS 无 hls，使用 fmp4 兜底')
				return deviceInfo.fmp4StreamUrl
			}
		}
		// #endif

		// App Android / 鸿蒙：优先使用 fmp4
		if (deviceInfo.fmp4StreamUrl) {
			console.log('App 使用 fmp4StreamUrl')
			return deviceInfo.fmp4StreamUrl
		}

		// 如果没有流地址,返回空字符串
		console.warn('未获取到视频流地址')
		return ''
	})
	// ===== 批次状态判断 =====
	// 爱智农后台状态：1=待发布, 2=已发布, 3=已下线
	const BATCH_STATUS_PENDING = '1'
	const BATCH_STATUS_PUBLISHED = '2'
	const BATCH_STATUS_OFFLINED = '3'

	// 获取当前批次状态值
	const batchStatus = computed(() => {
		const data = traceInfo.value
		if (!data) return ''
		const s = String(data.status)
		if ([BATCH_STATUS_PENDING, BATCH_STATUS_PUBLISHED, BATCH_STATUS_OFFLINED].includes(s)) {
			return s
		}
		return ''
	})

	// 是否可展示完整溯源内容（仅已发布状态）
	const canShowTraceContent = computed(() => batchStatus.value === BATCH_STATUS_PUBLISHED)

	// 各状态布尔值
	const isBatchPending = computed(() => batchStatus.value === BATCH_STATUS_PENDING)
	const isBatchPublished = computed(() => batchStatus.value === BATCH_STATUS_PUBLISHED)
	const isBatchOfflined = computed(() => batchStatus.value === BATCH_STATUS_OFFLINED)
	const isBatchUnavailable = computed(() => !canShowTraceContent.value)

	// 各状态文案映射
	const batchStatusTextMap = {
		[BATCH_STATUS_PENDING]: '待发布',
		[BATCH_STATUS_PUBLISHED]: '已发布',
		[BATCH_STATUS_OFFLINED]: '已下线'
	}

	// 各状态 badge 映射
	const batchStatusBadgeMap = {
		[BATCH_STATUS_PENDING]: { text: '待发布', type: 'wait' },
		[BATCH_STATUS_PUBLISHED]: { text: '检验合格', type: 'ok' },
		[BATCH_STATUS_OFFLINED]: { text: '已下线', type: 'muted' },
		_invalid: { text: '未找到', type: 'muted' }
	}

	// 各状态异常态文案
	const batchEmptyMessageMap = {
		[BATCH_STATUS_PENDING]: '当前批次暂未开放查询，相关溯源内容暂不对外展示。',
		[BATCH_STATUS_OFFLINED]: '当前批次已下线，相关溯源内容暂不对外展示。',
		_invalid: '未找到对应溯源码信息，请确认二维码是否正确。'
	}

	// 获取当前状态对应的 badge
	const getCurrentStatusBadge = () => {
		const s = batchStatus.value
		if (!s) return batchStatusBadgeMap._invalid
		return batchStatusBadgeMap[s] || batchStatusBadgeMap._invalid
	}

	// 获取当前状态对应的异常态文案
	const getCurrentEmptyMessage = () => {
		const s = batchStatus.value
		if (!s) return batchEmptyMessageMap._invalid
		return batchEmptyMessageMap[s] || batchEmptyMessageMap._invalid
	}

const traceDetail = computed(() => {
	// 如果没有真实数据，返回 mock 数据
	if (!traceInfo.value) {
		return MOCK_TRACE_DETAILS[mockStateKey.value] || MOCK_TRACE_DETAILS.normal
	}

	const data = traceInfo.value
	
	// 解析 certFiles 和 reportFiles（JSON 字符串转数组）
	let certFiles = []
	let reportFiles = []
	
	// 查找 farmTimeline 中 stage === 'planting' 的节点，用于兜底种植时间
	const plantingNode = Array.isArray(data.farmTimeline)
		? data.farmTimeline.find(item => item.stage === 'planting')
		: null
	
	try {
		if (data.certificate?.certFiles) {
			certFiles = JSON.parse(data.certificate.certFiles)
		}
	} catch (e) {
		console.error('解析 certFiles 失败', e)
	}
	
	// 构建返回数据结构
	return {
		product: {
			name: data.productName || '',
			spec: data.productSpec || '',
			image: data.productImage || '',
			intro: data.productDesc || ''
		},
		farm: {
			name: data.farmName || '',
			location: data.farmRegion || '',
			image: data.farmImage || '',
			intro: data.farmIntro || ''
		},
		batch: {
			status: batchStatus.value,
			statusText: batchStatusTextMap[batchStatus.value] || '未找到',
			exists: canShowTraceContent.value,
			statusBadge: getCurrentStatusBadge(),
			no: data.batchNo || '',
			plantStartTime: '2026-03-01',
			harvestTime: data.produceDate || '',
			packTime: data.packageDate || '',
			emptyTitle: '暂无相关溯源码信息',
			emptyMessage: getCurrentEmptyMessage()
		},
		report: {
			status: data.reports && data.reports.length > 0 ? 'uploaded' : 'pending',
			statusBadge: data.reports && data.reports.length > 0 
				? { text: '已上传', type: 'ok' }
				: { text: '待补充', type: 'wait' },
			emptyMessage: '检测报告待补充，上传完成后可查看大图。',
			items: (data.reports || []).map(report => {
				let images = []
				
				// 处理 reportFiles：可能是字符串 URL、JSON 字符串数组、或已解析的数组
				if (report.reportFiles) {
					if (typeof report.reportFiles === 'string') {
						// 尝试解析 JSON 字符串
						try {
							const parsed = JSON.parse(report.reportFiles)
							// 如果解析成功且是数组，提取 url 字段
							if (Array.isArray(parsed)) {
								images = parsed.map(item => 
									typeof item === 'string' ? item : (item.url || item)
								).filter(Boolean)
							} else {
								// 解析后不是数组，可能是单个对象
								images = [parsed.url || parsed].filter(Boolean)
							}
						} catch (e) {
							// 解析失败，当作普通 URL 字符串处理
							images = [report.reportFiles]
						}
					} else if (Array.isArray(report.reportFiles)) {
						// 已经是数组，提取 url 字段
						images = report.reportFiles.map(item => 
							typeof item === 'string' ? item : (item.url || item)
						).filter(Boolean)
					} else if (typeof report.reportFiles === 'object') {
						// 单个对象
						images = [report.reportFiles.url || report.reportFiles].filter(Boolean)
					}
				}
				
				return {
					detectDate: report.reportDate || '',
					no: report.reportNo || '',
					images: images
				}
			})
		},
		certificate: {
			status: data.certificate && certFiles.length > 0 ? 'uploaded' : 'pending',
			statusBadge: data.certificate && certFiles.length > 0
				? { text: '已上传', type: 'ok' }
				: { text: '待补充', type: 'wait' },
			issueDate: data.certificate?.certIssueDate || '',
			no: data.certificate?.certNo || '',
			fileUrl: certFiles.length > 0 ? certFiles[0].url : '',
			images: certFiles.map(f => f.url),
			emptyMessage: '合格证待补充，上传完成后可查看大图。'
		},
		traceConclusionCard: {
			title: '溯源结论',
			conclusion: '本批次产品来源清晰，已完成安全检测，过程可查',
			desc: '检测材料与溯源数据已展示，可继续查看',
			passed: true
		},
		// 时间轴逻辑：演示态使用 mock + 真实态使用真实数据
		farmTimeline: (() => {
			// 判断是否有真实时间轴数据
			const hasRealTimeline = Array.isArray(data.farmTimeline) && data.farmTimeline.length > 0

			let timeline = []

			if (!hasRealTimeline) {
				// 演示态：使用完整 mock 时间轴（用于页面展示验证）
				timeline = [
					{ time: '2026-03-01', stage: 'planting', title: '开始种植', desc: '本批次产品进入种植管理阶段' },
					{ time: '2026-03-12', stage: 'care', title: '生长期养护', desc: '种植期间已持续开展灌溉、施肥等日常养护' },
					{ time: '2026-03-20', stage: 'inspection', title: '田间巡检', desc: '种植期间已持续开展长势检查与环境巡检' },
					{ time: data.produceDate || '', stage: 'harvest', title: '成熟采收', desc: '本批次产品进入成熟采收阶段' },
					{ time: (data.reports?.[0]?.reportDate) || '', stage: 'test', title: '安全检测', desc: '已完成安全检测，相关结果可查' },
					{ time: data.packageDate || '', stage: 'pack', title: '包装日期：出库', desc: '已完成包装日期：整理，进入销售流通环节' }
				]
			} else {
				// 真实态：使用真实数据 + 补充系统节点
				timeline = [...data.farmTimeline]
				const stageSet = new Set(timeline.map(n => n.stage))

				// 成熟采收
				if (data.produceDate && !stageSet.has('harvest')) {
					timeline.push({
						time: data.produceDate,
						stage: 'harvest',
						title: '成熟采收',
						desc: '本批次产品进入成熟采收阶段'
					})
				}

				// 安全检测
				if (data.reports && data.reports.length > 0 && !stageSet.has('test')) {
					const validDates = data.reports
						.map(r => r.reportDate)
						.filter(d => d && /^\d{4}-\d{2}-\d{2}/.test(d))
						.sort()
					if (validDates.length > 0) {
						timeline.push({
							time: validDates[0],
							stage: 'test',
							title: '安全检测',
							desc: '已完成安全检测，相关结果可查'
						})
					}
				}

				// 包装日期：出库
				if (data.packageDate && !stageSet.has('pack')) {
					timeline.push({
						time: data.packageDate,
						stage: 'pack',
						title: '包装日期：出库',
						desc: '已完成包装日期：整理，进入销售流通环节'
					})
				}
			}

			// stage 顺序权重
			const stageOrder = {
				planting: 1,
				care: 2,
				inspection: 3,
				harvest: 4,
				test: 5,
				pack: 6
			}

			// 按业务阶段排序，同 stage 内再按时间
			timeline.sort((a, b) => {
				const orderA = stageOrder[a.stage] || 99
				const orderB = stageOrder[b.stage] || 99

				// 先按 stage 排序
				if (orderA !== orderB) {
					return orderA - orderB
				}

				// 同 stage 再按时间
				if (!a.time) return -1
				if (!b.time) return 1

				return a.time > b.time ? 1 : -1
			})

			return timeline.slice(0, 6)
		})(),
		camera: {
			liveUrl: data.camera?.liveUrl || '',
			coverImage: data.camera?.coverImage || '',
			status: data.camera?.status || 'online',
			desc: data.camera?.liveUrl
				? '当前为种植现场实时画面，现场环境与种植状态可见'
				: '来自农场实景画面，种植环境真实呈现'
		},
		environment: {
			summary: '本批次种植期环境稳定，整体处于适宜生长区间',
			chart: {
				type: 'npk_trend',
				labels: ['03-01', '03-06', '03-10', '03-15', '03-21', '03-27', '04-01'],
				values: {
					n: [26.2, 25.8, 26.4, 25.9, 26.6, 26.1, 26.4],
					p: [20.5, 20.1, 20.4, 20.0, 20.3, 20.2, 20.4],
					k: [14.2, 14.6, 14.3, 14.7, 14.4, 14.8, 14.5]
				}
			},
			items: [
				{ label: '气温', value: '22.3℃', status: '种植期平均' },
				{ label: '湿度', value: '45%', status: '种植期平均' },
				{ label: '降雨量', value: '118mm', status: '种植期累计' },
				{ label: '光照', value: '充足', status: '表现稳定' }
			],
			current: {
				temperature: '24.5℃',
				humidity: '42.2%'
			}
		}
	}
})

// 种植现场状态：三态逻辑
const cameraStatus = computed(() => {
	const camera = deviceInfo?.status
	if (!camera) return 'off'

	// const hasLiveUrl = !!camera.liveUrl

	// 有 liveUrl 但无封面图 → loading（信号接入中）
	// 有 liveUrl 且有封面图 → online（可播放）
	// 无 liveUrl → offline
	if (camera && camera == 'off') {
		return 'loading'
	}
	if (camera && camera == 'ON') {
		return 'online'
	}
	return 'offline'
})

const cameraStatusText = computed(() => {
	const map = {
		loading: '连接中',
		online: '实时在线',
		offline: '暂未连接'
	}
	return map[cameraStatus.value] || '暂未连接'
})

// 种植环境记录图表配置
const CHART_SVG_WIDTH = 700
const CHART_SVG_HEIGHT = 200
const CHART_PADDING = 24 // SVG 内边距

// 动态计算数据范围（从真实数据中获取，并留上下边距）
const chartValueRange = computed(() => {
	const chart = traceDetail.value?.environment?.chart
	if (!chart?.values) {
		return { min: 0, max: 1 }
	}

	const allValues = [
		...(chart.values.n || []),
		...(chart.values.p || []),
		...(chart.values.k || [])
	].filter(v => typeof v === 'number' && !Number.isNaN(v))

	if (!allValues.length) {
		return { min: 0, max: 1 }
	}

	const min = Math.min(...allValues)
	const max = Math.max(...allValues)

	// 增加上下留白，避免点贴边
	const padding = (max - min) * 0.18 || 1

	return {
		min: min - padding,
		max: max + padding
	}
})

// 计算单个数据点在 SVG 坐标中的 y 值（使用动态范围）
const getSvgY = (value) => {
	const { min, max } = chartValueRange.value
	const range = max - min
	if (range === 0) return CHART_SVG_HEIGHT / 2
	const normalized = (value - min) / range
	const innerHeight = CHART_SVG_HEIGHT - CHART_PADDING * 2
	const y = CHART_PADDING + innerHeight * (1 - normalized)
	return y
}

// 计算单个数据点在 SVG 坐标中的 x 值
const getSvgX = (idx, dataLength) => {
	if (dataLength <= 1) return CHART_SVG_WIDTH / 2
	const innerWidth = CHART_SVG_WIDTH - CHART_PADDING * 2
	return CHART_PADDING + (idx / (dataLength - 1)) * innerWidth
}

// 获取某组数据的所有点位（过滤无效数据）
const getSvgPoints = (data) => {
	if (!Array.isArray(data) || data.length === 0) return []
	return data
		.filter(v => typeof v === 'number' && !Number.isNaN(v))
		.map((val, idx, arr) => ({
			x: getSvgX(idx, arr.length),
			y: getSvgY(val),
			value: val
		}))
}

// Catmull-Rom 转 Bezier 生成平滑曲线路径
const buildSmoothPath = (points) => {
	if (points.length < 2) return ''
	if (points.length === 2) {
		return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`
	}

	// 起点
	let d = `M ${points[0].x} ${points[0].y}`

	// 中间点使用 Catmull-Rom 转 Bezier
	for (let i = 0; i < points.length - 1; i++) {
		const p0 = points[Math.max(0, i - 1)]
		const p1 = points[i]
		const p2 = points[i + 1]
		const p3 = points[Math.min(points.length - 1, i + 2)]

		// 控制点计算（张力系数 0.5）
		const cp1x = p1.x + (p2.x - p0.x) / 6
		const cp1y = p1.y + (p2.y - p0.y) / 6
		const cp2x = p2.x - (p3.x - p1.x) / 6
		const cp2y = p2.y - (p3.y - p1.y) / 6

		d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`
	}

	return d
}

// SVG 网格线 y 坐标
const svgGridLines = [24, 56, 88, 120, 152, 176]

// 平滑曲线配置
const CURVE_TENSION = 0.35 // 张力系数，越小越平滑

// 统一的图表计算 computed（确保所有依赖正确响应式）
const chartData = computed(() => {
	const chart = traceDetail.value?.environment?.chart
	if (!chart || !chart.values) {
		return { n: [], p: [], k: [], paths: { n: '', p: '', k: '' }, areas: { n: '', p: '', k: '' } }
	}

	const valuesN = chart.values.n || []
	const valuesP = chart.values.p || []
	const valuesK = chart.values.k || []

	// 收集所有有效数值，计算全局范围
	const allValues = [...valuesN, ...valuesP, ...valuesK]
		.filter(v => typeof v === 'number' && !Number.isNaN(v))

	if (!allValues.length) {
		return { n: [], p: [], k: [], paths: { n: '', p: '', k: '' }, areas: { n: '', p: '', k: '' } }
	}

	const dataMin = Math.min(...allValues)
	const dataMax = Math.max(...allValues)
	const padding = (dataMax - dataMin) * 0.25 || 1 // 增加边距空间
	const minVal = dataMin - padding
	const maxVal = dataMax + padding
	const range = maxVal - minVal || 1

	// 计算坐标的辅助函数
	const calcY = (val) => {
		const normalized = (val - minVal) / range
		const innerHeight = CHART_SVG_HEIGHT - CHART_PADDING * 2
		return CHART_PADDING + innerHeight * (1 - normalized)
	}

	const calcX = (idx, length) => {
		if (length <= 1) return CHART_SVG_WIDTH / 2
		const innerWidth = CHART_SVG_WIDTH - CHART_PADDING * 2
		return CHART_PADDING + (idx / (length - 1)) * innerWidth
	}

	// 异常点平滑处理（简单移动平均）
	const smoothValues = (data) => {
		if (data.length < 3) return data
		return data.map((v, i, arr) => {
			if (i === 0 || i === arr.length - 1) return v
			const prev = arr[i - 1]
			const next = arr[i + 1]
			// 如果与前后差值过大，做轻微平滑
			if (Math.abs(v - prev) > range * 0.3 && Math.abs(v - next) > range * 0.3) {
				return (prev + v + next) / 3
			}
			return v
		})
	}

	// 计算点坐标（带平滑）
	const calcPoints = (data) => {
		if (!data.length) return []
		const smoothed = smoothValues(data.filter(v => typeof v === 'number' && !Number.isNaN(v)))
		return smoothed.map((val, idx, arr) => ({
			x: calcX(idx, arr.length),
			y: calcY(val),
			value: val
		}))
	}

	// 生成平滑曲线路径（使用优化的张力系数）
	const buildPath = (points) => {
		if (points.length < 2) return ''
		if (points.length === 2) {
			return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`
		}
		let d = `M ${points[0].x} ${points[0].y}`
		for (let i = 0; i < points.length - 1; i++) {
			const p0 = points[Math.max(0, i - 1)]
			const p1 = points[i]
			const p2 = points[i + 1]
			const p3 = points[Math.min(points.length - 1, i + 2)]
			// 使用可配置的张力系数
			const cp1x = p1.x + (p2.x - p0.x) * CURVE_TENSION
			const cp1y = p1.y + (p2.y - p0.y) * CURVE_TENSION
			const cp2x = p2.x - (p3.x - p1.x) * CURVE_TENSION
			const cp2y = p2.y - (p3.y - p1.y) * CURVE_TENSION
			d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`
		}
		return d
	}

	// 生成面积渐变路径（曲线下方填充）
	const buildArea = (points) => {
		if (points.length < 2) return ''
		const linePath = buildPath(points)
		const bottomY = CHART_SVG_HEIGHT - CHART_PADDING
		const firstX = points[0].x
		const lastX = points[points.length - 1].x
		return `${linePath} L ${lastX} ${bottomY} L ${firstX} ${bottomY} Z`
	}

	const nPoints = calcPoints(valuesN)
	const pPoints = calcPoints(valuesP)
	const kPoints = calcPoints(valuesK)

	return {
		n: nPoints,
		p: pPoints,
		k: kPoints,
		paths: {
			n: buildPath(nPoints),
			p: buildPath(pPoints),
			k: buildPath(kPoints)
		},
		areas: {
			n: buildArea(nPoints),
			p: buildArea(pPoints),
			k: buildArea(kPoints)
		}
	}
})

// 兼容旧接口
const chartPoints = computed(() => ({
	n: chartData.value.n,
	p: chartData.value.p,
	k: chartData.value.k
}))

const chartPaths = computed(() => chartData.value.paths)

const chartAreas = computed(() => chartData.value.areas)

const reportImages = computed(() => {
	const items = traceDetail.value?.report?.items
	if (Array.isArray(items)) {
		return items.flatMap(item => Array.isArray(item.images) ? item.images : [])
	}
	return []
})

const reportItems = computed(() => {
	return traceDetail.value?.report?.items || []
})

// 计算某份报告内某张图在全局 reportImages 扁平数组中的索引
function getReportGlobalIndex(itemIndex, imgIndex) {
	const items = reportItems.value
	let offset = 0
	for (let i = 0; i < itemIndex; i++) {
		const imgArr = items[i]?.images
		offset += Array.isArray(imgArr) ? imgArr.length : 0
	}
	return offset + imgIndex
}

const certificateImages = computed(() => {
	const c = traceDetail.value?.certificate
	if (!c) return []
	if (Array.isArray(c.images) && c.images.length) return c.images
	return c.fileUrl ? [c.fileUrl] : []
})


function contactCustomer() {
	uni.makePhoneCall({
		phoneNumber: '13379508760'
	})
}

function goBackToPurchase() {
	uni.showModal({
		title: '返回购买渠道',
		content: 'mock 模式：后续可跳转到直播间/小店页面。',
		showCancel: true,
		confirmText: '确认返回'
	})
}


function previewDoc(kind, index) {
	const urls = kind === 'report' ? reportImages.value : certificateImages.value
	if (!urls.length) {
		uni.showToast({ title: '该文件暂未上传', icon: 'none' })
		return
	}
	uni.previewImage({
		urls,
		current: urls[index] || urls[0]
	})
}
</script>

<style scoped>
.page {
	position: relative;
	min-height: 100vh;
	--bg-cream-1: #f8f2e8;
	--bg-cream-2: #f3ebdd;
	--bg-cream-3: #ece1ce;
	--forest-900: #143a2b;
	--forest-800: #1f513b;
	--forest-700: #2d6849;
	--sage-500: #708f7d;
	--gold-320: #ccb086;
	--gold-260: #dcc4a0;
	--text-900: #233126;
	--text-700: #3c4d41;
	--text-500: #6b776d;
	background: linear-gradient(172deg,
		#FAF6EF 0%,
		#F4EEE3 38%,
		#EDF0EC 68%,
		#E8EFE9 100%
	);
	overflow: hidden;
}

/* 背景氛围层：三层光感（前景/中景/背景）+ grain */
.pageDecor {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.pageGlow {
	position: absolute;
	border-radius: 50%;
	filter: blur(14rpx);
}

/* 背景层：左上森林绿微光 */
.glowA {
	width: 780rpx;
	height: 780rpx;
	top: -280rpx;
	left: -300rpx;
	background: radial-gradient(circle, rgba(26, 84, 58, 0.18) 0%, rgba(20, 72, 50, 0) 70%);
	opacity: 0.85;
}

/* 中景层：右下金色暖光 */
.glowB {
	width: 720rpx;
	height: 720rpx;
	right: -280rpx;
	top: 480rpx;
	background: radial-gradient(circle, rgba(200, 170, 120, 0.2) 0%, rgba(200, 170, 120, 0) 72%);
	opacity: 0.9;
}

/* 前景层：顶部柔和高光，塑造空间感 */
.glowC {
	width: 600rpx;
	height: 360rpx;
	top: -60rpx;
	left: 50%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at 50% 0%, rgba(255, 252, 246, 0.38), transparent 70%);
	filter: blur(20rpx);
	opacity: 0.7;
}

/* 纹理叠加层 */
.pageGrain {
	position: absolute;
	inset: 0;
	opacity: 0.55;
	background:
		radial-gradient(900rpx 380rpx at 48% -4%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
		radial-gradient(640rpx 400rpx at 104% 48%, rgba(68, 112, 86, 0.09), rgba(68, 112, 86, 0)),
		radial-gradient(700rpx 320rpx at -4% 76%, rgba(210, 180, 130, 0.12), rgba(210, 180, 130, 0)),
		linear-gradient(180deg, rgba(248, 244, 236, 0.16) 0%, rgba(228, 242, 232, 0.08) 100%);
}

.safeTop {
	height: calc(env(safe-area-inset-top));
	position: relative;
	z-index: 1;
}

/* 轻品牌页头：透明底，不叠在 Hero 上产生「白雾」；层级低于首屏卡 */
.brandPageHeader {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 72rpx;
	padding: 0 40rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid rgba(39, 75, 57, 0.05);
	background: transparent;
}

.brandPageHeaderInner {
	display: flex;
	align-items: center;
	gap: 10rpx;
	width: 100%;
}

.brandPageHeaderName {
	font-size: 22rpx;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.1em;
	color: rgba(27, 41, 33, 0.65);
}

.brandPageHeaderDot {
	flex-shrink: 0;
	width: 4rpx;
	height: 4rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.4);
}

.brandPageHeaderLabel {
	font-size: 20rpx;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.06em;
	color: rgba(112, 143, 125, 0.7);
}

.hero,
.content {
	position: relative;
	z-index: 1;
}

.hero {
	padding: 0 24rpx;
}

/* 完整首屏大卡：与品牌页头分离，避免负 margin 上提后被页头遮盖 */
.heroCard {
	border-radius: 42rpx;
	overflow: hidden;
	margin-top: 20rpx;
	position: relative;
	z-index: 4;
	box-shadow:
		0 48rpx 120rpx rgba(10, 36, 24, 0.2),
		0 16rpx 48rpx rgba(10, 36, 24, 0.1),
		0 2rpx 0 rgba(255, 255, 255, 0.6) inset;
	backdrop-filter: blur(4px);
}

/* Hero 视觉区：多层次光感空间，顶部高光 + 景深 + 底部暗化 */
.heroBg {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(20, 74, 52, 0.72), rgba(205, 177, 129, 0.3) 70%, rgba(243, 232, 214, 0.36));
}

/* 前景层光晕：右下淡金色微光（提升质感） */
.heroBg::before {
	content: '';
	position: absolute;
	right: -100rpx;
	bottom: -72rpx;
	width: 520rpx;
	height: 280rpx;
	border-radius: 50%;
	background: radial-gradient(ellipse at 42% 38%, rgba(252, 244, 228, 0.18), transparent 68%);
	pointer-events: none;
	z-index: 2;
}

.heroImage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
}

.heroBrandAnchor {
	position: absolute;
	right: -48rpx;
	bottom: -14rpx;
	z-index: 2;
	pointer-events: none;
}

.heroBrandAnchorText {
	font-size: 164rpx;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	color: rgba(248, 241, 227, 0.045);
	transform: rotate(-8deg);
}

/* Hero 遮罩层：提亮后仍保留轻微底部过渡，避免压住真实商品图 */
.heroMask {
	position: absolute;
	inset: 0;
	z-index: 3;
	background:
		radial-gradient(ellipse 180% 60% at 50% 0%, rgba(255, 252, 248, 0.26), transparent 68%),
		radial-gradient(480rpx 240rpx at 90% 8%, rgba(252, 248, 240, 0.2), transparent 62%),
		radial-gradient(700rpx 360rpx at 8% 65%, rgba(6, 24, 16, 0.12), transparent 58%),
		radial-gradient(560rpx 300rpx at 88% 80%, rgba(205, 177, 129, 0.06), transparent 62%),
		linear-gradient(180deg,
			rgba(8, 28, 18, 0) 0%,
			rgba(8, 28, 18, 0) 62%,
			rgba(10, 36, 24, 0.05) 80%,
			rgba(8, 26, 18, 0.1) 92%,
			rgba(248, 244, 238, 0.12) 100%
		);
}

/* 商品信息面板：玻璃浮层效果，负margin上浮 + backdrop-filter */
.heroInfoPanel {
	background: rgba(252, 248, 242, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	position: relative;
}

/* 与 Hero 底部自然过渡 */
.heroInfoPanel::before {
	content: '';
	position: absolute;
	top: -56rpx;
	left: 0;
	right: 0;
	height: 56rpx;
	background: linear-gradient(180deg,
		rgba(252, 248, 242, 0) 0%,
		rgba(252, 248, 242, 0.88) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.infoPanelInner {
	position: relative;
	z-index: 2;
	padding: 32rpx 30rpx 30rpx;
}

/* 与下方农场/批次等卡片共用 .sectionHeader / .sectionHeaderLeft 样式 */

.infoPanelBody {
	padding-top: 0;
}

.infoPanelName {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(27, 41, 33, 0.92);
}

.infoPanelSpec {
	display: inline-flex;
	align-items: center;
	gap: 10rpx;
	margin-top: 14rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	background: rgba(39, 113, 76, 0.06);
	border: 1rpx solid rgba(39, 113, 76, 0.08);
}

.specDot {
	width: 6rpx;
	height: 6rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.5);
}

.specText {
	font-size: 20rpx;
	font-weight: 400;
	color: rgba(54, 66, 57, 0.85);
}

.infoPanelIntro {
	margin-top: 16rpx;
	padding-top: 16rpx;
	border-top: 1rpx solid rgba(39, 75, 57, 0.06);
	font-size: 23rpx;
	line-height: 1.8;
	color: rgba(54, 66, 57, 0.75);
}

.content {
	padding: 20rpx 0 40rpx;
}

/* 加载中状态：轻量提示，不闪异常态 */
.loadingState {
	margin: 40rpx 24rpx;
	padding: 60rpx 32rpx;
	border-radius: 36rpx;
	background: rgba(252, 250, 244, 0.76);
	display: flex;
	justify-content: center;
	align-items: center;
}

.loadingText {
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(84, 106, 93, 0.65);
	letter-spacing: 0.02em;
}

/* 异常态空状态卡：与页面整体风格一致的轻量提示 */
.abnormalStateCard {
	margin: 40rpx 24rpx;
	padding: 40rpx 32rpx;
	border-radius: 36rpx;
	background: rgba(252, 250, 244, 0.76);
	box-shadow:
		0 16rpx 40rpx rgba(38, 41, 32, 0.07),
		0 1rpx 0 rgba(255, 255, 255, 0.5) inset;
}

.abnormalStateCard .sectionHeader {
	margin-bottom: 20rpx;
}

.abnormalStateCard .emptyText {
	font-size: 24rpx;
	line-height: 1.8;
	color: rgba(54, 66, 57, 0.7);
	margin-top: 16rpx;
}

/* 基础卡片：半透明玻璃质感 */
.card {
	margin: 0 24rpx 22rpx;
	padding: 30rpx 28rpx;
	border-radius: 36rpx;
	background: rgba(252, 250, 244, 0.76);
	box-shadow:
		0 16rpx 40rpx rgba(38, 41, 32, 0.07),
		0 1rpx 0 rgba(255, 255, 255, 0.5) inset;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.card.soft {
	background: rgba(252, 248, 244, 0.6);
}

/* Hero 之后第一张卡：适度上浮 */
.cardHeroFirst {
	margin-top: -28rpx;
	position: relative;
	z-index: 3;
}

/* 层级 0：与 Hero 同级，主卡（商品面板） */
.cardLevel0 {
	box-shadow:
		0 48rpx 120rpx rgba(10, 36, 24, 0.16),
		0 16rpx 48rpx rgba(10, 36, 24, 0.08),
		0 1rpx 0 rgba(255, 255, 255, 0.6) inset;
}

/* 层级 1：次要信息卡，阴影中等 */
.cardLevel1 {
	box-shadow:
		0 20rpx 50rpx rgba(30, 34, 24, 0.09),
		0 8rpx 24rpx rgba(30, 34, 24, 0.05),
		0 1rpx 0 rgba(255, 255, 255, 0.55) inset;
}

/* 层级 2：次次要信息卡，阴影更轻 */
.cardLevel2 {
	box-shadow:
		0 14rpx 36rpx rgba(36, 38, 28, 0.065),
		0 1rpx 0 rgba(255, 255, 255, 0.5) inset;
}

/* 层级 3：底部辅助信息卡，最轻 */
.cardLevel3 {
	box-shadow:
		0 8rpx 22rpx rgba(42, 44, 30, 0.04),
		0 1rpx 0 rgba(255, 255, 255, 0.44) inset;
}

.cardFarm {
	background: rgba(250, 248, 242, 0.82);
}

.cardCredential {
	background: rgba(252, 248, 240, 0.84);
}

.cardBatchState {
	background: rgba(252, 248, 244, 0.74);
}

/* 检测结论卡：融合溯源信息，与农场卡视觉统一 */
.cardConclusion {
	background: rgba(250, 248, 242, 0.82);
	padding-top: 20rpx;
}

/* 溯源信息卡主体：三层竖向结构 */
.conclusionIdentity {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

/* 第一层：批次号主信息区 */
.conclusionBatchWrap {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.conclusionBatchLabel {
	display: block;
	font-size: 20rpx;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(84, 106, 93, 0.6);
	letter-spacing: 0.02em;
}

.conclusionBatchNo {
	display: block;
	font-size: 26rpx;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(27, 41, 33, 0.78);
	letter-spacing: 0.02em;
}

/* 第二层：时间摘要区，一行式表达 */
.conclusionSummary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6rpx 0;
}

.summaryLabel {
	font-size: 20rpx;
	font-weight: 500;
	color: rgba(84, 106, 93, 0.6);
	letter-spacing: 0.01em;
	margin-right: 6rpx;
}

.summaryText {
	font-size: 21rpx;
	font-weight: 400;
	color: rgba(27, 41, 33, 0.78);
	letter-spacing: 0.01em;
}

.summaryDivider {
	font-size: 20rpx;
	font-weight: 400;
	color: rgba(84, 106, 93, 0.4);
	margin: 0 16rpx;
}

/* 第三层：结论标签区，独立横向排列 */
.conclusionTags {
	display: flex;
	flex-direction: row;
	gap: 12rpx;
}

.conclusionTag {
	display: inline-flex;
	align-items: center;
	padding: 6rpx 16rpx;
	border-radius: 999rpx;
	background: rgba(39, 113, 76, 0.08);
}

.conclusionTag text {
	font-size: 19rpx;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(39, 113, 76, 0.8);
}

/* 农事时间轴：关键种植过程 */
.cardTimeline {
	background: rgba(252, 250, 244, 0.82);
}

.timelineList {
	padding-top: 4rpx;
}

.timelineItem {
	display: flex;
	padding-bottom: 24rpx;
}

.timelineItem:last-child {
	padding-bottom: 0;
}

.timelineLeft {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 40rpx;
	flex-shrink: 0;
}

.timelineDot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.5);
	flex-shrink: 0;
}

.timelineLine {
	width: 1rpx;
	flex: 1;
	background: rgba(39, 113, 76, 0.2);
	margin-top: 8rpx;
}

.timelineRight {
	flex: 1;
	padding-left: 24rpx;
}

.timelineTime {
	display: block;
	font-size: 19rpx;
	font-weight: 400;
	color: rgba(84, 106, 93, 0.5);
	margin-bottom: 6rpx;
	letter-spacing: 0.02em;
}

.timelineTitle {
	display: block;
	font-size: 25rpx;
	font-weight: 500;
	color: rgba(27, 41, 33, 0.88);
	margin-bottom: 6rpx;
	line-height: 1.35;
}

.timelineDesc {
	display: block;
	font-size: 21rpx;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(84, 106, 93, 0.75);
}

/* 关键节点（安全检测）：轻强调 */
.timelineItem.is-key .timelineDot {
	background: rgba(39, 113, 76, 0.7);
}

.timelineItem.is-key .timelineTitle {
	font-weight: 600;
	color: rgba(27, 41, 33, 0.9);
}

/* 当前节点（包装日期：出库）：主高亮 */
.timelineItem.is-current .timelineDot {
	background: #2f7d55;
	box-shadow: 0 0 0 6rpx rgba(47, 125, 85, 0.12);
}

.timelineItem.is-current .timelineTitle {
	font-weight: 600;
	color: rgba(20, 60, 40, 0.95);
}

/* 底部可信来源说明 */
.timelineFootnote {
	margin-top: 20rpx;
	font-size: 20rpx;
	color: rgba(84, 106, 93, 0.45);
	line-height: 1.6;
}

/* 种植现场实时画面模块 */
.cardLive {
	background: rgba(252, 250, 244, 0.82);
}

.liveMediaWrap {
	position: relative;
	width: 100%;
	height: 380rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background: linear-gradient(
		160deg,
		rgba(39, 113, 76, 0.04) 0%,
		rgba(39, 113, 76, 0.015) 50%,
		rgba(39, 113, 76, 0.05) 100%
	);
	border: 1rpx solid rgba(39, 75, 57, 0.08);
	box-shadow: inset 0 2rpx 12rpx rgba(39, 113, 76, 0.04);
}

.liveCover {
	width: 100%;
	height: 100%;
}

/* 默认未播放态背景：深灰绿 + 墨绿色层次感 */
.video-placeholder-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		165deg,
		rgba(45, 70, 55, 0.78) 0%,
		rgba(35, 55, 45, 0.82) 50%,
		rgba(28, 45, 38, 0.88) 100%
	);
	box-shadow: inset 0 0 100rpx rgba(55, 90, 68, 0.12);
}

.livePlaceholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: transparent;
}

.livePlayIcon {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-bottom: 20rpx;
}

.livePlayDot {
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.35);
	animation: livePulse 1.4s ease-in-out infinite;
}

.livePlayDot.dot2 {
	animation-delay: 0.2s;
}

.livePlayDot.dot3 {
	animation-delay: 0.4s;
}

@keyframes livePulse {
	0%, 100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

.livePlaceholderMain {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(39, 113, 76, 0.5);
	margin-bottom: 10rpx;
}

.livePlaceholderSub {
	font-size: 20rpx;
	color: rgba(84, 106, 93, 0.35);
}

/* 实时在线状态标签（视频区内部轻量风格） */
.liveStatusPill {
	display: flex;
	align-items: center;
	gap: 5rpx;
	padding: 0;
	background: transparent;
	border: none;
}

.liveStatusDot {
	width: 6rpx;
	height: 6rpx;
	border-radius: 50%;
	flex-shrink: 0;
	background: #6EDFA3;
	box-shadow: 0 0 6rpx rgba(110, 223, 163, 0.6);
}

.liveStatusPill.online .liveStatusDot {
	animation: statusPulse 2s ease-in-out infinite;
}

.liveStatusText {
	font-size: 18rpx;
	font-weight: 600;
	color: rgba(235, 245, 240, 0.88);
	letter-spacing: 0.02em;
	text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.25);
}

@keyframes statusPulse {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 0 6rpx rgba(110, 223, 163, 0.6);
	}
	50% {
		opacity: 0.7;
		box-shadow: 0 0 3rpx rgba(110, 223, 163, 0.3);
	}
}

.liveStatusPill.offline .liveStatusDot {
	background: rgba(150, 160, 155, 0.6);
	box-shadow: none;
}

.liveDesc {
	margin-top: 14rpx;
	font-size: 18rpx;
	color: rgba(84, 106, 93, 0.45);
	line-height: 1.6;
}

/* 种植环境记录模块 */
.cardEnvironment {
	background: rgba(252, 250, 244, 0.82);
}

.environmentSummary {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(27, 41, 33, 0.8);
	line-height: 1.6;
	margin-bottom: 24rpx;
}

/* 土壤养分趋势图 */
.environmentChart {
	background: rgba(39, 113, 76, 0.03);
	border: 1rpx solid rgba(39, 113, 76, 0.08);
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
}

.environmentChartHead {
	margin-bottom: 20rpx;
}

.environmentChartTitle {
	display: block;
	font-size: 24rpx;
	font-weight: 500;
	color: rgba(27, 41, 33, 0.75);
}

.environmentChartSub {
	display: block;
	font-size: 20rpx;
	color: rgba(84, 106, 93, 0.45);
	margin-top: 4rpx;
}

.environmentChartCanvas {
	position: relative;
	height: 200rpx;
	margin-bottom: 16rpx;
}

.chartPlotArea {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 30rpx;
}

/* SVG 图表样式 */
.chartSvg {
	width: 100%;
	height: 100%;
}

/* 网格线（弱化，避免抢视觉） */
.chartGridLineSvg {
	stroke: rgba(39, 113, 76, 0.05);
	stroke-width: 1;
}

/* 面积渐变层（趋势带效果） */
.chartAreaN {
	fill: rgba(47, 125, 85, 0.08);
}

.chartAreaP {
	fill: rgba(180, 140, 70, 0.08);
}

.chartAreaK {
	fill: rgba(84, 130, 110, 0.08);
}

/* 曲线样式（柔和趋势线） */
.chartPathN {
	fill: none;
	stroke-width: 2.5;
	stroke-opacity: 0.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chartPathP {
	fill: none;
	stroke-width: 2.5;
	stroke-opacity: 0.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chartPathK {
	fill: none;
	stroke-width: 2.5;
	stroke-opacity: 0.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 数据点样式（小而柔和） */
.chartDotN {
	fill: rgba(47, 125, 85, 0.85);
}

.chartDotP {
	fill: rgba(180, 140, 70, 0.85);
}

.chartDotK {
	fill: rgba(84, 130, 110, 0.85);
}

.chartLabels {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
}

.chartLabels text {
	font-size: 18rpx;
	color: rgba(84, 106, 93, 0.4);
}

.environmentChartLegend {
	display: flex;
	justify-content: center;
	gap: 40rpx;
}

.legendItem {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.legendDot {
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
}

.legendN {
	background: rgba(47, 125, 85, 0.65);
}

.legendP {
	background: rgba(180, 140, 70, 0.65);
}

.legendK {
	background: rgba(84, 130, 110, 0.65);
}

.legendItem text {
	font-size: 22rpx;
	color: rgba(84, 106, 93, 0.55);
}

/* 环境摘要项 */
.environmentGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16rpx;
}

.environmentItem {
	display: flex;
	flex-direction: column;
	gap: 6rpx;
	padding: 20rpx;
	border-radius: 14rpx;
	background: rgba(39, 113, 76, 0.04);
	border: 1rpx solid rgba(39, 113, 76, 0.08);
}

.environmentLabel {
	font-size: 18rpx;
	color: rgba(84, 106, 93, 0.45);
}

.environmentValue {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(27, 41, 33, 0.8);
	line-height: 1.2;
}

.environmentStatus {
	font-size: 18rpx;
	color: rgba(47, 125, 85, 0.55);
}

/* ================================================
   微动效：让页面"活起来"
   ================================================ */

/* Hero 进入：上浮 + 淡入 */
@keyframes heroEnter {
	0% {
		opacity: 0;
		transform: translateY(28rpx);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.heroCard {
	animation: heroEnter 0.6s cubic-bezier(0.22, 0.78, 0.35, 1) both;
}

/* 卡片依次入场：延迟递增，制造节奏感 */
@keyframes cardEnter {
	0% {
		opacity: 0;
		transform: translateY(20rpx);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 商品面板：稍晚于 Hero */
.heroInfoPanel {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.15s both;
}

/* 检测结论卡 */
.cardConclusion {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.2s both;
}

/* 农场卡 */
.cardFarm {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.25s both;
}

/* 批次状态卡（不存在/已下线） */
.cardBatchState {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.2s both;
}

/* 凭证卡 */
.cardCredential {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.45s both;
}

/* ============================
   检测报告横向卡片列表
   ============================ */
.reportCardList {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

.reportCardList::-webkit-scrollbar {
	display: none;
}

.reportCardTrack {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 16rpx;
	padding: 6rpx 4rpx 10rpx;
	/* 关键：让子项不受 flex 压缩，自然撑开形成横向溢出 */
	width: max-content;
}

/* 单张报告卡片 */
.reportCard {
	flex-shrink: 0;
	width: 220rpx;
	background: #FAFBF9;
	border: 1rpx solid rgba(39, 75, 57, 0.09);
	border-radius: 14rpx;
	padding: 12rpx 12rpx 10rpx;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-shadow: 0 2rpx 8rpx rgba(39, 75, 57, 0.04);
}

/* 缩略图（带页数角标覆盖层） */
.reportCardThumb {
	position: relative;
	width: 100%;
	height: 196rpx;
	background: rgba(39, 75, 57, 0.03);
	border-radius: 10rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10rpx;
}

.reportCardThumbImg {
	width: 100%;
	height: 100%;
}

.reportCardThumbEmpty {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.reportCardThumbEmptyText {
	font-size: 18rpx;
	color: rgba(39, 75, 57, 0.3);
}

/* 页数角标：绝对定位在缩略图右下角 */
.reportCardPages {
	position: absolute;
	bottom: 8rpx;
	right: 8rpx;
	font-size: 15rpx;
	color: rgba(39, 75, 57, 0.65);
	background: rgba(250, 251, 249, 0.88);
	border: 1rpx solid rgba(39, 75, 57, 0.1);
	border-radius: 6rpx;
	padding: 2rpx 8rpx;
	line-height: 1.4;
}

/* 报告元信息 */
.reportCardMeta {
	flex: 1;
	margin-bottom: 6rpx;
}

.reportCardRow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 4rpx;
	margin-bottom: 4rpx;
}

.reportCardLabel {
	font-size: 16rpx;
	color: rgba(84, 106, 93, 0.6);
	flex-shrink: 0;
}

.reportCardValue {
	font-size: 16rpx;
	color: rgba(68, 82, 72, 0.85);
	font-weight: 400;
	text-align: right;
	word-break: break-all;
}

.reportCardValueNo {
	font-size: 14rpx;
	color: rgba(68, 82, 72, 0.72);
}

/* 点击提示 */
.reportCardHint {
	font-size: 14rpx;
	color: rgba(39, 75, 57, 0.3);
	text-align: center;
	margin-top: auto;
}

/* 卡片触摸反馈：阴影增强（模拟按压感） */
.card:active {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* 触摸时轻微缩小，增加真实感 */
.card:active:not(.heroInfoPanel) {
	transform: scale(0.99);
}

.sectionHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18rpx;
	margin-bottom: 20rpx;
}

.sectionHeaderLeft {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	position: relative;
	padding-bottom: 8rpx;
}

.sectionHeaderLeft::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 78rpx;
	height: 2rpx;
	border-radius: 999rpx;
	background: linear-gradient(90deg, rgba(46, 82, 63, 0.3), rgba(203, 176, 128, 0.26), rgba(46, 82, 63, 0));
	pointer-events: none;
}

.sectionEn {
	font-size: 15rpx;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(84, 106, 93, 0.76);
}

.sectionTitle {
	font-size: 26rpx;
	font-weight: 600;
	color: rgba(60, 72, 64, 0.72);
}

.statusBadge {
	font-size: 18rpx;
	font-weight: 600;
	padding: 9rpx 15rpx;
	border-radius: 999rpx;
	white-space: nowrap;
	border: 1rpx solid transparent;
	box-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.34) inset;
}

.statusBadge.ok {
	color: #1d5d40;
	background: rgba(39, 113, 76, 0.12);
	border-color: rgba(39, 113, 76, 0.2);
}

.statusBadge.wait {
	color: #715726;
	background: rgba(203, 171, 112, 0.2);
	border-color: rgba(203, 171, 112, 0.26);
}

.statusBadge.warning {
	color: #8a5e22;
	background: rgba(214, 174, 95, 0.22);
	border-color: rgba(214, 174, 95, 0.28);
}

.statusBadge.muted {
	color: #677069;
	background: rgba(126, 137, 128, 0.14);
	border-color: rgba(126, 137, 128, 0.2);
}

/* =============================================
   商品信息面板专用信任认证徽章：强化图标主视觉、文字辅助
   ============================================= */
/* 整体：认证章风格，低饱和细边框，无交互感 */
.trustBadge {
	display: inline-flex;
	align-items: center;
	gap: 7rpx;
	padding: 9rpx 18rpx 9rpx 15rpx;
	border-radius: 999rpx;
	border: 1rpx solid rgba(39, 113, 76, 0.22);
	background: rgba(39, 113, 76, 0.06);
	box-shadow:
		0 2rpx 6rpx rgba(39, 113, 76, 0.06),
		0 1rpx 0 rgba(255, 255, 255, 0.55) inset;
	white-space: nowrap;
	cursor: default;
	pointer-events: none;
	user-select: none;
}

/* 双圆环认证图标：20×20 viewBox，图标为第一视觉焦点 */
.trustBadgeIcon {
	width: 30rpx;
	height: 30rpx;
	flex-shrink: 0;
	vertical-align: middle;
	display: inline-block;
}

/* 文案：品牌深绿，字重略降，视觉权重低于图标 */
.trustBadgeText {
	font-size: 18rpx;
	font-weight: 400;
	letter-spacing: 0.05em;
	color: rgba(27, 71, 42, 0.68);
}

.kv {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.kvRow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16rpx;
}

.kvKey {
	font-size: 22rpx;
	font-weight: 480;
	color: rgba(54, 68, 58, 0.62);
}

.kvVal {
	font-size: 23rpx;
	font-weight: 400;
	text-align: right;
	color: rgba(27, 41, 33, 0.92);
}

/* 农场主体：左图右文，右栏与图片垂直居中，名称/地址成组 */
.farmBody {
	display: flex;
	align-items: center;
	gap: 24rpx;
	margin-bottom: 18rpx;
}

.farmImageWrap {
	flex-shrink: 0;
	width: 180rpx;
	height: 136rpx;
	border-radius: 22rpx;
	overflow: hidden;
	position: relative;
	box-shadow:
		0 12rpx 28rpx rgba(24, 41, 30, 0.14),
		0 2rpx 0 rgba(255, 255, 255, 0.3) inset;
}

.farmImage {
	width: 100%;
	height: 100%;
	display: block;
	background: linear-gradient(160deg, rgba(234, 245, 240, 0.9), rgba(220, 238, 228, 0.85));
}

/* 图片暗角效果：增强真实场景感 */
.farmImageVignette {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 22rpx;
	background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(24, 41, 30, 0.12) 100%);
	pointer-events: none;
}

.farmMeta {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	gap: 10rpx;
}

.farmName {
	font-size: 30rpx;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(27, 41, 33, 0.94);
}

/* 农场地址：普通文本样式，弱于标题；多行时图标与首行对齐 */
.farmLocation {
	display: flex;
	align-items: flex-start;
	gap: 8rpx;
	margin-top: 8rpx;
}

/* 轻量标签：真实种植、可追溯来源 */
.farmTags {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;
	margin-top: 6rpx;
}

.farmTag {
	padding: 4rpx 12rpx;
	font-size: 18rpx;
	font-weight: 400;
	color: rgba(39, 113, 76, 0.85);
	background: rgba(39, 113, 76, 0.08);
	border-radius: 8rpx;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

/* 定位小图标：略弱、与首行文字视觉对齐 */
.locationIcon {
	width: 18rpx;
	height: 18rpx;
	flex-shrink: 0;
	margin-top: 6rpx;
	opacity: 0.42;
}
.locationText {
	flex: 1;
	min-width: 0;
	font-size: 21rpx;
	font-weight: 400;
	color: rgba(84, 106, 93, 0.82);
	line-height: 1.55;
	letter-spacing: 0.02em;
}

/* 农场介绍：融入主体，使用分隔线区分，与商品简介风格统一 */
.farmIntro {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	padding-top: 18rpx;
	border-top: 1rpx solid rgba(39, 75, 57, 0.06);
	font-size: 23rpx;
	line-height: 2;
	color: rgba(54, 68, 58, 0.76);
}

/* 原始农场简介 */
.farmIntroOrigin {
	font-size: 23rpx;
	line-height: 2;
	color: rgba(54, 68, 58, 0.76);
}

.emptyText {
	margin-top: 10rpx;
	font-size: 24rpx;
	line-height: 1.62;
	color: rgba(16, 24, 19, 0.72);
}

.btnRow {
	margin-top: 22rpx;
}

/* 合格证紧凑缩略图 */
/* ============================
   合格证：信息摘要 + 缩略图一体化布局
   ============================ */
.certSummary {
	display: flex;
	align-items: flex-start;
	gap: 24rpx;
}

.certSummaryInfo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14rpx;
	min-width: 0;
}

.certSummaryRow {
	display: flex;
	flex-direction: column;
	gap: 2rpx;
}

.certSummaryLabel {
	font-size: 20rpx;
	font-weight: 500;
	color: rgba(39, 75, 57, 0.55);
	letter-spacing: 0.02em;
}

.certSummaryValue {
	font-size: 23rpx;
	font-weight: 400;
	color: rgba(27, 41, 33, 0.8);
	line-height: 1.4;
}

.certThumbContainer {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6rpx;
}

.certThumbContainer .certThumbWrap {
	width: 100rpx;
	height: 136rpx;
	border-radius: 10rpx;
	overflow: hidden;
	background: #fff;
	border: 1rpx solid rgba(200, 180, 140, 0.18);
	box-shadow: 0 2rpx 8rpx rgba(30, 36, 26, 0.05);
}

.certThumbContainer .certThumbImage {
	width: 100%;
	height: 100%;
	display: block;
}

.certPreviewHint {
	font-size: 15rpx;
	line-height: 1.2;
	color: rgba(39, 75, 57, 0.38);
	letter-spacing: 0.01em;
}

.certPendingHint {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 12rpx 0;
}

.certPendingText {
	font-size: 21rpx;
	color: rgba(39, 75, 57, 0.5);
	line-height: 1.5;
}

/* 旧样式保留但隐藏（兼容其他模块） */
.certPreviewCompact {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 24rpx;
}

.docPlaceholder {
	margin-top: 16rpx;
	padding: 20rpx;
	border-radius: 26rpx;
	background: linear-gradient(160deg, rgba(244, 237, 224, 0.82), rgba(237, 244, 235, 0.72));
	border: 1rpx solid rgba(201, 171, 120, 0.22);
}

.docPlaceholderTitle {
	display: block;
	margin-bottom: 12rpx;
	font-size: 22rpx;
	font-weight: 650;
	color: rgba(35, 93, 64, 0.92);
}

.docPlaceholderText {
	display: block;
	font-size: 22rpx;
	line-height: 1.75;
	color: rgba(59, 71, 62, 0.82);
}

.docBlock {
	margin-top: 14rpx;
	padding: 18rpx;
	border-radius: 22rpx;
	background: rgba(255, 255, 255, 0.46);
}

.docBlock:first-of-type {
	margin-top: 4rpx;
}

.docTitle {
	display: block;
	margin-bottom: 10rpx;
	font-size: 22rpx;
	font-weight: 600;
	color: rgba(45, 87, 64, 0.84);
}

.docText {
	font-size: 22rpx;
	line-height: 1.8;
	color: rgba(64, 75, 67, 0.8);
}

.cardCredential .certSummary {
	margin-top: 4rpx;
}

/* 安心收口文案 */
.pageEndHint {
	padding: 28rpx 32rpx 20rpx;
	text-align: center;
}

.pageEndHint text {
	font-size: 20rpx;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(88, 100, 92, 0.45);
	letter-spacing: 0.03em;
}

/* 底部柔和收口渐变 */
.footerFade {
	position: relative;
	height: 1rpx;
	margin: 0 100rpx;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(39, 75, 57, 0.1) 30%,
		rgba(39, 75, 57, 0.14) 50%,
		rgba(39, 75, 57, 0.1) 70%,
		transparent 100%
	);
}

.footerFade::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50%;
	height: 32rpx;
	background: radial-gradient(ellipse at 50% 100%, rgba(39, 75, 57, 0.04), transparent 70%);
}

/* 轻量页脚 */
.traceFooter {
	padding: 20rpx 32rpx 64rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
}

.traceFooterHint {
	font-size: 19rpx;
	font-weight: 400;
	color: rgba(88, 100, 92, 0.4);
	letter-spacing: 0.04em;
}

.traceFooterPhone {
	display: flex;
	align-items: center;
	gap: 6rpx;
	padding: 6rpx 14rpx;
	border-radius: 6rpx;
	transition: opacity 0.2s ease;
}

.traceFooterPhone:active {
	opacity: 0.55;
}

.traceFooterPhoneIcon {
	width: 20rpx;
	height: 20rpx;
	opacity: 0.45;
}

.traceFooterPhoneNum {
	font-size: 21rpx;
	font-weight: 400;
	color: rgba(39, 75, 57, 0.52);
	letter-spacing: 0.04em;
}

.traceFooterBrand {
	font-size: 16rpx;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: rgba(88, 100, 92, 0.26);
	margin-top: 6rpx;
}
/* 视频预览区域 */
	.video-section {
		/* margin: 0 30rpx 20rpx; */
		position: relative;
		z-index: 1;
	}

	.video-container {
		position: relative;
		width: 100%;
		height: 420rpx;
		background-color: #000000;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.video-container.fullscreen-mode {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		margin: 0;
		z-index: 9999;
		border-radius: 0;
	}

	.video-container.fullscreen-mode .video-controls {
		padding: 30rpx;
	}

	.video-container.fullscreen-mode .top-controls,
	.video-container.fullscreen-mode .bottom-controls {
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.video-container.fullscreen-mode:hover .top-controls,
	.video-container.fullscreen-mode:hover .bottom-controls {
		opacity: 1;
	}

	.video-player,
	.video-placeholder {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* 微信小程序video组件样式 */
	#myVideo {
		width: 100%;
		height: 100%;
		background-color: #000000;
	}
	

	/* App端video组件样式 */
	/* #ifdef APP-PLUS || APP-HARMONY */
	#appVideo {
		width: 100%;
		height: 100%;
		background-color: #000000;
	}
	/* #endif */

	.h5-video-wrapper {
		width: 100%;
		height: 100%;
	}

	/* App端视频播放器样式优化 */
	/* #ifdef APP-PLUS || APP-HARMONY */
	#appVideoPlayer {
		width: 100%;
		height: 100%;
		background-color: #000000;
	}
	/* #endif */

	.video-controls {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.3) 100%);
	}
	.control-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.top-controls {
		height: 80rpx;
	}

	.center-controls {
		height: 120rpx;
		justify-content: center;
		align-items: center;
	}

	.bottom-controls {
		height: 80rpx;
	}

	/* 信号指示器（轻量状态提示） */
	.signal-indicator {
		display: flex;
		align-items: center;
		color: rgba(200, 215, 205, 0.7);
		font-size: 18rpx;
		background-color: rgba(30, 55, 42, 0.5);
		padding: 4rpx 10rpx;
		border-radius: 16rpx;
		opacity: 0.65;
	}

	.signal-subtle {
		opacity: 0.55;
	}

	.signal-indicator image {
		margin-right: 4rpx;
		opacity: 0.7;
	}

	.signal-text {
		font-weight: 400;
		letter-spacing: 0.02em;
	}

	/* 全屏按钮（轻量透明图标按钮） */
	.fullscreen-button {
		position: absolute;
		top: 12rpx;
		right: 16rpx;
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(235, 245, 240, 0.75);
		background-color: transparent;
		border: none;
		border-radius: 0;
		transition: all 0.2s;
		z-index: 7;
	}

	.fullscreen-button:active {
		color: rgba(235, 245, 240, 0.95);
		transform: scale(0.92);
	}

	/* 实时在线状态标签（固定在右上角，全屏按钮左侧） */
	.video-fixed-status {
		position: absolute;
		top: 24rpx;
		right: 30rpx;
		z-index: 6;
		display: flex;
		align-items: center;
	}

	.video-time {
		color: #FFFFFF;
		font-size: 26rpx;
		background-color: rgba(0, 0, 0, 0.4);
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		font-weight: 400;
	}

	/* 播放按钮（精致品牌风格，更柔和） */
	.play-button {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.08);
		transition: all 0.25s ease;
	}

	.play-button:active {
		transform: scale(0.94);
		background: rgba(255, 255, 255, 0.16);
	}

	/* 播放按钮内部图标（柔和米白） */
	.play-btn-circle {
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(250, 250, 248, 0.92) 0%, rgba(242, 245, 240, 0.88) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
	}

	/* CSS 三角形播放图标（柔和深绿灰） */
	.play-btn-icon {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10rpx 0 10rpx 17rpx;
		border-color: transparent transparent transparent rgba(45, 70, 55, 0.82);
		margin-left: 3rpx;
	}

	.center-button-container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pause-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s;
	}
	
	.center-button-container:active .pause-icon {
		opacity: 1;
		background-color: rgba(76, 175, 80, 0.7);
	}
</style>