<template>
	<view>
		<NavBar :title="navTitle" bgColor="#F2F3F7" isRightButton @right-click="onConfirm"></NavBar>
		<view class="page-container">
			<view class="tab-box" v-if="!isEditMode">
				<view class="tab" :class="{ active: item.key == activeTab }" v-for="item in waimaiType" :key="item.key"
					@click="switchTab(item)">
					<text>{{ item.label }}</text>
				</view>
			</view>
			<!-- 未支付 -->
			<template v-if="activeTab == 'weizhifu'">
				<view class="weizhifu card">
					<view class="title">
						<picker mode="multiSelector" :range="countdownRange" :value="countdownValue"
							@change="handleCountdownChange">
							<text>请在{{ order.statusDesc || '29:59' }} <image class="edit-icon"
									src="/static/image/common/edit.png"></image>内支付</text>
						</picker>
					</view>
					<view class="time">现在支付，预计 <text class="time-text" @click="onDeliveryTimeClick('deliveryTime')">{{
						order.deliveryTime || '11:17-11:32' }}<image class="edit-icon"
								src="/static/image/common/edit.png"></image>
						</text> 送达</view>
					<!-- <view class="flex flex-justify-between flex-align-center" style="margin-top: 32rpx;">
						<text>更多</text>
						<view class="flex flex-align-center">
							<view class="btn cancel-btn">取消订单</view>
							<view class="btn pay-btn">立即支付 ¥14.5</view>
						</view>
					</view> -->
				</view>
				<view class="card location-box flex flex-justify-between flex-align-center">
					<view class="w100">
						<view class="card-title">
							<image class="location-icon" src="/static/image/shopping/jingdong/waimai/location.png">
							</image>
							<auto-width-input class="name" placeholder="请输入姓名" v-model="order.consignee"
								fontSize="30rpx" type="text" color="#1A1A1A" fontWeight="500" show-edit />
							<auto-width-input class="phone" placeholder="请输入号码" v-model="order.phone" fontSize="26rpx"
								type="number" color="#87868E" show-edit />
							<!-- <text class="desc">号码保护中</text> -->
						</view>
						<view class="loction-text">
							<auto-width-input class="value" placeholder="请输入收货地址" v-model="order.address"
								fontSize="26rpx" type="textarea" color="#87868E" show-edit />
						</view>
					</view>
				</view>
			</template>

			<!-- 备餐中/取餐中 -->
			<view v-if="activeTab == 'beicanzhong' || activeTab == 'qvcanzhong'" class="time-box"
				@click="onClickTrackingTime">
				<text style="color: #87868E;">{{ activeTab == 'beicanzhong' ? '备餐时间' : '取餐时间' }}
					<text style="color: #1A1A1A;font-weight: 500; margin-left: 10rpx;">{{
						order.trackingTime }}</text>
					<image class="edit-icon" src="/static/image/common/edit.png"></image>
				</text>
			</view>
			<view v-if="activeTab == 'beicanzhong' || activeTab == 'qvcanzhong'" class="card-box">

				<view class="card beicanzhong-card">
					<view class="title flex">
						<text class="time" @click="onDeliveryTimeClick('trackingTitle')">{{ order.trackingTitle ||
							'10:43-10:58'
						}}</text>
						<text>预计送达</text>
					</view>
					<view class="desc">
						<auto-width-input v-model="order.trackingDesc" fontSize="30rpx" fontWeight="500"
							placeholder="请输入描述信息" color="#1A1A1A" show-edit />
					</view>
					<view class="progress">
						<view class="progress-bar">
							<view class="progress-bar-fill"
								:style="{ width: activeTab == '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/${activeTab == '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" @click="chooseDeliveryImage">
						<image v-if="!order.deliveryImages" class="add-img" src="/static/image/common/add.png"
							mode="aspectFill">
						</image>
						<image v-else class="w100 h100" :src="order.deliveryImages" mode="aspectFill"></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 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>

		<text class="tips" style="margin-top: 24rpx;">*轻点可替换商品图片，长按可从相册中选择图片*</text>
		<!-- 推荐商品 -->
		<view class="shop-recommend flex-center" @click="toggleRecommendImg" @longpress="chooseRecommendImg">
			<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 class="product-card">
			<view class="title-box">
				<view class="left-box">
					<image class="img" src="/static/image/shopping/jingdong/waimai/waimai.png">
					</image>
					<view class="title flex animate-scale">
						<auto-width-input v-model="order.shopName" fontSize="26rpx" fontWeight="500"
							placeholder="请输入店铺名称" color="#1A1A1A" show-edit />
					</view>
				</view>
				<uni-icons class="right-icon" size="14" color="#1A1A1A" type="right"></uni-icons>
			</view>
			<!-- 商品列表 -->
			<view class="product-info-wrapper" v-for="(product, pIndex) in order.products" :key="pIndex">
				<view class="product-info">
					<view class="image-box" @click="chooseImage(pIndex)">
						<view v-if="!product.image" class="w100 h100 flex flex-center"
							style="background-color: #eeeeee;">
							<image style="width: 60rpx;height: 60rpx;" src="/static/image/common/add.png"></image>
						</view>
						<image v-else class="w100 h100" :src="product.image"></image>
					</view>
					<view class="info-box">
						<view class="name-row flex flex-justify-between">
							<auto-width-input class="name flex-1" v-model="product.title" fontSize="26rpx"
								fontWeight="500" placeholder="商品标题名称" color="#1A1A1A" show-edit type="textarea" />
							<uni-icons v-if="order.products.length > 1" type="trash" size="18" color="#FE1528"
								@click="deleteProduct(pIndex)" style="margin-left: 20rpx;"></uni-icons>
						</view>
						<view class="flex flex-align-center animate-scale">
							<auto-width-input class="desc" v-model="product.desc" type="textarea" fontSize="22rpx"
								placeholder="商品描述" color="#87868E" show-edit />
						</view>

						<view class="flex flex-align-center animate-scale">
							<auto-width-input class="desc" v-model="product.count" type="textarea" fontSize="22rpx"
								placeholder="请输入数量" color="#8D8D8D" show-edit />
						</view>
						<view class="flex flex-align-center animate-scale wx-font-medium"
							style="align-items: baseline;margin-top: 10rpx;">
							<text style="font-size: 28rpx;font-weight: 500;">￥</text>
							<auto-width-input class="flex-1 wx-font-medium" v-model="product.price" type="digit"
								fontSize="36rpx" placeholder="0.00" color="#1A1A1A" fontWeight="500" show-edit />
						</view>
					</view>
				</view>
				<view v-if="pIndex < order.products.length - 1" class="product-divider"></view>
			</view>

			<!-- 添加商品按钮 -->
			<view class="add-product-btn flex flex-center" @click="addProduct">
				<image class="icon" src="/static/image/common/add.png" style="width: 24rpx; height: 24rpx;"></image>
				<text>添加商品</text>
			</view>
			<view v-if="activeTab == 'weizhifu' || activeTab == 'yiquxiao'" class="order-info"
				style="margin-top: 24rpx;">
				<view class="item flex-justify-between">
					<text class="label shrink-0">餐具数量</text>
					<view class="flex-1 flex-align-center"
						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
						<auto-width-input class="value" v-model="order.productsInfo.cutleryCount" fontSize="26rpx"
							type="textarea" color="#1A1A1A" show-edit />
					</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;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
						<auto-width-input class="value" v-model="order.productsInfo.deliveryPreference" type="textarea"
							fontSize="26rpx" color="#1A1A1A" show-edit />
					</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;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
						<auto-width-input class="value" v-model="order.productsInfo.outOfStock" type="textarea"
							fontSize="26rpx" color="#1A1A1A" show-edit />
					</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 wx-font-medium"
						style="justify-content: flex-end; margin-left: 20rpx;font-weight: 500;">
						￥<auto-width-input class="wx-font-medium" v-model="order.totalPrice" fontSize="32rpx"
							placeholder="商品总价" color="#1A1A1A" fontWeight="500" type="digit" show-edit />
					</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 style="color: #F10F1A;">已减￥</text>
						<auto-width-input class="wx-font-medium" v-model="order.discountCarriage" fontSize="26rpx"
							placeholder="优惠运费" color="#F10F1A" fontWeight="500" type="digit" show-edit />
						<auto-width-input style="margin-left: 10rpx;" class="wx-font-medium" v-model="order.carriage"
							fontSize="26rpx" placeholder="运费" color="#1A1A1A" fontWeight="500" type="text" show-edit />
					</view>
				</view>
				<view 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;">
						￥<auto-width-input style="margin-left: 10rpx;" class="wx-font-medium"
							v-model="order.packagingFee" fontSize="26rpx" placeholder="打包费" color="#1A1A1A"
							fontWeight="500" type="text" show-edit />
					</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 class="red" style="color: #F10F1A;">共减￥<auto-width-input style="margin-left: 10rpx;"
								class="wx-font-medium" v-model="order.discount" fontSize="26rpx" placeholder="优惠"
								color="#F10F1A" fontWeight="500" type="text" show-edit /></text>
						<text class="wx-font-medium money" style="margin-left: 16rpx;font-size: 28rpx;">￥<text
								style="font-size: 36rpx;"><auto-width-input style="margin-left: 10rpx;"
									class="wx-font-medium" v-model="order.amountTo" fontSize="36rpx" placeholder="合计金额"
									color="#1A1A1A" fontWeight="500" type="text" show-edit /></text></text>
					</view>
				</view>
			</view>

		</view>

		<!-- 商品总价 -->
		<view v-if="activeTab == 'weizhifu' || 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>
					<auto-width-input class="wx-font-medium" v-model="order.totalPrice" fontSize="32rpx"
						placeholder="商品总价" color="#1A1A1A" fontWeight="500" type="digit" show-edit />
				</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 style="color: #F10F1A;">已减￥</text>
					<auto-width-input class="wx-font-medium" v-model="order.discountCarriage" fontSize="26rpx"
						placeholder="优惠运费" color="#F10F1A" fontWeight="500" type="digit" show-edit />
					<auto-width-input style="margin-left: 10rpx;" class="wx-font-medium" v-model="order.carriage"
						fontSize="26rpx" placeholder="运费" color="#1A1A1A" fontWeight="500" type="text" show-edit />
				</view>
			</view>
			<view class="price">
				<view class="label">合计</view>
				<view>
					共减<text class="number wx-font-medium" style="font-size: 32rpx;">￥<auto-width-input
							style="margin-left: 10rpx;" class="wx-font-medium" v-model="order.discount" fontSize="26rpx"
							placeholder="优惠运费" color="#F10F1A" fontWeight="500" type="text" show-edit /></text>
					需付款 <text class="number wx-font-medium">
						￥{{ order.amountTo || '0.00' }}</text>
				</view>
			</view>

		</view>

		<!-- 订单信息 -->
		<view class="order-info-box">
			<view class="title flex-justify-between">
				<text>订单信息</text>
			</view>
			<!-- 用户信息 -->
			<template v-if="activeTab != 'weizhifu' && activeTab != 'yiquxiao'">
				<view class="item flex-justify-between"
					@click="onClickItemInfo({ label: '期望时间', type: 'timeRange', key: 'deliveryTime' })">
					<text class="label shrink-0">期望时间</text>
					<view class="flex-1 flex-align-center"
						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
						<auto-width-input class="value" v-model="order.productsInfo.deliveryTime" fontSize="26rpx"
							type="text" color="#1A1A1A" show-edit />
					</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;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
						<auto-width-input class="value" v-model="order.address" fontSize="26rpx" type="textarea"
							color="#1A1A1A" show-edit />
					</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;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
						<auto-width-input class="value" v-model="order.productsInfo.cutleryCount" fontSize="26rpx"
							type="text" color="#1A1A1A" show-edit />
					</view>
				</view>
			</template>

			<view class="order-info">
				<view class="item flex-justify-between" v-for="item in order.orderInfo" @click="onClickItemInfo(item)">
					<text class="label shrink-0">{{ item.label }}</text>
					<view class="flex-1 flex-align-center"
						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
						<auto-width-input class="value" v-model="item.value" fontSize="26rpx" color="#1A1A1A"
							:type="item.type ? item.type : 'text'" show-edit />
					</view>
				</view>
			</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>

	<uni-popup ref="deliveryTimePopup" type="bottom">
		<view class="timeBox">
			<view class="titleBox">
				<view class="title" @click="closeDeliveryPopup">取消</view>
				<view class="btn" @click="confirmDeliveryTime">确定</view>
			</view>
			<view class="picker-container">
				<picker-view class="range-picker-view" :value="deliveryPickerValue" @change="onDeliveryPickerChange">
					<picker-view-column>
						<view class="picker-item" v-for="item in deliveryHours" :key="item">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="item in deliveryMinutes" :key="item">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item flex-center">-</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="item in deliveryHours" :key="item">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="item in deliveryMinutes" :key="item">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</uni-popup>

	<uni-popup ref="timepopup" type="bottom">
		<!-- 单点时间选择 -->
		<view v-if="selectItemInfo.type == 'time'" class="timeBox">
			<view class="titleBox">
				<view class="title" @click="closeTimePicker">取消</view>
				<view class="btn" @click="settmes">确定</view>
			</view>
			<DateTimePicker :defaultDate="datePickerData.selectDate" :minDate="datePickerData.startDate"
				:maxDate="datePickerData.endDate" :mode="4" @onChange="onChangeStartDate" />
		</view>

		<!-- 时间段选择 -->
		<view v-if="selectItemInfo.type == 'timeRange'" class="timeBox">
			<view class="titleBox">
				<view class="title" @click="closeTimePicker">取消</view>
				<view class="btn" @click="settmes">确定</view>
			</view>
			<view class="picker-container">
				<picker-view class="range-picker-view" :value="timeRangePickerData.rangeSelect"
					@change="onTimeRangeChange">
					<picker-view-column v-for="(col, colIdx) in timeRangePickerData.rangeCols" :key="colIdx">
						<view class="picker-item" v-for="(item, idx) in col" :key="idx">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, computed, watch, onMounted, nextTick, reactive, toRefs } from "vue";
import NavBar from "@/components/nav-bar/nav-bar.vue";
import { waimaiType, waimaiClassfiy } from "../json/order.json";
import AutoWidthInput from "@/components/common/auto-width-input.vue";
import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
import { stringUtil } from "@/utils/common.js";

const data = reactive({
	activeTab: 'weizhifu',
	order: {},
	isEditMode: false,
	currentId: ''
})
let { activeTab, order, isEditMode, currentId } = toRefs(data);

const navTitle = computed(() => isEditMode.value ? "修改外卖订单" : "新增外卖订单");

/**
 * 切换tab
 * @param index 
 */
/**
 * @param item 
 */
const switchTab = (item) => {
	// 备份当前数据用于跨页签恢复
	const oldData = JSON.parse(JSON.stringify(order.value));

	data.activeTab = item.key;
	order.value = JSON.parse(JSON.stringify(waimaiClassfiy[data.activeTab]));

	// 恢复基础通用字段
	if (oldData) {
		order.value.id = oldData.id || order.value.id;
		order.value.consignee = oldData.consignee || order.value.consignee;
		order.value.phone = oldData.phone || order.value.phone;
		order.value.fullAddress = oldData.fullAddress || order.value.fullAddress;
		order.value.shopName = oldData.shopName || order.value.shopName;
		order.value.shopType = oldData.shopType || order.value.shopType;

		// 恢复商品列表 (如果旧数据有商品，尝试继承，防止切 Tab 丢失已添加内容)
		if (oldData.products && oldData.products.length > 0) {
			order.value.products = JSON.parse(JSON.stringify(oldData.products));
		}

		// 恢复 orderInfo 中的手动输入值
		if (order.value.orderInfo && oldData.orderInfo) {
			order.value.orderInfo.forEach(newInfo => {
				const target = oldData.orderInfo.find(o => o.label === newInfo.label);
				if (target && target.value) {
					newInfo.value = target.value;
				}
			});
		}

		// 统一调用初始化逻辑补全缺失时间（下单、支付、交易、期望时间）
		initDefaultTimes();
	}
}

/**
 * 选择图片
 * @param index 商品索引
 */
const chooseImage = (index = 0) => {
	uni.chooseImage({
		count: 1,
		sizeType: ['original'],
		sourceType: ['album'],
		success: (res) => {
			const tempFile = res.tempFilePaths[0];

			// #ifdef APP-PLUS || MP-WEIXIN
			// App端/小程序端：将临时路径持久化
			uni.saveFile({
				tempFilePath: tempFile,
				success: (saveRes) => {
					order.value.products[index].image = saveRes.savedFilePath;
				},
				fail: () => {
					// 如果持久化失败，回退到临时路径
					order.value.products[index].image = tempFile;
				}
			});
			// #endif

			// #ifdef H5
			// H5端：直接使用临时路径 (Blob URL)
			order.value.products[index].image = tempFile;
			// #endif
		}
	});
};

const chooseDeliveryImage = () => {
	// 记录旧图路径用于清理
	const oldImagePath = order.value.deliveryImages;

	uni.chooseImage({
		count: 1,
		sizeType: ['original'],
		sourceType: ['album'],
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];

			// #ifdef H5
			// H5端直接使用，不进行持久化保存
			order.value.deliveryImages = tempFilePath;
			uni.showToast({ title: '上传预览成功', icon: 'success' });
			// #endif

			// #ifdef APP-PLUS || MP-WEIXIN
			uni.showLoading({ title: '处理图片中...' });
			// 将新图保存为持久化文件
			uni.saveFile({
				tempFilePath: tempFilePath,
				success: (saveRes) => {
					// 1. 设置新图片路径
					order.value.deliveryImages = saveRes.savedFilePath;

					// 2. 如果旧图是本地持久化文件，则物理删除它
					if (oldImagePath && (oldImagePath.includes('_doc') || oldImagePath.includes('store_') || oldImagePath.includes('at_'))) {
						uni.removeSavedFile({
							filePath: oldImagePath,
							success: () => console.log('旧配送图已清理:', oldImagePath),
							fail: (err) => console.error('旧图清理失败:', err)
						});
					}
					uni.showToast({ title: '上传成功', icon: 'success' });
				},
				fail: (err) => {
					console.error('保存图片失败:', err);
					order.value.deliveryImages = tempFilePath;
				},
				complete: () => {
					uni.hideLoading();
				}
			});
			// #endif
		}
	});
};

/**
 * 添加商品
 */
const addProduct = () => {
	if (!order.value.products) {
		order.value.products = [];
	}
	order.value.products.push({
		image: "",
		title: "",
		desc: "",
		service: "不支持7天无理由退货",
		price: "0.00",
		count: 1
	});
};

/**
 * 删除商品
 * @param index 
 */
const deleteProduct = (index) => {
	if (!order.value.products || order.value.products.length <= 1) return;
	order.value.products.splice(index, 1);
};

/**
 * 通用：检测并清理本地持久化文件
 */
const detectAndRemoveLocalFile = (path) => {
	if (!path) return;
	// 仅对沙盒路径执行物理删除
	if (path.includes('_doc') || path.includes('store_') || path.includes('at_')) {
		uni.removeSavedFile({
			filePath: path,
			success: () => console.log('本地冗余文件已物理清理:', path),
			fail: (err) => console.log('物理清理跳过或失败:', err)
		});
	}
};

/**
 * 切换推荐商品图片 (点击切换内置样式)
 */
const toggleRecommendImg = () => {
	const style1 = '/static/image/shopping/jingdong/waimai/shop-recoomend/style-1.png';
	const style2 = '/static/image/shopping/jingdong/waimai/shop-recoomend/style-2.png';

	// 如果当前是自定义路径，在切回内置样式前，先清理物理文件
	detectAndRemoveLocalFile(order.value.recommendImg);

	if (order.value.recommendImg === style1) {
		order.value.recommendImg = style2;
	} else {
		order.value.recommendImg = style1;
	}
};

// 推荐商品图选择逻辑 (直接持久化)
const chooseRecommendImg = () => {
	const oldImagePath = order.value.recommendImg;

	uni.chooseImage({
		count: 1,
		sizeType: ['original'],
		sourceType: ['album'],
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];

			// #ifdef H5
			order.value.recommendImg = tempFilePath;
			uni.showToast({ title: '更换预览成功', icon: 'success' });
			// #endif

			// #ifdef APP-PLUS || MP-WEIXIN
			uni.showLoading({ title: '处理图片中...' });
			uni.saveFile({
				tempFilePath: tempFilePath,
				success: (saveRes) => {
					// 1. 先清理旧的本地文件
					detectAndRemoveLocalFile(oldImagePath);

					// 2. 设置新路径
					order.value.recommendImg = saveRes.savedFilePath;

					uni.showToast({ title: '自定义图片成功', icon: 'success' });
				},
				fail: () => {
					order.value.recommendImg = tempFilePath;
				},
				complete: () => {
					uni.hideLoading();
				}
			});
			// #endif
		}
	});
};

const orderRef = ref(data.order);

// 初始化默认时间值与订单号
const initDefaultTimes = () => {
	if (!order.value) return;
	const now = new Date();
	const timeStr = formatTime(now);

	// 1. 初始化订单基本信息 (时间、订单编号)
	if (order.value.orderInfo) {
		order.value.orderInfo.forEach(item => {
			const label = item.label;
			// 填充时间
			if ((label === '下单时间' || label === '支付时间' || label === '交易时间') && (!item.value || item.value.trim() === '' || item.value === '请输入')) {
				item.value = timeStr;
			}
			// 填充随机订单号
			if (label === '订单编号' && (!item.value || item.value.trim() === '' || item.value === '请输入')) {
				item.value = generateRandomOrder().toString();
			}
		});
	}

	// 3. 为未支付状态初始化默认倒计时
	if (activeTab.value === 'weizhifu' && (!order.value.statusDesc || order.value.statusDesc.trim() === '')) {
		const m = (Math.floor(Math.random() * 30) + 1).toString().padStart(2, '0');
		const s = Math.floor(Math.random() * 60).toString().padStart(2, '0');
		order.value.statusDesc = `${m}:${s}`;
	}

	// 2. 初始化期望时间 (当前+40min 至 当前+65min)
	if (order.value.productsInfo) {
		if (!order.value.productsInfo.deliveryTime || order.value.productsInfo.deliveryTime.trim() === '' || order.value.productsInfo.deliveryTime === '请输入') {
			const start = new Date(now.getTime() + 40 * 60000);
			const end = new Date(now.getTime() + 65 * 60000);
			const startText = `${start.getHours().toString().padStart(2, '0')}:${start.getMinutes().toString().padStart(2, '0')}`;
			const endText = `${end.getHours().toString().padStart(2, '0')}:${end.getMinutes().toString().padStart(2, '0')}`;
			order.value.productsInfo.deliveryTime = `今天${startText}-${endText}`;
		}
	}

	// 强制通知 Vue 更新
	order.value = { ...order.value };
};

onLoad((options) => {
	console.log('外卖页面接收参数:', options);
	const editFlag = String(options.isEdit) === 'true' || options.isEdit === true;

	if (editFlag && options.id) {
		// 1. 设置编辑标志
		isEditMode.value = true;
		currentId.value = String(options.id);

		// 2. 从缓存加载数据回填
		const list = uni.getStorageSync('jingdongShopping') || [];
		const editData = list.find(item => String(item.id) === String(options.id));

		if (editData) {
			order.value = JSON.parse(JSON.stringify(editData));
			if (editData.activeTab) {
				activeTab.value = editData.activeTab;
			}
			console.log('编辑模式激活，数据回显:', activeTab.value);
		}
	} else {
		// 新增模式
		initDefaultTimes();
		switchTab({ key: activeTab.value });
	}
});

const deliveryTimePopup = ref(null);
const timepopup = ref(null); // 单点时间选择器引用
const deliveryHours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
const deliveryMinutes = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
const deliveryPickerValue = ref([11, 17, 0, 11, 32]);

// 倒计时选择器范围 (0-59分, 0-59秒)
const countdownRange = ref([
	Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')),
	Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'))
]);

// 倒计时数值解析索引
const countdownValue = computed(() => {
	if (!order.value || !order.value.statusDesc) return [29, 59];
	const parts = order.value.statusDesc.split(':');
	if (parts.length !== 2) return [29, 59];
	return [
		parseInt(parts[0]) || 0,
		parseInt(parts[1]) || 0
	];
});

/**
 * 处理倒计时修改
 */
const handleCountdownChange = (e) => {
	const val = e.detail.value;
	const m = countdownRange.value[0][val[0]];
	const s = countdownRange.value[1][val[1]];
	order.value.statusDesc = `${m}:${s}`;
};

const editingField = ref('deliveryTime');

// 单点时间选择状态
const selectItemInfo = ref({
	type: '',
	value: '',
	label: '',
	id: ''
});

const datePickerData = ref({
	selectDate: "",
	startDate: "",
	endDate: "",
});

// 时间段选择器数据 (参考 add-order)
const timeRangePickerData = ref({
	rangeCols: [[], [], [], [], []], // 年, 月, 日, 开始时间, 结束时间
	rangeSelect: [0, 5, 14, 9, 22]
});

/**
 * 初始化时间段选择器列
 */
const initTimeRangeColumns = () => {
	const years = [];
	const now = new Date();
	const currentYear = now.getFullYear();
	for (let i = currentYear - 5; i <= currentYear + 5; i++) {
		years.push(i + '年');
	}
	const months = Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0') + '月');
	const days = Array.from({ length: 31 }, (_, i) => (i + 1).toString().padStart(2, '0') + '日');
	const hours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0') + ':00');
	timeRangePickerData.value.rangeCols = [years, months, days, hours, hours];
};

onMounted(() => {
	initTimeRangeColumns();
});

/**
 * 点击信息项
 */
const onClickItemInfo = (item) => {
	if (item.label === '收货信息') return;
	if (item.type == 'time') {
		datePickerData.value.selectDate = item.value || formatTime(new Date());
		datePickerData.value.endDate = "2099-12-31 23:59:59";
		selectItemInfo.value = item;
		if (timepopup.value) timepopup.value.open();
	} else if (item.type == 'timeRange') {
		selectItemInfo.value = item;
		// 预设选择器索引 (默认设为今天)
		const now = new Date();
		const yIdx = timeRangePickerData.value.rangeCols[0].indexOf(now.getFullYear() + '年');
		const mIdx = now.getMonth();
		const dIdx = now.getDate() - 1;
		timeRangePickerData.value.rangeSelect = [yIdx > -1 ? yIdx : 5, mIdx, dIdx, 9, 22];

		if (timepopup.value) timepopup.value.open();
	}
}

/**
 * 点击“备餐时间”或“取餐时间”
 */
const onClickTrackingTime = () => {
	const label = activeTab.value === 'beicanzhong' ? '备餐时间' : '取餐时间';
	// 设置选择器上下文
	selectItemInfo.value = {
		label: label,
		value: order.value.trackingTime || formatTime(new Date()),
		type: 'time',
		key: 'trackingTime'
	};
	datePickerData.value.selectDate = selectItemInfo.value.value;
	datePickerData.value.endDate = "2099-12-31 23:59:59";

	if (timepopup.value) timepopup.value.open();
}

/**
 * 时间段选择器变化回调
 */
const onTimeRangeChange = (e) => {
	timeRangePickerData.value.rangeSelect = e.detail.value;
}

/**
 * 设置时间
 */
const settmes = () => {
	if (selectItemInfo.value.type == 'time') {
		selectItemInfo.value.value = datePickerData.value.selectDate;
		// 额外同步到 order.trackingTime
		if (selectItemInfo.value.key === 'trackingTime') {
			order.value.trackingTime = datePickerData.value.selectDate;
		}
	} else if (selectItemInfo.value.type == 'timeRange') {
		const cols = timeRangePickerData.value.rangeCols;
		const sel = timeRangePickerData.value.rangeSelect;
		const yStr = cols[0][sel[0]].replace('年', '');
		const mStr = cols[1][sel[1]].replace('月', '');
		const dStr = cols[2][sel[2]].replace('日', '');
		const startStr = cols[3][sel[3]];
		const endStr = cols[4][sel[4]];

		// 判断是否为今天
		const now = new Date();
		const isToday = parseInt(yStr) === now.getFullYear() &&
			parseInt(mStr) === (now.getMonth() + 1) &&
			parseInt(dStr) === now.getDate();

		const dateLabel = isToday ? '今天' : `${yStr}-${mStr}-${dStr} `;
		const resultValue = `${dateLabel}${startStr}-${endStr}`;

		if (selectItemInfo.value.key === 'deliveryTime') {
			order.value.productsInfo.deliveryTime = resultValue;
		} else {
			selectItemInfo.value.value = resultValue;
		}
	}
	// 强制触发响应式
	order.value = { ...order.value };
	closeTimePicker();
}

/**
 * 单点时间选择器变化回调
 */
const onChangeStartDate = (e) => {
	datePickerData.value.selectDate = e;
}

/**
 * 关闭单点时间选择器弹窗
 */
const closeTimePicker = () => {
	if (timepopup.value) timepopup.value.close();
}

/**
 * 配送时间点击事件
 */
const onDeliveryTimeClick = (field = 'deliveryTime') => {
	editingField.value = field;
	// 解析当前时间字符串设置索引
	const currentOrder = data.order;
	const timeStr = currentOrder[field];

	if (timeStr) {
		const parts = timeStr.split('-');
		if (parts.length === 2) {
			const start = parts[0].split(':');
			const end = parts[1].split(':');
			deliveryPickerValue.value = [
				parseInt(start[0]) || 0,
				parseInt(start[1]) || 0,
				0,
				parseInt(end[0]) || 0,
				parseInt(end[1]) || 0
			];
		}
	}
	nextTick(() => {
		if (deliveryTimePopup.value) deliveryTimePopup.value.open();
	})
};

/**
 * 关闭配送时间选择器弹窗
 */
const closeDeliveryPopup = () => {
	if (deliveryTimePopup.value) deliveryTimePopup.value.close();
}

/**
 * 配送时间选择器变化回调
 */
const onDeliveryPickerChange = (e) => {
	deliveryPickerValue.value = e.detail.value;
};

/**
 * 确认配送时间
 */
const confirmDeliveryTime = () => {
	const val = deliveryPickerValue.value;
	const startH = deliveryHours[val[0]];
	const startM = deliveryMinutes[val[1]];
	const endH = deliveryHours[val[3]];
	const endM = deliveryMinutes[val[4]];
	const finalTime = `${startH}:${startM}-${endH}:${endM}`;

	// 直接操作 order.value (由于 toRefs 解构，它直接指向 data.order)
	if (order.value) {
		console.log(editingField.value, finalTime);
		order.value[editingField.value] = finalTime;
		// 显式触发全量替换以确保 UI 刷新
		order.value = { ...order.value };
	}

	closeDeliveryPopup();
};

/**
 * 格式化时间
 */
const formatTime = (date) => {
	const y = date.getFullYear();
	const m = (date.getMonth() + 1).toString().padStart(2, '0');
	const d = date.getDate().toString().padStart(2, '0');
	const h = date.getHours().toString().padStart(2, '0');
	const min = date.getMinutes().toString().padStart(2, '0');
	const s = date.getSeconds().toString().padStart(2, '0');
	return `${y}-${m}-${d} ${h}:${min}:${s}`;
};

/**
 * 生成随机订单号
 */
const generateRandomOrder = () => {
	return Math.floor(Math.random() * 9000000000) + 1000000000;
};

/**
 * 生成默认期望时间
 */
const generateDefaultExpectedTime = () => {
	const date = new Date();
	date.setMinutes(date.getMinutes() + 30);
	const h = date.getHours().toString().padStart(2, '0');
	const min = date.getMinutes().toString().padStart(2, '0');
	const date2 = new Date(date.getTime() + 15 * 60000);
	const h2 = date2.getHours().toString().padStart(2, '0');
	const min2 = date2.getMinutes().toString().padStart(2, '0');
	return `${h}:${min}-${h2}:${min2}`;
};

/**
 * 计算商品总价
 */
const totalProductPrice = computed(() => {
	if (!order.value || !order.value.products) return '0.00';
	const total = order.value.products.reduce((sum, item) => {
		const price = parseFloat(item.price) || 0;
		const countStr = String(item.count || '1');
		// 处理可能包含 "数量x" 字符的情况
		const count = parseInt(countStr.replace(/[^\d]/g, '')) || 0;
		return sum + (price * count);
	}, 0);
	return total.toFixed(2);
});

// 监听商品列表变化，实现自动计算总价逻辑
watch(() => order.value.products, (newProducts) => {
	if (newProducts && newProducts.length > 0) {
		order.value.totalPrice = totalProductPrice.value;
	}
}, { deep: true, immediate: true });

/**
 * 安全转换数值
 */
const parseMoney = (val) => {
	if (!val) return 0;
	if (typeof val === 'number') return val;
	// 移除非数字符号（保留小数点）
	const num = parseFloat(String(val).replace(/[^\d.]/g, ''));
	return isNaN(num) ? 0 : num;
}

// 监听相关分项变化，实现自动计算合计金额逻辑
// 逻辑：总金额 = 商品总价 + 运费 + 打包费 - 优惠
watch([
	() => order.value.totalPrice,
	() => order.value.carriage,
	() => order.value.packagingFee,
	() => order.value.discount
], ([tp, c, pf, d]) => {
	const total = parseMoney(tp) + parseMoney(c) + parseMoney(pf) - parseMoney(d);
	order.value.amountTo = total > 0 ? total.toFixed(2) : '0.00';
}, { immediate: true });

/**
 * 确认订单
 */
const onConfirm = () => {
	let list = uni.getStorageSync('jingdongShopping') || [];
	if (!Array.isArray(list)) {
		list = [];
	}
	order.value.activeTab = activeTab.value;
	if (isEditMode.value) {
		// 修改模式：查找原有 ID 并替换 (强制转字符串匹配)
		const index = list.findIndex(item => String(item.id) === String(currentId.value));
		if (index > -1) {
			list[index] = JSON.parse(JSON.stringify(order.value));
		} else {
			// 如果缓存中没找到（可能是第一次修改系统默认数据），则追加
			list.push(JSON.parse(JSON.stringify(order.value)));
		}
	} else {
		// 新增模式：仅在真正新增时生成 UUID 并追加
		order.value.id = stringUtil.uuid();
		list.push(JSON.parse(JSON.stringify(order.value)));
	}
	uni.setStorageSync('jingdongShopping', list);
	console.log("确认订单", order.value);
	uni.showToast({
		title: isEditMode.value ? '修改成功' : '保存成功',
		icon: 'success'
	});
	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
}
</script>

<style lang="less" scoped>
.tab-box {
	background-color: #F2F3F7;
	padding: 22rpx 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	overflow-x: scroll;

	&::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条 */
	}

	.tab {
		white-space: nowrap;
		padding: 10rpx 20rpx;
		border-radius: 28rpx;
		margin-right: 16rpx;
		background-color: #fff;
		font-size: 26rpx;
		color: #1a1a1a;
		flex-shrink: 0;
		font-weight: 500;

		&.active {
			color: #1B71F8;
		}
	}

}

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

.weizhifu {

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

.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;
	margin-top: 4rpx;
}

.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;
			width: 200px;

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

			.title {
				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-wrapper {
		margin-top: 14rpx;

		.product-divider {
			height: 1rpx;
			background-color: #f2f2f2;
			margin: 20rpx 0;
		}
	}

	.product-info {
		display: flex;
		position: relative;

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

		.info-box {
			flex: 1;
			overflow: hidden;

			.name-row {
				align-items: flex-start;
			}

			.name {
				width: 100%;
				font-size: 26rpx;
				color: #1A1A1A;
				line-height: 28rpx;
				font-weight: 700;
			}

			.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: #A96F24;
				margin-top: 18rpx;
			}
		}

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

			.price {
				font-weight: 500;
			}
		}
	}

	.add-product-btn {
		margin-top: 30rpx;
		height: 70rpx;
		border: 1rpx dashed #C7C7C7;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		font-size: 24rpx;
		color: #87868E;

		.icon {
			margin-right: 10rpx;
		}

		&:active {
			background-color: #f9f9f9;
		}
	}

	.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 {
		display: flex;
		justify-content: space-between;
		margin-top: 26rpx;

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

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

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


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


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

		.label {
			font-size: 26rpx;
			color: #4D4D4D;
			line-height: 26rpx;
		}

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

.timeBox {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding-bottom: env(safe-area-inset-bottom);

	.titleBox {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #f5f5f5;

		.title {
			color: #999;
		}

		.btn {
			color: #333;
			font-weight: 500;
		}
	}

	.picker-container {
		height: 500rpx;
		width: 100%;

		.range-picker-view {
			height: 100%;
			width: 100%;

			.picker-item {
				line-height: 50px;
				text-align: center;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
<style>
/* 直接在页面导入公共样式 */
@import '/common/main.css';
@import "@/common/specify-style.less";

.edit-icon {
	width: 28rpx;
	height: 28rpx;
	margin-left: 0;
	flex-shrink: 0;
}

.tips {
	display: inline-block;
	margin: 0 24rpx;
	font-size: 18rpx;
	color: #87868E;
	line-height: 24rpx;
	margin-top: 16rpx;
}

.time-box {
	text-align: left;
	margin: 8rpx 20rpx;
	padding: 16rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
}
</style>