<template>
	<view class="top-bg">
		<nav-bar title="" bgColor="#FFFFFF" isBack :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton"
			tipLayerType="jingdong-waimai-order-detail-tip" isTipLayer tipLayerText="编辑订单信息">
			<template v-slot:right>
				<view v-if="order.type != 'weizhifu'" class="right-icon-box flex">
					<image class="icon" src="/static/image/shopping/jingdong/waimai/fenxiang.png"></image>
					<image class="icon" v-if="order.type != 'yiwancheng' && order.type != 'yiqvxiao'"
						style="margin-left: 40rpx;" src="/static/image/shopping/jingdong/waimai/shuaxin.png"></image>
				</view>
			</template>
			<template v-slot:left>
				<view class="flex-align-center">
					<image @click="util.goBack()" class="icon" style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"
						src="/static/image/shopping/jingdong/waimai/back.png"></image>
					<text class="title-text" v-if="showNavTitle">{{ titleText }}</text>
				</view>
			</template>
		</nav-bar>
		<!-- 未支付 -->
		<view v-if="order.type == 'weizhifu'" class="weizhifu-card card">
			<view class="title">请在 {{ order.statusDesc || '29:39' }} 内支付</view>
			<view class="time">现在支付，预计 <text class="time-text">{{ order.deliveryTime }}</text> 送达</view>
			<view class="flex flex-justify-between flex-align-center" style="margin-top: 32rpx;">
				<text style="font-size: 24rpx; color: #87868E;">更多</text>
				<view class="flex flex-align-center">
					<view class="btn cancel-btn">取消订单</view>
					<view class="btn pay-btn">立即支付 ¥{{ (Number(order.totalPrice) + Number(order.carriage)) ?
						(Number(order.totalPrice)
							+ Number(order.carriage)).toFixed(2) :
						0 }}</view>
				</view>
			</view>
		</view>
		<!-- 备餐中/取餐中 -->
		<view v-if="order.type == 'beicanzhong' || order.type == 'qvcanzhong'" class="card-box">
			<view class="card beicanzhong-card">
				<view class="title flex">
					<text class="time">{{ order.trackingTitle || '-' }}</text>
					<text>预计送达</text>
				</view>
				<view class="desc">{{ order.trackingDesc || (order.type == 'qvcanzhong' ? '骑手已到店，取餐中' : '商家备餐中') }}
				</view>
				<view class="progress">
					<view class="progress-bar">
						<view class="progress-bar-fill" :style="{ width: order.type == 'qvcanzhong' ? '70%' : '50%' }">
						</view>
						<image class="progress-icon fukuan" src="/static/image/shopping/jingdong/waimai/fukuan.png">
						</image>
						<image class="progress-icon beican" src="/static/image/shopping/jingdong/waimai/beican.png">
						</image>
						<image class="progress-icon songcan"
							:src="`/static/image/shopping/jingdong/waimai/${order.type == 'qvcanzhong' ? 'qvcan' : 'songcan'}.png`">
						</image>
						<image class="progress-icon qianshou" src="/static/image/shopping/jingdong/waimai/qianshou.png">
						</image>
					</view>
				</view>
				<view class="image-box flex-center">
					<image v-if="order.deliveryImages" class="w100 h100" :src="order.deliveryImages" mode="widthFix">
					</image>
				</view>
				<view class="btn-box flex-align-center">
					<view class="btn">查看发票</view>
					<view class="btn">订单跟踪</view>
					<view class="btn">申请退款</view>
					<view class="btn">联系商家</view>
				</view>
			</view>
			<view class="notice-box flex-align-center">
				<image class="icon" src="/static/image/shopping/jingdong/waimai/notice.png" mode="aspectFill"></image>
				<text class="flex-1 notice-text">开启系统通知，第一时间获取订单聊天信息</text>
				<view class="open-btn">去开启</view>
			</view>
		</view>
		<!-- 已完成/已取消 -->
		<view v-if="order.type == 'yiwancheng' || order.type == 'yiquxiao'" class="weizhifu-card card yiwancheng">
			<view class="title flex-align-center">{{ order.type == 'yiwancheng' ? '订单已完成' : '订单已取消' }} <uni-icons
					style="margin-left: 6rpx;" type="right" size="12" color="#1A1A1A"></uni-icons>
			</view>
			<view v-if="order.type == 'yiwancheng'" class="desc">订单已送达，请厉行节约，拒绝浪费，期待能再次光临</view>
			<view v-if="order.type == 'yiquxiao'" class="desc quxiao">抱歉本次未能让您满意，我们会努力改进</view>
			<view class="flex flex-justify-between flex-align-center" style="margin-top: 32rpx;">
				<text style="font-size: 24rpx;color: #87868E;line-height: 24rpx;">{{ order.type == 'yiwancheng' ? '更多' :
					'' }}</text>
				<view class="flex flex-align-center">
					<view v-if="order.type == 'yiquxiao'" class="btn cancel-btn">删除订单</view>
					<view class="btn cancel-btn">联系商家</view>
					<view v-if="order.type == 'yiwancheng'" class="btn cancel-btn">联系骑手</view>
					<view v-if="order.type == 'yiwancheng'" class="btn cancel-btn primary">评价晒单</view>
					<view class="btn cancel-btn primary">再次购买</view>
				</view>
			</view>

		</view>
		<!-- 已取消 -->
		<view v-if="order.type == 'yiquxiao'" 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>

	<view v-if="order.type == 'weizhifu'" class="card location-box flex flex-justify-between flex-align-center">
		<view>
			<view class="card-title">
				<image class="location-icon" src="/static/image/shopping/jingdong/waimai/location.png">
				</image>
				<text class="name">{{ order.consignee || '收货人' }}</text>
				<text class="phone">{{ maskPhone(order.phone) }}</text>
				<text class="desc">号码保护中</text>
			</view>
			<view class="loction-text">
				{{ order.address || '暂无收货地址' }}
			</view>
		</view>
		<view class="edit-btn">修改</view>
	</view>

	<!-- 推荐商品 -->
	<view class="shop-recommend flex-center">
		<image v-if="!order.recommendImg" class="w100 h100"
			src="/static/image/shopping/jingdong/waimai/shop-recoomend/style-1.png" mode="aspectFit"></image>
		<image v-else class="w100 h100" :src="order.recommendImg" mode="aspectFit"></image>
	</view>

	<!-- 订单详细信息列表 -->
	<view v-if="order.activeTab != 'weizhifu' && order.activeTab != 'yiquxiao'" class="card order-detail-info"
		style="padding-bottom: 30rpx;">
		<view class="title flex-justify-between flex-align-center"
			style="font-size: 30rpx; font-weight: 700; color: #1A1A1A; margin-bottom: 20rpx;"
			@click="isOrderExpanded = !isOrderExpanded">
			<text>订单信息</text>
		</view>
		<view class="info-list" style="padding-bottom: 32rpx;">
			<view v-if="order.type != 'yiwancheng'" class="info-item  flex" style="margin-top: 24rpx;">
				<text class="label" style="font-size: 26rpx; color: #4D4D4D;">期望时间</text>
				<text class="value" style="font-size: 26rpx; color: #4D4D4D;  flex: 1; margin-left: 40rpx;">{{
					order.productsInfo.deliveryTime }}</text>
			</view>
			<view class="info-item  flex" style="margin-top: 24rpx;">
				<text class="label" style="font-size: 26rpx; color: #4D4D4D;">配送地址</text>
				<text class="value" style="font-size: 26rpx; color: #4D4D4D;  flex: 1; margin-left: 40rpx;">{{
					order.address
				}}</text>
			</view>
			<template v-if="isOrderExpanded">
				<view class="info-item  flex" style="margin-top: 24rpx;">
					<text class="label" style="font-size: 26rpx; color: #4D4D4D;">餐具数量</text>
					<text class="value"
						style="font-size: 26rpx; color: #4D4D4D;  flex: 1; margin-left: 40rpx;">商家按餐量提供</text>
				</view>
				<view class="info-item  flex" style="margin-top: 24rpx;">
					<text class="label" style="font-size: 26rpx; color: #4D4D4D;">发票信息</text>
					<text class="value view-btn"
						style="font-size: 26rpx; color: #8A8A8A;  flex: 1; margin-left: 40rpx;">请查看发票信息</text>
				</view>
			</template>
		</view>
		<template v-if="isOrderExpanded">
			<view class="info-list number-protect">
				<view class="info-item  flex">
					<text class="label" style="font-size: 26rpx; color: #4D4D4D;">号码保护</text>
					<text class="value"
						style="font-size: 26rpx; color: #4D4D4D;  flex: 1; margin-left: 40rpx;">保护隐私，服务护航</text>
				</view>
			</view>
			<view class="info-list" style="padding-bottom: 32rpx;">
				<view class="info-item flex " v-for="(info, i) in order.orderInfo" :key="i" style="margin-top: 24rpx;">
					<text class="label" style="font-size: 26rpx; color: #4D4D4D;">{{ info.label }}</text>
					<text class="value flex-align-center" :class="{ 'copy-btn': info.label == '订单编号' }"
						style="font-size: 26rpx; color: #4D4D4D;  flex: 1; margin-left: 40rpx;">{{
							info.value
						}}<uni-icons v-if="info.label == '支付方式' || info.label == '交易快照'" style="margin-left: 6rpx;"
							type="right" size="10" color="#4D4D4D"></uni-icons></text>
				</view>
			</view>
		</template>
		<view class="flex-center bottom-text" @click=" isOrderExpanded = !isOrderExpanded">
			<text>{{ isOrderExpanded ? '点击收起' : '配送骑士/支付方式等' }}</text>
			<uni-icons style="margin-left: 6rpx;" :type="isOrderExpanded ? 'up' : 'down'" color="#87868E"
				size="10"></uni-icons>
		</view>
	</view>

	<!-- 商品卡片 -->
	<view class="product-card">
		<view class="title-box">
			<view class="left-box">
				<image class="img" src="/static/image/shopping/jingdong/waimai/waimai.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 flex-align-center" v-for="(item, i) in order.products" :key="i">
			<view class="image-box shrink-0">
				<image v-if="item" class="w100 h100" :src="item.image" mode="widthFix">
				</image>
			</view>
			<view class="flex-1 flex" style="width:100px">
				<view class="info-box">
					<view class="name">{{ item.title }}</view>
					<view v-if="item.desc" class="desc">{{ item.desc }}</view>
					<view v-if="item.count" class="tag">数量x{{ item.count }}</view>
				</view>
				<view class="price-box">
					<view v-if="(order.status != '等待付款' && order.status != '已取消') && order.discount > 0"
						class="flex-center" style="display: inline-flex;">
						<image style="width: 22rpx;height: 22rpx;margin-right: 4rpx;"
							src="/static/image/shopping/jingdong/detail/help.png">
						</image>
						<text
							style="font-size: 22rpx;height: 22rpx;color: #1A1A1A;line-height: 22rpx;margin-right: 2rpx;">到手</text>
					</view>
					<text class="price wx-font-medium">
						<text style="font-size: 28rpx;">￥</text>
						<text style="font-size: 32rpx;">
							{{ order.status == '等待付款' ||
								order.status == '已取消' ?
								Number(item.price || 0).toFixed(2).split('.')[0] :
								Number((item.price || 0) - (item.discount || 0)).toFixed(2).split('.')[0] }}
						</text>
						<text style="font-size: 36rpx;">.</text>
						<text style="font-size: 24rpx;">
							{{ order.status == '等待付款' ||
								order.status == '已取消' ?
								Number(item.price || 0).toFixed(2).split('.')[1] :
								Number((item.price || 0) - (item.discount || 0)).toFixed(2).split('.')[1] }}
						</text>

					</text>
					<view v-if="(order.status != '等待付款' && order.status != '已取消') && (item.discount || 0) > 0"
						class="wx-font-medium"
						style="margin-top: 2rpx;text-align: right;color: #87868E;font-weight: 500;">
						<text style="font-size: 24rpx;">
							<text style="font-size: 20rpx;">￥</text>
							<text style="font-size: 24rpx;">{{ Number(item.discount || 0).toFixed(2).split('.')[0]
							}}</text>
							<text style="font-size: 24rpx;">.</text>
							<text style="font-size: 20rpx;">{{ Number(item.discount || 0).toFixed(2).split('.')[1]
							}}</text>
						</text>
					</view>
				</view>
			</view>

		</view>
		<view v-if="order.activeTab == 'weizhifu' || order.activeTab == 'yiquxiao'" class="order-info"
			style="margin-top: 36rpx;">
			<view class="item flex-justify-between">
				<text class="label shrink-0">餐具数量</text>
				<view class="flex-1 flex-align-center" style="justify-content: flex-end; margin-left: 20rpx;">
					<text class="value">{{ order.productsInfo.cutleryCount }}</text>
				</view>
			</view>
			<view class="item flex-justify-between">
				<text class="label shrink-0">配送偏好</text>
				<view class="flex-1 flex-align-center" style="justify-content: flex-end; margin-left: 20rpx;">
					<text class="value">{{ order.productsInfo.deliveryPreference }}</text>
				</view>
			</view>
			<view class="item flex-justify-between">
				<text class="label shrink-0">如遇缺货</text>
				<view class="flex-1 flex-align-center" style="justify-content: flex-end; margin-left: 20rpx;">
					<text class="value">{{ order.productsInfo.outOfStock }}</text>
				</view>
			</view>
		</view>
		<view v-else class="order-info " style="margin-top: 50rpx;">
			<view class="item flex-justify-between">
				<text class="label shrink-0" style="color: #545454;">商品总价</text>
				<view class="flex-1 flex-align-center"
					style="justify-content: flex-end; margin-left: 20rpx;font-weight: 500;">
					<text class="value wx-font-medium">￥{{ order.totalPrice }}</text>
				</view>
			</view>
			<view class="item flex-justify-between">
				<view class="flex flex-align-center">
					<text class="label" style="color: #545454;">运费</text>
					<image style="width: 22rpx;height: 22rpx;margin-right: 4rpx;margin-left: 4rpx;"
						src="/static/image/shopping/jingdong/detail/help.png">
					</image>
				</view>

				<view class="wx-font-medium flex flex-align-center">
					<text v-if="order.discountCarriage && Number(order.discountCarriage) > 0"
						style="color: #F10F1A;">已减￥{{
							order.discountCarriage }}</text>
					<text v-if="order.discountCarriage && Number(order.discountCarriage) > 0"
						style="margin: 0 12rpx;color: #8E8E8E;text-decoration: line-through;">￥{{
							order.discountCarriage }}</text>
					<text style="color: #1A1A1A;font-weight: 500;">{{ !Number(order.carriage) || Number(order.carriage)
						<= 0 ? '免运费' : '运费￥' + order.carriage }}</text>
							<uni-icons type="down" size="10" color="#1A1A1A" style="margin-left: 6rpx;"></uni-icons>
				</view>
			</view>
			<view v-if="order.packagingFee && Number(order.packagingFee) > 0" class="item flex-justify-between">
				<text class="label shrink-0" style="color: #545454;">打包费</text>
				<view class="flex-1 flex-align-center wx-font-medium"
					style="justify-content: flex-end; margin-left: 20rpx;font-weight: 500;">
					<text class="value valuewx-font-medium">￥{{ order.packagingFee || '0.00' }}</text>
				</view>
			</view>
			<view class="item flex-justify-between total-box">
				<text class="label shrink-0" style="color: #545454;">合计</text>
				<view class="flex-1 flex-align-center"
					style="justify-content: flex-end; margin-left: 20rpx;font-weight: 500;">
					<text v-if="Number(order.discount) + Number(order.discountCarriage) > 0" class=" red">共减￥{{
						Number(order.discount) + Number(order.discountCarriage)
					}}</text>
					<text class="wx-font-medium money">
						<text style="font-size: 28rpx;">￥</text>
						<text style="font-size: 36rpx;">{{ Number(order.amountTo).toFixed(2).split('.')[0] }}.</text>
						<text style="font-size: 24rpx;">{{ Number(order.amountTo).toFixed(2).split('.')[1] }}</text>
					</text>
				</view>
			</view>
		</view>

		<view class="flex-center bottom-text" style="margin-top: 40rpx;"><text>点击收起</text><uni-icons
				style="margin-left: 6rpx;" type="up" color="#87868E" size="10"></uni-icons>
		</view>

	</view>

	<!-- 待付款/已取消商品总价 -->
	<view v-if="order.activeTab == 'weizhifu' || order.activeTab == 'yiquxiao'" class="product-price">
		<view class="title flex-justify-between">
			<text>商品总价</text>
			<view class="wx-font-medium flex flex-align-center"><text
					style="font-size: 32rpx;font-weight: 500;">￥<text>{{
						order.totalPrice }}</text></text>

			</view>
		</view>
		<view class="item flex-justify-between">
			<view class="flex flex-align-center">
				<text class="label">运费</text>
				<image style="width: 22rpx;height: 22rpx;margin-right: 4rpx;margin-left: 4rpx;"
					src="/static/image/shopping/jingdong/detail/help.png">
				</image>
			</view>

			<view class="wx-font-medium flex flex-align-center">
				<text v-if="order.discountCarriage && Number(order.discountCarriage) > 0" style="color: #F10F1A;">已减￥{{
					order.discountCarriage }}</text>
				<text v-if="order.discountCarriage && Number(order.discountCarriage) > 0"
					style="margin: 0 12rpx;color: #8E8E8E;text-decoration: line-through;">￥{{
						order.discountCarriage }}</text>
				<text style="color: #1A1A1A;">{{ !Number(order.carriage) || Number(order.carriage) <= 0 ? '免运费' : '运费￥'
					+ order.carriage }}</text>
						<uni-icons type="down" size="10" color="#1A1A1A" style="margin-left: 6rpx;"></uni-icons>
			</view>
		</view>
		<view class="price">
			<view class="label">合计</view>
			<view>
				<text v-if="Number(order.discount) + Number(order.discountCarriage) > 0" class="number wx-font-medium"
					style="font-size: 32rpx;">共减￥{{
						Number(order.discount) + Number(order.discountCarriage)
					}}</text>
				需付款 <text class="number wx-font-medium">
					￥{{ (Number(order.totalPrice) + Number(order.carriage)) ?
						(Number(order.totalPrice)
							+ Number(order.carriage)).toFixed(2) :
						0 }}</text>
			</view>
		</view>

	</view>

	<!-- 订单详细信息列表 -->
	<view v-if="order.activeTab == 'weizhifu' || order.activeTab == 'yiquxiao'" class="card order-detail-info"
		style="padding-bottom: 30rpx;">
		<view class="title flex-justify-between flex-align-center"
			style="font-size: 30rpx; font-weight: 700; color: #1A1A1A; margin-bottom: 20rpx;">
			<text>订单信息</text>
			<view v-if="order.activeTab == 'weizhifu' || order.activeTab == 'yiquxiao'" class="flex flex-align-center"
				style="font-size: 22rpx; color: #87868E;font-weight: 400;">收起
				<uni-icons style="margin-left: 10rpx;" type="up" size="10" color="#1A1A1A"></uni-icons>
			</view>
		</view>
		<view></view>
		<view class="info-list">
			<view class="info-item flex flex-justify-between" v-for="(info, i) in order.orderInfo" :key="i"
				style="margin-top: 24rpx;">
				<text class="label" style="font-size: 26rpx; color: #87868E;">{{ info.label }}</text>
				<text class="value"
					style="font-size: 26rpx; color: #1A1A1A; text-align: right; flex: 1; margin-left: 40rpx;">{{
						info.value
					}}</text>
			</view>
		</view>
	</view>

	<!-- 快速解决问题 -->
	<view v-if="order.type != 'weizhifu'" class="card quickly-solve-problems">
		<view class="title flex-justify-between flex-align-center"
			style="font-size: 30rpx; font-weight: 700; color: #1A1A1A; margin-bottom: 20rpx;">
			<text>快速解决问题</text>
		</view>
		<view class="btn-box flex flex-align-center">
			<view class="btn flex-1">什么时候送达</view>
			<view class="btn flex-1">可以取消订单吗？</view>
			<view class="btn">更多</view>
		</view>
	</view>

	<!-- 安心保障 -->
	<view v-if="order.type == 'beicanzhong' || order.type == 'qvcanzhong'" class="card quickly-solve-problems"
		style="margin-top: 16rpx;">
		<view class="title flex-justify-between flex-align-center"
			style="font-size: 30rpx; font-weight: 700; color: #1A1A1A; margin-bottom: 20rpx;">
			<text>安心保障</text>
		</view>
		<view class="flex">
			<image style="width: 36rpx;height: 36rpx;margin-right: 16rpx;"
				src="/static/image/shopping/jingdong/waimai/baozhang.png">
			</image>
			<view class="flex-1">
				<view class="flex-justify-between flex-align-center">
					<text>售后保障</text>
					<uni-icons type="right" size="10" color="#87868E"></uni-icons>
				</view>
				<view class="main-container flex-align-center">
					<text style="margin-right: 18rpx;">食安险</text>
					<text class="flex-1" style="color: #87868E;font-size: 22rpx;line-height: 26rpx;">食品安全问题高效理赔</text>
					<text style="color: #1A1A1A;font-size: 22rpx;color: #87868E;">去看看</text>
					<uni-icons type="right" size="10" color="#87868E"></uni-icons>
				</view>
			</view>
		</view>
	</view>

	<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="w100" :src="screenshotImage" mode="widthFix"></image>
		</view>
	</view>
	<view class="" :style="{'height':$store.state.safeBottomAz+'px'}">
		
	</view>

	<view v-if="order.status == '等待付款'" class="fixed-bottom">
		<view class="btn-box" :style="{'margin-bottom':$store.state.safeBottomAz+'px'}">
			<view class="big-btn wx-font-medium">立即支付¥{{ (Number(order.totalPrice) +
				Number(order.carriage)) ?
				(Number(order.totalPrice)
					+ Number(order.carriage)).toFixed(2) :
				0 }} </view>
		</view>
	</view>
	<view v-if="order.status == '等待付款'" class="placeholder" ></view>

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

</template>

<script setup>
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
import { ref, computed, onUnmounted, nextTick, reactive, toRefs } from "vue";
import NavBar from "@/components/nav-bar/nav-bar.vue";
import { util } from '@/utils/common.js';

const data = reactive({
	order: {},
	id: "",
	showNavTitle: false,
	isOrderExpanded: false
})
let {
	order,
	id,
	showNavTitle,
	isOrderExpanded
} = toRefs(data);
const screenshotImage = ref('');

let countdownTimer = null;

const titleText = computed(() => {
	if (order.value.type == 'weizhifu') {
		return '请在' + order.value.statusDesc + '内支付'
	} else if (order.value.type == 'beicanzhong' || order.value.type == 'qvcanzhong') {
		return `${order.value.trackingTitle}预计送达`
	} else if (order.value.type == 'yiquxiao') {
		return "订单已取消"
	} else if (order.value.type == 'yiwancheng') {
		return "已完成"
	}
	return ''
})

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

	// 解析时间字符串 "mm:ss" 或 "HH:mm:ss" 为秒数
	const parseTimeToSeconds = (timeStr) => {
		if (!timeStr) return 0;
		const parts = timeStr.replace(/\s/g, '').split(':').map(n => parseInt(n));
		let seconds = 0;
		if (parts.length === 3) {
			seconds = parts[0] * 3600 + parts[1] * 60 + parts[2];
		} else if (parts.length === 2) {
			seconds = parts[0] * 60 + parts[1];
		}
		return isNaN(seconds) ? 0 : seconds;
	};

	// 格式化秒数为 "mm:ss"
	const formatSecondsToTime = (totalSeconds) => {
		if (totalSeconds <= 0) return "00 : 00";
		const m = Math.floor((totalSeconds % 3600) / 60);
		const s = totalSeconds % 60;
		const pad = (n) => String(n).padStart(2, '0');
		return `${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";
			clearInterval(countdownTimer);
		} else {
			order.value.statusDesc = formatSecondsToTime(remainingSeconds);
		}
	}, 1000);
};

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

onShow(() => {
	// 读取缓存的截图
	const cachedImage = uni.getStorageSync('jingdong_screenshot');
	if (cachedImage) {
		screenshotImage.value = cachedImage;
	}
	console.log('screenshotImage', screenshotImage.value)

	if (id.value) {
		loadOrderDetail(id.value);
	}
});

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

onLoad((options) => {
	console.log('详情页参数:', options);
	if (options.id) {
		id.value = options.id
		loadOrderDetail(options.id);
	}
});

onPageScroll((e) => {
	data.showNavTitle = e.scrollTop > 20;
});

/**
 * 手机号脱敏处理
 */
const maskPhone = (phone) => {
	if (!phone) return '';
	const p = String(phone);
	if (p.length < 7) return p;
	// 动态计算星号数量，保持展示长度一致性或保留两端
	return p.substring(0, 3) + '****' + p.substring(p.length - 4);
};

/**
 * 加载订单详情
 */
const loadOrderDetail = (id) => {
	const list = uni.getStorageSync('jingdongShopping') || [];
	const item = list.find(it => String(it.id) === String(id));

	if (item) {
		// 状态与模板标识映射
		const statusMap = {
			'等待付款': 'weizhifu',
			'商家备餐中': 'beicanzhong',
			'骑手到店取餐中': 'qvcanzhong',
			'完成': 'yiwancheng',
			'已完成': 'yiwancheng',
			'已取消': 'yiquxiao'
		};

		item.type = statusMap[item.status] || 'yiquxiao';
		data.order = item;

		// 启动倒计时逻辑
		if (item.status === '等待付款' && item.statusDesc) {
			nextTick(() => {
				initCountdown();
			});
		}
	} else {
		uni.showToast({
			title: '订单不存在',
			icon: 'none'
		});
	}
};
</script>

<style scoped lang="less">
.top-bg {
	::v-deep .uni-navbar__header-btns-right {
		width: 100px !important;
	}

	::v-deep .uni-navbar__header-btns-left {
		flex: 10;
		font-size: 36rpx;
		color: #1A1A1A;
		line-height: 36rpx;
		font-weight: 500;
	}
}


.right-icon-box {
	// margin-right: 12rpx;

	.icon {
		width: 40rpx;
		height: 40rpx;
	}
}

.top-bg {
	background-image: url('/static/image/shopping/jingdong/waimai/bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.title-text {
	width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

}

/* 确保页面整体拥有与渐变终点一致的背景色 */
:deep(page),
page {
	background-color: #F2F3F7;
	min-height: 100vh;
}

.card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx 22rpx;
	margin: 0 16rpx;


}

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

	.time {
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 30rpx;
		margin-top: 26rpx;
		font-weight: 500;

		.time-text {
			color: #F10F1A;
		}
	}

	.btn {

		padding: 0 20rpx;
		border-radius: 8rpx;
		margin-left: 16rpx;
		background-color: #fff;
		font-size: 26rpx;
		line-height: 60rpx;
		color: #1a1a1a;
		flex-shrink: 0;
		font-weight: 500;
		border: 0.5px solid #C7C7C7;

		&.pay-btn {
			width: 380rpx;
			border: none;
			color: #fff;
			text-align: center;
			background: linear-gradient(87deg, #FF435B 0%, #FE1528 100%);
		}
	}
}

.location-box {
	margin-top: 16rpx;
	padding: 26rpx 22rpx;

	.location-icon {
		width: 26rpx;
		height: 26rpx;
	}

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

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

	.desc {
		background-color: #F3F3F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 22rpx;
		line-height: 22rpx;
		color: #1A1A1A;
		padding: 6rpx 8rpx;
		margin-left: 16rpx;
	}

	.loction-text {
		margin: 10rpx 0 0 42rpx;
		font-size: 26rpx;
		color: #87868E;
		line-height: 40rpx;
	}

	.edit-btn {
		text-align: center;
		line-height: 52rpx;
		padding: 0 54rpx;
		font-size: 22rpx;
		white-space: nowrap;
		border-radius: 8rpx;
		margin-left: 26rpx;
		border: 0.5px solid #C7C7C7;
	}
}

.card-box {
	margin: 0 16rpx;
	background-color: #F6F7FB;
	border: 2rpx solid #FFFFFF;
	border-radius: 24rpx;
}

.beicanzhong-card {
	padding: 24rpx 20rpx;
	margin: 0;

	.title {
		font-size: 26rpx;
		color: #1A1A1A;
		font-weight: 500;
		align-items: flex-end;

		.time {
			font-size: 60rpx;
			color: #1A1A1A;
			line-height: 52rpx;
			font-weight: 500;
			margin-right: 12rpx;
		}

	}

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

	.progress {
		margin-top: 34rpx;
		margin: 34rpx 27rpx 0;

		.progress-bar {
			position: relative;
			width: 100%;
			height: 24rpx;
			background-color: #F2F2F4;
			border-radius: 0rpx;

			.progress-bar-fill {
				width: 50%;
				height: 100%;
				background-color: #FE0F22;
			}

			.progress-icon {
				position: absolute;
				width: 54rpx;
				height: 54rpx;
			}

			.fukuan {
				left: 0;
				top: 50%;
				transform: translate(-50%, -50%);
			}

			.beican {
				left: calc(30.3% - 27rpx/2);
				top: 50%;
				transform: translateY(-50%);
			}

			.songcan {
				left: calc(60.6% + 27rpx/2);
				top: 50%;
				transform: translateY(-50%);
			}

			.qianshou {
				right: 0;
				top: 50%;
				transform: translate(50%, -50%);
			}

		}
	}

	.image-box {
		width: 100%;
		height: 432rpx;
		background-color: #F2F2F2;
		margin-top: 40rpx;
		border-radius: 28rpx;
		overflow: hidden;

		.add-img {
			width: 112rpx;
			height: 112rpx;
		}
	}

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

		.btn {
			font-size: 22rpx;
			color: #1A1A1A;
			line-height: 62rpx;
			border: 0.5px solid #C7C7C7;
			padding: 0 16rpx;
			margin-left: 16rpx;
			border-radius: 8rpx;
		}
	}
}

.notice-box {
	padding: 20rpx 26rpx;

	.icon {
		width: 26rpx;
		height: 26rpx;
	}

	.notice-text {
		font-size: 22rpx;
		color: #4D4D4D;
		line-height: 22rpx;
		margin: 0 10rpx;
	}

	.open-btn {
		font-size: 22rpx;
		color: #4D4D4D;
		line-height: 22rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #ACACAC;
		padding: 10rpx 6rpx 8rpx;
	}
}

.yiwancheng {
	.title {
		font-weight: 700;
	}

	.desc {
		margin-top: 26rpx;
		font-size: 26rpx;
		color: #1A1A1A;
		line-height: 30rpx;

		&.quxiao {
			font-size: 26rpx;
			color: #87868E;
		}
	}

	.btn {
		font-size: 22rpx;
		line-height: 62rpx;
	}

	.primary {
		color: #ED1C04;
		border-color: #ED1C04;
	}
}

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

.shop-recommend {
	height: 208rpx;
	background-color: #FFFFFF;
	margin: 16rpx;
	border-radius: 24rpx;
	overflow: hidden;
}

.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;
		margin-bottom: 36rpx;

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

			.desc {
				margin-top: 16rpx;
				font-size: 22rpx;
				color: #87868E;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.tag {
				font-size: 22rpx;
				color: #8D8D8D;
				line-height: 22rpx;
				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;
	}


	.item {
		margin-top: 36rpx;

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

		.value {
			font-size: 26rpx;
			color: #1A1A1A;
			line-height: 26rpx;
		}
	}
}

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

	.title {
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 30rpx;
		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: space-between;
		margin-top: 32rpx;
		font-size: 26rpx;
		color: #ED1C04;
		line-height: 26rpx;
		font-weight: 500;
		align-items: baseline;

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

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


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

.fixed-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 16rpx 24rpx 8rpx;
	width: 100%;
	min-height: 90rpx;
	min-height: calc(90rpx + env(safe-area-inset-bottom));
	min-height: calc(90rpx + constant(safe-area-inset-bottom));
	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;
		width: 100%;
		height: 76rpx;
		background-color: #FE0F24;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;

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

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

.number-protect {
	padding: 30rpx 0;
	position: relative;

	&::before,
	&::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 1px;
		background-color: #EFEFEF;
		transform: scaleY(0.5);
	}

	&::before {
		top: 0;
		transform-origin: 0 0;
	}

	&::after {
		bottom: 0;
		transform-origin: 0 100%;
	}
}

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

.view-btn {
	position: relative;

	&::after {
		content: "查看";
		position: absolute;
		right: 0;
		width: 86rpx;
		height: 38rpx;
		font-size: 22rpx;
		color: #3D3D3D;
		border-radius: 8rpx;
		border: 1rpx solid #C2C2C2;
		text-align: center;
		line-height: 38rpx;
	}
}

.copy-btn {
	position: relative;

	&::after {
		content: "复制";
		position: absolute;
		right: 0;
		width: 86rpx;
		height: 38rpx;
		font-size: 22rpx;
		color: #3D3D3D;
		border-radius: 8rpx;
		border: 1rpx solid #C2C2C2;
		text-align: center;
		line-height: 38rpx;
	}
}

.total-box {
	position: relative;
	padding: 36rpx 0;
	padding-bottom: 0;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background-color: #EFEFEF;
		transform: scaleY(0.5);
		transform-origin: 0 0;
	}

	.red {
		color: #F10F1A;
		margin-right: 10rpx;
		font-size: 24rpx !important;
	}

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

	.value {
		font-size: 28rpx;
		color: #1A1A1A;
		line-height: 36rpx;
		font-weight: 500;
	}

	.money {
		font-size: 28rpx;
		color: #1A1A1A;
		line-height: 36rpx;
		font-weight: 500;
	}
}

.quickly-solve-problems {
	margin-top: 16rpx;

	.btn-box {
		justify-content: space-between;

		.btn {
			padding: 18rpx 30rpx;
			background-color: #F5F6FA;
			font-size: 26rpx;
			color: #1A1A1A;
			border-radius: 16rpx;
			margin: 0 8rpx;
			white-space: nowrap;
			text-align: center;
		}
	}

	.main-container {
		background-color: #F5F6FA;
		padding: 18rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
		color: #1A1A1A;
		font-size: 26rpx;
		line-height: 26rpx;
	}
}
</style>

<style>
/* 直接在页面导入公共样式 */
@import '/common/main.css';
@import "@/common/specify-style.less";
</style>
