<template>
	<view>
		<nav-bar title="订单详情" bgColor="#F2F3F7" isBack :buttonGroup="buttonGroup"
			@button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-order-detail-tip" isTipLayer
			tipLayerText="编辑订单信息">
			<!-- <template v-slot:left>
				<image class="back-icon" src="/static/image/common/back.png" mode="aspectFit"></image>
			</template> -->
			<template v-slot:center>
				<view class="title-box">
					<image v-if="order.status == '已取消'" src="/static/image/shopping/jingdong/detail/cancel.png"
						mode="aspectFit" class="wait-icon">
					</image>
					<image v-else src="/static/image/shopping/jingdong/detail/wait.png" mode="aspectFit"
						class="wait-icon">
					</image>
					<text>{{ order.status }}</text>
				</view>
			</template>
			<template v-slot:right>
				<view class="right-box">
					<image class="icon" src="/static/image/shopping/jingdong/detail/share.png" mode="aspectFit">
					</image>
					<image class="icon" src="/static/image/shopping/jingdong/detail/more.png" mode="aspectFit">
					</image>
				</view>
			</template>
		</nav-bar>
		<!-- 等待付款 -->
		<template v-if="order.status == '等待付款'">
			<view class="tip-box">
				<text>还剩 <text style="color: #DD223F;font-weight: 500;">{{ order.statusDesc }}</text> 订单自动取消</text>
			</view>
			<view class="address-info">
				<view>
					<view>
						<image class="location" src="/static/image/shopping/jingdong/detail/location.png"></image>
						<text class="name">{{ order.consignee }}</text>
						<text class="number">{{ formattedPhone }}</text>
					</view>
					<view>
						<text class="address">{{ order.fullAddress }}</text>
					</view>
				</view>
				<view class="edit-btn">
					<text>修改</text>
				</view>
			</view>
		</template>

		<!-- 正在出库 -->
		<template v-if="order.status == '正在出库'">
			<view class="outbound-info">
				<image class="outbound-icon" src="/static/image/shopping/jingdong/detail/xiadan.png" mode="aspectFit">
				</image>
				<view class="outbound-info-content">
					<view class="title-info">
						<view>
							<text>{{ order.status === '正在出库' ? '已下单' : order.status }} </text>
							<text>{{ order.trackingDesc || '预计送达时间' }}</text>
						</view>
						<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
					</view>
					<text class="desc">{{ order.trackingDesc2 }}</text>
					<view class="address-box">
						<view class="top">
							<text class="address">{{ order.fullAddress }}</text>
							<view class="edit-btn">修改</view>
						</view>
						<view class="phone">{{ order.consignee }} {{ formattedPhone }}</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 已取消 -->
		<template v-if="order.status == '已取消'">
			<view class="cancel-progress-box">
				<view class="cancel-content">
					<view class="title-row">
						<view class="left">
							<image class="icon" src="/static/image/shopping/jingdong/detail/tuikuan.png"
								mode="aspectFit">
							</image>
							<text class="title">取消/退款进度</text>
						</view>

						<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
					</view>
					<text class="desc">您的订单已取消，请查看取消进度详情。</text>
				</view>
			</view>

			<view class="order-status-box">
				<view class="status-main">
					<image class="status-icon" src="/static/image/shopping/jingdong/detail/xiadan.png" mode="aspectFit">
					</image>
					<view class="status-content">
						<view class="title-row">
							<text class="title">已下单</text>
							<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
						</view>
					</view>
				</view>
				<view class="progress-box">
					<text class="desc">您提交了订单，请等待系统确认</text>
				</view>
				<view class="bottom-box">
					<view class="dot"></view>
					<view>
						<text class="desc">{{ order.fullAddress }}</text>
						<view class="name">{{ order.consignee }} {{ formattedPhone }}</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 签收 -->
		<template v-if="order.status == '完成' && order.trackingTitle == '已签收'">
			<view class="order-status-box">
				<view class="status-main">
					<image class="status-icon" src="/static/image/shopping/jingdong/detail/qianshou.png"
						mode="aspectFit">
					</image>
					<view class="status-content">
						<view class="title-row">
							<text class="title" style="color: #1A1A1A;">已签收</text>
							<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
						</view>
					</view>
				</view>
				<view class="progress-box" style="height: 192rpx;">
					<text class="text">{{ order.trackingDesc2 }}</text>
					<view class="upload-box">
						<view class="info-box">
							<view class="image-box">
								<image class="w100 h100" :src="order.courierImg" mode="aspectFit"></image>
							</view>
							<text class="name">{{ order.courier }}</text>
						</view>
						<view class="btn-box">
							<view class="btn grey">联系Ta</view>
							<view class="btn red">打赏Ta</view>
						</view>

					</view>
				</view>
				<view class="bottom-box">
					<view class="dot"></view>
					<view>
						<text class="desc">{{ order.fullAddress }}</text>
						<view class="name">{{ order.consignee }} {{ formattedPhone }}</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 商品卡片 -->
		<view class="product-card">
			<view class="title-box">
				<view class="left-box">
					<image v-if="order.shopType == 'self'" class="img"
						src="/static/image/shopping/jingdong/detail/ziyin.png">
					</image>
					<image v-if="order.shopType == 'jd'" style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"
						src="/static/image/shopping/jingdong/JD.png">
					</image>
					<text class="title">{{ order.shopName }}</text>
				</view>
				<uni-icons class="right-icon" size="12" color="#1A1A1A" type="right"></uni-icons>
			</view>
			<view class="product-info">
				<view class="image-box">
					<image v-if="order.products && order.products[0]" class="w100 h100" :src="order.products[0].image">
					</image>
				</view>
				<view class="info-box">
					<view class="name">{{ order.products && order.products[0]?.title }}</view>
					<view style="margin-top: 16rpx;" class=" w100 flex flex-justify-between">
						<view class="flex-1" style="position: relative; overflow: hidden;">
							<text id="desc-visible" class="desc"
								:style="{ 'max-height': isDescExpanded ? 'none' : '32rpx' }"
								style="display: block; text-overflow: clip;">
								{{ order.products && order.products[0]?.desc }}
							</text>
							<!-- 测量层：必须继承 desc 类以同步样式 -->
							<view id="desc-measure" class="desc desc-measure"
								style="position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; width: 100%; max-height: none;">
								{{ order.products && order.products[0]?.desc }}
							</view>
						</view>
						<uni-icons v-if="hasDescOverflow" :type="isDescExpanded ? 'up' : 'down'" size="12"
							color="#87868E" style="flex-shrink: 0;"
							@click="isDescExpanded = !isDescExpanded"></uni-icons>
					</view>
					<view class="tag">{{ order.products && order.products[0]?.service }}</view>
				</view>
				<view class="price-box">
					<view class="flex-align-center">
						<view v-if="(order.status != '等待付款' && order.status != '已取消') && order.discount > 0"
							class="flex-center" style="display: inline-flex;">
							<image style="width: 11px;height: 11px;margin-right: 4rpx;"
								src="/static/image/shopping/jingdong/detail/help.png">
							</image>
							<text
								style="font-size: 22rpx;height: 22rpx;color: #87868E;font-weight: 300;line-height: 22rpx;margin-right: 2rpx;">到手价</text>
						</view>
						<text class="price wx-font-medium">￥{{
							order.status == '等待付款' || order.status == '已取消' ?
								Number(order.products[0]?.price).toFixed(2) :
								Number(order.products[0]?.price - order.discount).toFixed(2)
						}}</text>
					</view>

					<view v-if="(order.status != '等待付款' && order.status != '已取消') && order.discount > 0"
						class="wx-font-medium"
						style="margin-top: 6rpx;text-align: right;color: #87868E;font-weight: 500;">
						<text style="font-size: 24rpx;">￥{{ Number(order.products[0]?.price).toFixed(2) }}</text>
					</view>
				</view>
			</view>
			<view v-if="order.status == '等待付款' || order.status == '已取消'" class="btn-box flex"
				style="margin-top: 60rpx;">
				<view class="left flex-1 flex-center " style="border-right : 0.5px solid #D8D8D8;">
					<image class="img" src="/static/image/shopping/jingdong/detail/dianpukefu.png"></image>
					<view class="name flex-column flex-align-center">
						<text>店铺客服</text>
						<text v-if="order.status == '等待付款'" class="text">商品/活动</text>
					</view>
				</view>
				<view class="right flex-1 flex-center ">
					<image class="img" src="/static/image/shopping/jingdong/detail/jingdongkefu.png"></image>
					<view class="name flex-column flex-align-center">
						<text>京东客服</text>
						<text v-if="order.status == '等待付款'" class="text">物流/平台</text>
					</view>
				</view>
			</view>
			<view v-else class="btn-box">
				<view class="btn" :class="{ red: btn == '送朋友' }" v-for="(btn, index) in btnList" :key="index">
					<image v-if="btn == '送朋友'" class="icon" src="/static/image/shopping/jingdong/detail/gift.png">
					</image>
					{{ btn }}
				</view>
			</view>

			<!-- 订单信息 -->
			<view v-if="!(order.status == '等待付款' || order.status == '已取消')" class="order-info-box product-info-box">
				<view v-if="activeTab != 'dengdaifukuan' && activeTab != 'yiquxiao'" class="item flex-justify-between"
					style="margin-top: 32rpx;">
					<text class="label shrink-0 flex-align-center">实付款</text>
					<view class="flex-1 flex-align-center"
						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;align-items: baseline;overflow-y: hidden;">
						<view v-if="order.discount > 0" class="wx-font-medium flex flex-align-center"
							style="height: 32rpx;">
							<view class="flex" style="align-items: baseline;color: #FF4444;">
								<text>共减￥</text><text style="font-size: 32rpx;font-weight: 500;">{{ order.discount
								}}</text>
							</view>
						</view>
						<view class="wx-font-medium flex flex-align-center" style="margin-left: 8rpx; height: 32rpx;">
							<view class="flex" style="align-items: baseline;color: #1A1A1A;">
								<text>合计￥</text><text style="font-size: 36rpx;font-weight: 500;">{{ order.totalPrice
								}}</text>
							</view>
						</view>
					</view>

				</view>
				<view class="order-info">
					<view class="item flex-justify-between" v-for="(item, index) in order.orderInfo" :key="index"
						v-show="isOrderInfoExpanded || ['订单编号', '支付方式'].includes(item.label)"
						@click="onClickItemInfo(item)">
						<text class="label shrink-0 flex-align-center" style="color: #87868E;font-size: 26rpx;">{{
							item.label
						}}</text>
						<view class="flex-1 flex-align-center"
							style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
							<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.value }}</text>
							<uni-icons v-if="!item.type" type="right" size="10" color="#1A1A1A"
								style="margin-top: 0rpx;margin-left: 4rpx;"></uni-icons>
							<view v-if="item.type == 'number'" class="flex-center"
								style="color: #1A1A1A;font-size: 26rpx;">
								<view style="width: 2rpx;height: 16rpx;background-color: #8D8D8D;margin: 0 8rpx;">
								</view>
								复制
							</view>
						</view>

					</view>
				</view>
				<view class="delivery-info" v-if="isOrderInfoExpanded">
					<view class="item flex-justify-between" v-for="(item, index) in order.sendType" :key="index"
						@click="onClickItemInfo(item)">
						<text class="label shrink-0" style="color: #87868E;font-size: 26rpx;">{{ item.label }}</text>
						<view class="flex-1 flex-align-center"
							style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
							<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.value }}</text>
						</view>
					</view>
				</view>
				<view class="flex-center" style="padding-top: 10rpx;"
					@click="isOrderInfoExpanded = !isOrderInfoExpanded">
					<text style="color: #87868E;font-size: 26rpx;">{{ isOrderInfoExpanded ? '收起' : '全部订单信息' }}</text>
					<uni-icons style="margin-left: 8rpx;" :type="isOrderInfoExpanded ? 'up' : 'down'" size="9"
						color="#87868E"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 商品总价 -->
		<view v-if="order.status == '等待付款' || order.status == '已取消'" class="product-price">
			<view class="title flex-justify-between">
				<text>商品总价</text>
				<text class="wx-font-medium" style="font-weight: 500;">￥{{ order.products && order.products[0]?.price
				}}</text>
			</view>
			<view class="item flex-justify-between">
				<text class="label">运费</text>
				<text class="value wx-font-medium">￥{{ order.carriage }}</text>
			</view>
			<view class="price">需付款 <text class="number wx-font-medium">￥{{ order.totalPrice }}</text></view>
		</view>

		<!-- 订单信息 (等待付款/已取消状态) -->
		<view v-if="order.status == '等待付款' || order.status == '已取消'" class="order-info-box">
			<view class="title flex-justify-between" @click="isOrderInfoExpanded = !isOrderInfoExpanded">
				<text>订单信息</text>
				<view style="font-size: 22rpx;margin-right: 6rpx;font-weight: 400;color: #87868E;"
					class="flex-align-center">
					{{ isOrderInfoExpanded ? '收起' : '展开' }}
					<uni-icons :type="isOrderInfoExpanded ? 'up' : 'down'" size="9" color="#87868E"
						style="margin-left: 8rpx;"></uni-icons>
				</view>
			</view>
			<view class="order-info">
				<view class="item flex-justify-between" v-for="(item, index) in order.orderInfo" :key="index"
					v-show="isOrderInfoExpanded || ['订单编号', '支付方式', '发票类型'].includes(item.label)"
					@click="onClickItemInfo(item)">
					<text class="label shrink-0" style="color: #87868E;font-size: 26rpx;">{{ item.label }}</text>
					<view class="flex-1 flex-align-center"
						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
						<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.label === '订单编号' ? item.value :
							item.value
						}}</text>
						<uni-icons v-if="!item.type" type="right" size="10" color="#1A1A1A"
							style="margin-top: 0rpx;margin-left: 4rpx;"></uni-icons>
						<view v-if="item.type == 'number'" class="flex-center" style="color: #1A1A1A;font-size: 26rpx;">
							<view style="width: 2rpx;height: 16rpx;background-color: #8D8D8D;margin: 0 8rpx;"></view>
							复制
						</view>
					</view>
				</view>
			</view>
			<view class="delivery-info" v-if="isOrderInfoExpanded">
				<view class="item flex-justify-between" v-for="(item, index) in order.sendType" :key="index"
					@click="onClickItemInfo(item)">
					<text class="label shrink-0" style="color: #87868E;font-size: 26rpx;">{{ item.label }}</text>
					<view class="flex-1 flex-align-center"
						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
						<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.value }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 快速解决问题 -->
		<view v-if="order.status != '等待付款' || order.status == '已取消'" class="help-box card">
			<view class="title">快速解决问题</view>
			<view class="tag-box flex">
				<view class="tag">商品坏了怎么办</view>
				<view class="tag">开错发票怎么办</view>
				<view class="tag">商品降价怎么办</view>
			</view>

			<view class="btn-box flex" style="margin-top: 30rpx;">
				<view class="left flex-1 flex-center " style="border-right : 0.5px solid #D8D8D8;">
					<image class="img" src="/static/image/shopping/jingdong/detail/dianpukefu.png"></image>
					<view class="name flex-column">
						<text>店铺客服</text>
						<text class="text">商品/活动</text>
					</view>
				</view>
				<view class="right flex-1 flex-center ">
					<image class="img" src="/static/image/shopping/jingdong/detail/jingdongkefu.png"></image>
					<view class="name flex-column">
						<text>京东客服</text>
						<text class="text">物流/售后/平台</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 安心保障 -->
		<view class="card security-box">
			<view class="title flex-justify-between flex-align-center">安心保障
				<view class="flex-align-center">
					<text class="text">查看全部 </text>
					<uni-icons type="right" size="10" color="#87868E"></uni-icons>
				</view>
			</view>
			<view class="flex content">
				<image class="icon" src="/static/image/shopping/jingdong/detail/jiagebaozhang.png"></image>
				<view class="flex-1">
					<view class="flex-justify-between flex-align-center">
						<text class="label">价格保障</text>
						<uni-icons type="right" size="10" color="#87868E"></uni-icons>
					</view>
					<view class="tag-box flex-align-center flex-justify-between">
						<view class="flex-align-center">
							<text>买贵赔三倍</text>
							<text class="desc">跨平台比价贵就赔</text>
						</view>
						<view class="flex-align-center">
							<text class="desc">去申请</text>
							<uni-icons type="right" size="10" color="#87868E"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="card plus-box">
			<view class="flex-align-center">
				<image class="plus-logo" src="/static/image/shopping/jingdong/detail/plus-logo.png"></image>
				<image class="plus-text" src="/static/image/shopping/jingdong/detail/plus-text.png"></image>
				<text class="dot"></text>
				<text class="flex-1" style="font-size: 26rpx;color: #342D27;">领30 元无门槛红包</text>
				<text style="font-size: 22rpx;color: #87868E;margin-right: 10rpx;">去看看</text>
				<uni-icons type="right" color="#1A1A1A" size="10"></uni-icons>
			</view>
			<view class="text">购物再享折上95折</view>
		</view>

		<template v-if="screenshotImage">
			<view class="w100 flex-center" style="margin-top: 40rpx;margin-bottom: 32rpx;">
				<image style="width: 32rpx;height: 20rpx;" src="/static/image/shopping/jingdong/detail/like-left.png">
				</image>
				<text
					style="font-size: 26rpx;color: #1A1A1A;line-height: 26rpx;font-weight: 500;margin: 0 10rpx;">你可能还喜欢</text>
				<image style="width: 32rpx;height: 20rpx;" src="/static/image/shopping/jingdong/detail/like-right.png">
				</image>
			</view>

			<!-- 上传图片 -->
			<view class="upload-screenshot-box">
				<view class="upload-screenshot-content w100">
					<!-- <image class="upload-screenshot" src="/static/image/common/upload-screenshot.png" mode="aspectFit">
					</image>
					<view class="upload-screenshot-text">长按替换截图</view> -->
					<image class="w100" :src="screenshotImage" mode="widthFix"></image>
				</view>
			</view>
		</template>
		<view class="" :style="{'height':$store.state.safeBottomAz+'px'}">
			
		</view>
		<view class="fixed-bottom " >
			<view class="flex-align-center flex-justify-between w100" :style="{'padding-bottom':$store.state.safeBottomAz+'px'}">
				<text>{{ bottomText }}</text>
				<view class="btn-box">
					<view v-if="order.status == '等待付款'" class="big-btn ">立即支付<text
							class="wx-font-medium money">¥69</text>
					</view>
					<view v-else class="flex-align-center w00">
						<view v-for="btn in bottomBtns" :key="btn" class="bottom-btn " :class="{ red: btn == '再次购买' }">
							{{ btn }}
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="placeholder"></view>
		<!-- 水印 -->
		<view v-if="$isVip()">
			<watermark dark="light" source="uni_alipay_shopping_jingdong_shoppingDetail" />
			<liu-drag-button :canDocking="false"
				@clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_jingdong_shoppingDetail')">
				<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
			</liu-drag-button>
		</view>
	</view>

</template>

<script setup>
import { ref, computed, onUnmounted, watch, onMounted, getCurrentInstance, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { util } from '@/utils/common.js';

const buttonGroup = [
	{
		name: "修改订单",
		click: () => {
			uni.navigateTo({
				url: '/pages/shopping/jingdong/add-order/add-order?id=' + order.value.id + '&type=' + order.value.shopType + '&isEdit=true'
			});
		}
	},
]

const data = reactive({
	id: 1
})

/**
 * 模拟订单列表
 */
const mockOrderList = ref([]);
const screenshotImage = ref('')

const bottomBtns = computed(() => {
	if (order.value.status == '正在出库') {
		return ['申请退款', '修改订单', '我要催单']
	} else if (order.value.status == '完成') {
		if (order.value.trackingTitle == '已签收') {
			return ['查看发票', '退货/售后', '再次购买']
		} else {
			return ['查看物流', '退货/售后', '再次购买']
		}
	} else if (order.value.status == '已取消') {
		return ['再次购买']
	}
	return [];
})

const bottomText = computed(() => {
	if (order.value.status == '等待付款') {
		return '取消订单'
	} else if (order.value.status == '已取消') {
		return '删除订单'
	} else {
		return '更多'
	}
})

const btnList = computed(() => {
	let btns = []
	if (order.value.status == '正在出库') {
		btns = ['送朋友', '加购物车']
	} else if (order.value.status == '完成') {
		if (order.value.trackingTitle == '已签收') {
			btns = ['送朋友', '卖了换钱', '加购物车', '申请售后']
		} else {
			btns = ['卖了换钱', '使用帮助', '申请售后']
		}
	}
	return btns
})

const order = ref({});
onLoad((options) => {
	console.log('详情页参数:', options);
	const id = options.id;
	data.id = id
	if (!id) return;

	// 1. 优先从本地缓存查找
	const cachedList = uni.getStorageSync('jingdongShopping') || [];
	let target = cachedList.find(item => String(item.id) === String(id));

	// 2. 如果缓存没有，再从静态 mock 列表查找
	if (!target) {
		target = mockOrderList.value.find(item => String(item.id) === String(id));
	}

	if (target) {
		order.value = target;
		console.log('成功匹配订单数据:', order.value);

		// 如果是等待付款状态，启动倒计时
		if (order.value.status === '等待付款' && order.value.statusDesc) {
			initCountdown();
		}
	} else {
		console.error('未找到指定的订单数据, ID:', id);
	}
});

let countdownTimer = null;

/**
 * 初始化并启动倒计时
 */
const initCountdown = () => {
	if (countdownTimer) clearInterval(countdownTimer);

	// 解析时间字符串 "HH : mm : ss" 或 "HH:mm:ss" 为秒数
	const parseTimeToSeconds = (timeStr) => {
		if (!timeStr) return 0;
		// 统一格式，移除空格并将冒号分隔
		const parts = timeStr.replace(/\s/g, '').split(':');
		let seconds = 0;
		if (parts.length === 3) {
			seconds = parseInt(parts[0]) * 3600 + parseInt(parts[1]) * 60 + parseInt(parts[2]);
		} else if (parts.length === 2) {
			seconds = parseInt(parts[0]) * 60 + parseInt(parts[1]);
		}
		return isNaN(seconds) ? 0 : seconds;
	};

	// 将秒数格式化为 "HH : mm : ss"
	const formatSecondsToTime = (totalSeconds) => {
		if (totalSeconds <= 0) return "00 : 00 : 00";
		const h = Math.floor(totalSeconds / 3600);
		const m = Math.floor((totalSeconds % 3600) / 60);
		const s = totalSeconds % 60;
		const pad = (n) => String(n).padStart(2, '0');
		return `${pad(h)} : ${pad(m)} : ${pad(s)}`;
	};

	let remainingSeconds = parseTimeToSeconds(order.value.statusDesc);

	if (remainingSeconds <= 0) return;

	countdownTimer = setInterval(() => {
		remainingSeconds--;
		if (remainingSeconds <= 0) {
			order.value.statusDesc = "00 : 00 : 00";
			clearInterval(countdownTimer);
			// 可选：倒计时结束时改变状态为“已取消”
			// order.value.status = '已取消';
		} else {
			order.value.statusDesc = formatSecondsToTime(remainingSeconds);
		}
	}, 1000);
};

onUnmounted(() => {
	if (countdownTimer) {
		clearInterval(countdownTimer);
	}
});

onShow(() => {
	// 读取缓存的截图
	const cachedImage = uni.getStorageSync('jingdong_screenshot');
	if (cachedImage) {
		screenshotImage.value = cachedImage;
	}
	// #ifdef APP-PLUS&&!APP-HARMONY
	util.setAndroidSystemBarColor('#FFFFFF')
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("dark");
	}, 500);
	// #endif

	// 1. 优先从本地缓存查找
	const cachedList = uni.getStorageSync('jingdongShopping') || [];
	let target = cachedList.find(item => String(item.id) === String(data.id));

	// 2. 如果缓存没有，再从静态 mock 列表查找
	if (!target) {
		target = mockOrderList.value.find(item => String(item.id) === String(data.id));
	}

	if (target) {
		order.value = target;
		console.log('成功匹配订单数据:', order.value);

		// 如果是等待付款状态，启动倒计时
		if (order.value.status === '等待付款' && order.value.statusDesc) {
			initCountdown();
		}
	} else {
		console.error('未找到指定的订单数据, ID:', data.id);
	}
})

// 手机号脱敏处理 (增强容错版)
const formattedPhone = computed(() => {
	const phone = order.value?.phone;
	if (!phone) return "";
	const p = String(phone);
	// 只要长度大于等于 7 位，就执行脱敏
	if (p.length >= 7) {
		return p.slice(0, 3) + '****' + p.slice(-4);
	}
	return p;
});

// 订单信息展开状态 (进入页面默认收起)
const isOrderInfoExpanded = ref(false);

const isDescExpanded = ref(false);
const hasDescOverflow = ref(false);

const instance = getCurrentInstance();
const checkDescOverflow = () => {
	// 增加延迟，确保容器宽度计算完成
	setTimeout(() => {
		const query = uni.createSelectorQuery().in(instance);
		query.select('#desc-visible').boundingClientRect();
		query.select('#desc-measure').boundingClientRect();
		query.exec(res => {
			if (res && res[0] && res[1]) {
				const visibleH = res[0].height;
				const measureH = res[1].height;
				console.log('溢出检测高度对比:', visibleH, measureH);
				// 如果测量全高明显大于单行限高，则认为溢出
				if (measureH > visibleH + 1) {
					hasDescOverflow.value = true;
				} else {
					hasDescOverflow.value = false;
				}
			}
		});
	}, 100);
};

onMounted(() => {
	if (order.value?.products?.[0]?.desc) {
		checkDescOverflow();
	}
});

// 监听订单描述变化重新检测
watch(() => order.value?.products?.[0]?.desc, (newVal) => {
	if (newVal) {
		checkDescOverflow();
	}
});
</script>

<style>
/* 直接在页面导入公共样式 */
@import '/common/main.css';
</style>
<style lang="less" scoped>
::v-deep .uni-navbar__header {
	padding: 0 28rpx !important;
}

.title-box {
	display: flex;
	align-items: center;

	.wait-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 12rpx;
	}

	text {
		font-size: 36rpx;
		font-weight: 500;
		color: #1a1a1a;
	}
}

.right-box {
	display: flex;

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
}

.tip-box {
	width: 100%;
	text-align: center;
	font-size: 26rpx;
	line-height: 26rpx;
	color: #1a1a1a;
	margin-bottom: 16rpx;
}

.address-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 22rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
	margin: 0 16rpx;

	.location {
		width: 28rpx;
		height: 28rpx;
		margin-right: 14rpx;
	}

	.name {
		margin-right: 16rpx;
		font-size: 30rpx;
		color: #1A1A1A;
		font-weight: 500;
	}

	.number {
		font-size: 26rpx;
		line-height: 30rpx;
		color: #8C8C8C;
	}

	.address {
		color: #8C8C8C;
		font-size: 26rpx;
		line-height: 42rpx;
		margin-left: 42rpx;
	}

	.edit-btn {

		height: 54rpx;
		border-radius: 8rpx;
		border: 0.5px solid #C5C5C5;
		padding: 0 52rpx;
		font-size: 26rpx;
		line-height: 52rpx;
		color: #1A1A1A;
		margin-left: 28rpx;

		text {
			white-space: nowrap;
		}

	}
}

.outbound-info {
	display: flex;
	align-items: flex-start;
	background-color: #ffffff;
	border-radius: 24rpx;
	margin: 10rpx 16rpx;
	padding: 22rpx 22rpx 30rpx;

	.outbound-icon {
		width: 46rpx;
		height: 46rpx;
		margin-right: 16rpx;
	}

	.outbound-info-content {
		flex: 1;
		display: flex;
		flex-direction: column;

		.title-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			line-height: 46rpx;
			font-weight: 500;
			color: #1A1A1A;
		}

		.desc {
			margin-top: 4rpx;
			font-size: 26rpx;
			color: #8C8C8C;
			line-height: 36rpx;
		}

		.address-box {
			margin-top: 18rpx;

			.top {
				display: flex;
				justify-content: space-between;

				.edit-btn {
					width: 116rpx;
					height: 54rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 0.5px solid #C5C5C5;
					text-align: center;
					font-size: 26rpx;
					line-height: 50rpx;
					color: #1A1A1A;
				}
			}

			.address {
				font-size: 30rpx;
				line-height: 30rpx;
				color: #1A1A1A;
				font-weight: 500;
				margin-top: 8rpx;
			}

			.phone {
				font-size: 26rpx;
				color: #8C8C8C;
				line-height: 26rpx;
			}
		}
	}
}

.cancel-progress-box {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 24rpx;
	margin: 10rpx 16rpx;
	padding: 26rpx 22rpx 30rpx;

	.cancel-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 16rpx;
	}

	.cancel-content {
		flex: 1;

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

			.left {
				display: flex;
				align-items: center;
			}

			.icon {
				width: 46rpx;
				height: 46rpx;
				margin-right: 16rpx;
			}

			.title {
				font-size: 30rpx;
				line-height: 30rpx;
				font-weight: 500;
				color: #1A1A1A;
			}
		}

		.desc {
			margin-top: 4rpx;
			font-size: 26rpx;
			color: #8C8C8C;
			line-height: 36rpx;
		}
	}
}

.order-status-box {
	background-color: #ffffff;
	border-radius: 24rpx;
	margin: 16rpx;
	padding: 22rpx 22rpx 30rpx;

	.status-main {
		display: flex;
		align-items: flex-start;

		.status-icon {
			width: 46rpx;
			height: 46rpx;
			margin-right: 16rpx;
		}

		.status-content {
			flex: 1;

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

				.title {
					font-size: 28rpx;
					font-weight: 700;
					color: #E40C24;
				}
			}

			.desc {
				margin-top: 4rpx;
				font-size: 26rpx;
				color: #8C8C8C;
				line-height: 36rpx;
			}
		}
	}

	.progress-box {
		margin-left: 22rpx;
		border-left: 0.5px solid #F83021;
		margin-top: 6rpx;
		padding-left: 40rpx;
		font-size: 26rpx;
		color: #8C8C8C;
		height: 62rpx;


		.text {
			font-size: 26rpx;
			color: #8C8C8C;
			line-height: 36rpx;
		}

		.upload-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #F7F8FC;
			margin-top: 18rpx;
			border-radius: 8rpx;
			padding: 6rpx;

			.info-box {
				display: flex;
				align-items: center;
			}

			.btn-box {
				display: flex;

				.btn {
					margin-left: 16rpx;
					border-radius: 8rpx;
					height: 46rpx;
					line-height: 42rpx;
					font-size: 22rpx;
					color: #1A1A1A;
					line-height: 46rpx;
					padding: 0 22rpx;
				}

				.grey {
					border: 0.5px solid #C5C5C5;
					color: #1A1A1A;
				}

				.red {
					border: 0.5px solid #ED1C04;
					color: #ED1C04;
				}
			}

			.image-box {
				width: 56rpx;
				height: 56rpx;
				background: #CBCEDA;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 14rpx;
			}

			.name {
				font-size: 22rpx;
				color: #3D3D3D;
			}
		}
	}

	.bottom-box {
		display: flex;
		padding-left: 16rpx;

		.dot {
			width: 14rpx;
			height: 14rpx;
			background: #F83021;
			opacity: 0.5;
			border-radius: 50%;
			margin-right: 32rpx;
			margin-top: 12rpx;
		}

		.desc {
			font-size: 30rpx;
			color: #1A1A1A;
			line-height: 30rpx;
			font-weight: 500;
		}

		.name {
			font-size: 26rpx;
			color: #8C8C8C;
			line-height: 26rpx;
			margin-top: 12rpx;
		}
	}

	.address-timeline {
		position: relative;
		margin-top: 10rpx;
		padding-left: 76rpx;

		.line {
			position: absolute;
			left: 29rpx;
			top: -40rpx;
			bottom: 30rpx;
			width: 2rpx;
			background-color: #F8D3D7;
		}

		.dot {
			position: absolute;
			left: 21rpx;
			bottom: 40rpx;
			width: 18rpx;
			height: 18rpx;
			background-image: radial-gradient(circle, #F8A7AD 100%, transparent);
			border-radius: 50%;
		}

		.info {
			display: flex;
			flex-direction: column;

			.address {
				font-size: 28rpx;
				font-weight: 700;
				color: #1A1A1A;
				line-height: 42rpx;
			}

			.user {
				margin-top: 4rpx;
				font-size: 24rpx;
				color: #8C8C8C;
				line-height: 36rpx;
			}
		}
	}
}

.product-card {
	padding: 28rpx 22rpx;
	margin: 16rpx;
	background-color: #FFFFFF;
	border-radius: 24rpx;

	.title-box {
		display: flex;
		align-items: center;
		// justify-content: space-between;

		.left-box {
			display: flex;
			align-items: center;
			// flex: 1;

			.img {
				width: 50rpx;
				height: 26rpx;
				margin-right: 8rpx;
			}

			.title {
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 26rpx;
				color: #1A1A1A;
				line-height: 28rpx;
				font-weight: 700;
			}
		}



		.right-icon {
			// margin-left: 12rpx;
		}
	}

	.product-info {
		display: flex;
		margin-top: 14rpx;

		.image-box {
			width: 152rpx;
			height: 152rpx;
			border-radius: 24rpx;
			overflow: hidden;
			margin-right: 24rpx;
		}

		.info-box {
			flex: 1;
			margin-right: 44rpx;
			overflow: hidden;

			.name {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 26rpx;
				color: #1A1A1A;
				line-height: 28rpx;
				font-weight: 700;
			}

			.desc {
				font-size: 22rpx;
				color: #87868E;
				line-height: 32rpx;
				overflow: hidden;
				text-overflow: clip;
			}

			.tag {
				font-size: 22rpx;
				color: #A96F24;
				margin-top: 18rpx;
			}
		}

		.price-box {
			font-weight: 500;
			font-size: 28rpx;
			color: #1A1A1A;
			line-height: 28rpx;

			.price {
				font-size: 700;
			}
		}
	}

	.btn-box {
		display: flex;
		justify-content: flex-end;
		margin-top: 26rpx;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 144rpx;
			white-space: nowrap;
			font-size: 22rpx;
			line-height: 22rpx;
			height: 60rpx;
			line-height: 58rpx;
			border-radius: 8rpx;
			border: 0.5px solid #C7C7C7;
			color: #1A1A1A;
			margin-left: 22rpx;

			.icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 6rpx;
			}


		}

		.red {
			color: #F10F1A;
			border: 0.5px solid #F10F1A;
		}


		.img {
			width: 32rpx;
			height: 32rpx;
			flex-shrink: 0;
			margin-right: 14rpx;
		}
	}

	.name {
		font-size: 26rpx;
		color: #1A1A1A;
	}

	.text {
		font-size: 22rpx;
		color: #87868E;
		line-height: 24rpx;
		margin-top: 8rpx;
	}
}

.product-price {
	background-color: #FFFFFF;
	padding: 38rpx 22rpx;
	border-radius: 24rpx;
	margin: 16rpx;

	.title {
		font-size: 32rpx;
		color: #1A1A1A;
		line-height: 32rpx;
		font-weight: 700;
	}

	.item {
		margin-top: 36rpx;

		.label {
			color: #87868E;
			font-size: 26rpx;
			line-height: 26rpx;
		}

		.value {
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: 500;
		}
	}

	.price {
		display: flex;
		justify-content: flex-end;
		margin-top: 32rpx;
		font-size: 26rpx;
		color: #ED1C04;
		line-height: 26rpx;
		font-weight: 500;
		align-items: baseline;

		.number {
			font-size: 36rpx;
			font-weight: 500;
			margin-left: 6rpx;
		}
	}
}

.card {
	background-color: #ffffff;
	margin: 16rpx;
	border-radius: 24rpx;
	padding: 30rpx 22rpx;

	.title {
		color: #1A1A1A;
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 700;
	}
}


.help-box {
	.tag-box {
		margin-top: 32rpx;
		overflow: hidden;
		overflow-x: scroll;
		scrollbar-width: none;
		-ms-overflow-style: none;

		.tag {
			background-color: #F5F6FA;
			border-radius: 16rpx;
			white-space: nowrap;
			height: 68rpx;
			line-height: 68rpx;
			font-size: 26rpx;
			color: #1A1A1A;
			padding: 0 16rpx;
			margin: 0 16rpx;
		}

	}

	.btn-box {
		display: flex;
		justify-content: flex-end;
		margin-top: 26rpx;

		.img {
			width: 32rpx;
			height: 32rpx;
			flex-shrink: 0;
			margin-right: 14rpx;
		}
	}

	.name {
		font-size: 26rpx;
		color: #1A1A1A;
	}

	.text {
		font-size: 22rpx;
		color: #87868E;
		line-height: 24rpx;
		margin-top: 4rpx;
	}
}

.security-box {
	.title {
		.text {
			font-size: 22rpx;
			color: #87868E;
			margin-right: 10rpx;
		}
	}

	.content {
		margin-top: 30rpx;

		.icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 16rpx;
		}

		.label {
			font-size: 26rpx;
			color: #1A1A1A;
			line-height: 30rpx;
			font-weight: 700;
		}

		.tag-box {
			width: 100%;
			height: 64rpx;
			margin-top: 24rpx;
			background-color: #F7F8FC;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 0 18rpx;
			font-size: 26rpx;
			color: #1A1A1A;

			.desc {
				font-size: 22rpx;
				color: #87868E;
				margin-left: 16rpx;
				margin-right: 10rpx;
			}
		}
	}

}

.plus-box {
	padding: 30rpx 24rxp;
	background: linear-gradient(181deg, #FDF3EA 0%, #FFFFFF 100%);
	height: 140rpx;

	.plus-logo {
		width: 42rpx;
		height: 26rpx;
	}

	.plus-text {
		width: 126rpx;
		height: 26rpx;
		margin-left: 8rpx;
	}

	.dot {
		display: inline-block;
		width: 6rpx;
		height: 6rpx;
		background: #342D27;
		border-radius: 50%;
		margin: 0 12rpx;
	}

	.text {
		margin-top: 20rpx;
		font-size: 22rpx;
		color: #87868E;
		line-height: 22rpx;
	}
}

.upload-screenshot-box {
	width: 100%;
	flex: 1;
	// height: 540rpx;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;

	.upload-screenshot {
		width: 92rpx;
		height: 92rpx;
	}

	.upload-screenshot-content {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;

		.upload-screenshot-text {
			font-size: 36rpx;
			color: #1777FF;
			line-height: 50rpx;
			margin-top: 16rpx;
		}
	}
}

.placeholder {
	height: 104rpx;
	height: calc(104rpx + env(safe-area-inset-bottom));
	height: calc(104rpx + constant(safe-area-inset-bottom));
}

.fixed-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 0 24rpx;
	padding-top: 16rpx;
	width: 100%;
	min-height: 90rpx;
	min-height: calc(90rpx + env(safe-area-inset-bottom));
	min-height: calc(90rpx + constant(safe-area-inset-bottom));
	padding-bottom: 16rpx;
	background-color: #FFFFFF;
	border-top: 0.5px solid #F2F2F2;

	text {
		font-size: 26rpx;
		color: #4C4C4C;
	}

	.btn-box {
		color: #ffffff;

		.bottom-btn {
			width: 152rpx;
			height: 60rpx;
			border-radius: 8rpx;
			border: 0.5px solid #C7C7C7;
			color: #1A1A1A;
			margin-left: 16rpx;
			text-align: center;
			font-size: 26rpx;
			line-height: 58rpx;
			margin-bottom: 10rpx;
		}

		.red {
			background-color: #FE0F24;
			color: #FFFFFF;
			border: none;
			line-height: 60rpx;
		}
	}

	.big-btn {
		font-size: 32rpx;
		padding: 0 124rpx;
		height: 80rpx;
		background-color: #FE0F24;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;

		.money {
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin-left: 10rpx;
		}
	}
}

.order-info-box {
	margin: 16rpx;
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 28rpx 22rpx;

	&.product-info-box {
		padding: 0;
		margin: 0;
	}

	.title {
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 30rpx;
		font-weight: 700;
	}

	.order-info {
		padding-bottom: 34rpx;

	}

	.delivery-info {
		border-top: 0.5px solid #F2F2F2;
	}

	.item {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		height: 38rpx;

		.label {
			font-size: 26rpx;
			color: #87868E;
			line-height: 26rpx;
		}

		.value {
			font-size: 26rpx;
			color: #1A1A1A;
			line-height: 26rpx;
			text-align: right;
		}
	}
}
</style>
