<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 shoppingType"
					:key="item.key" @click="switchTab(item)">
					<text>{{ item.label }}</text>
				</view>
			</view>

			<view v-if="!isEditMode" class="random-dice">
				<image style="width: 2rem;height: 2rem;" src="/static/image/common/random-dice.png"
					@click="clickRandomDate"></image>
			</view>

			<!-- 等待付款 -->
			<template v-if="activeTab == 'dengdaifukuan'">
				<view class="tip-box">
					<picker mode="multiSelector" :range="timeRange" :value="timeValue" @change="handleTimeChange">
						<text>还剩
							<text style="color: #DD223F;font-weight: 500; margin-left: 10rpx;">{{ order.statusDesc
							}}</text>
							<image class="edit-icon" src="/static/image/common/edit.png"></image>
							订单自动取消
						</text>
					</picker>
				</view>
				<view class="address-info">
					<view class="flex-1">
						<view>
							<image class="location" src="/static/image/shopping/jingdong/detail/location.png">
							</image>
							<view class="name-box animate-scale">
								<auto-width-input v-model="order.consignee" fontSize="30rpx" fontWeight="500"
									placeholder="姓名" show-edit />
							</view>
							<view class="number-box animate-scale">
								<auto-width-input v-model="order.phone" fontSize="26rpx" placeholder="电话"
									color="#8C8C8C" show-edit />
							</view>
						</view>
						<view class="address-box animate-scale">
							<auto-width-input v-model="order.fullAddress" type="textarea" fontSize="26rpx"
								placeholder="地址" color="#8C8C8C" show-edit />
						</view>
					</view>
					<!-- <view class="edit-btn">
					<text>修改</text>
				</view> -->
				</view>
			</template>

			<!-- 正在出库 -->
			<template v-if="activeTab == 'zhengzaichuku'">
				<view class="time-box" @click="onClickTrackingTime">
					<text style="color: #87868E;">出库时间
						<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 class="outbound-info">
					<image class="outbound-icon shrink-0" src="/static/image/shopping/jingdong/detail/xiadan.png"
						mode="aspectFit">
					</image>
					<view class="outbound-info-content">
						<view class="title-info">
							<view class="flex flex-1">
								<text style="margin-right: 8rpx;" class="shrink-0">已下单 </text>
								<view class="flex-1 animate-scale flex-align-center">
									<auto-width-input v-model="order.trackingDesc" fontSize="30rpx" fontWeight="500"
										placeholder="预计送达时间" color="#1A1A1A" type="text" show-edit />
								</view>
							</view>
							<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
						</view>
						<view class="animate-scale desc flex-align-center">
							<auto-width-input class="desc" v-model="order.trackingDesc2" fontSize="26rpx"
								placeholder="运输信息" color="#8C8C8C" type="textarea" show-edit />
							<!-- <text >{{ order.trackingDesc2 }}</text> -->
						</view>
						<view class="address-box">
							<view class="top">
								<!-- <text class="address">华哈哈哈哈哈哈哈哈哈2栋 22-1</text> -->
								<view class="address flex-1 animate-scale flex-align-center">
									<auto-width-input v-model="order.fullAddress" type="textarea" fontWeight="500"
										fontSize="30rpx" placeholder="收货地址" color="#1A1A1A" show-edit />
								</view>
								<!-- <view class="edit-btn" style="margin-left: 16rpx;">修改</view> -->
							</view>
							<view class="flex" style="margin-top: 8rpx;">
								<view class="phone animate-scale flex-align-center" style="margin-right: 8rpx;">
									<auto-width-input v-model="order.consignee" type="text" fontSize="26rpx"
										placeholder="收货人" color="#8C8C8C" show-edit />
								</view>
								<view class="phone animate-scale flex-align-center">
									<auto-width-input v-model="order.phone" type="text" fontSize="26rpx"
										placeholder="电话" color="#8C8C8C" show-edit />
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 已取消 -->
			<template v-if="activeTab == 'yiquxiao'">
				<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 class="flex-1">
							<view class="address flex-1 animate-scale flex-align-center w100">
								<auto-width-input class="auto-width" v-model="order.fullAddress" type="textarea"
									fontWeight="500" fontSize="30rpx" placeholder="收货地址" color="#1A1A1A" show-edit />
							</view>
							<view class="flex" style="margin-top: 8rpx;">
								<view class="phone animate-scale flex-align-center" style="margin-right: 8rpx;">
									<auto-width-input v-model="order.consignee" type="text" fontSize="26rpx"
										placeholder="收货人" color="#8C8C8C" show-edit />
								</view>
								<view class="phone animate-scale flex-align-center">
									<auto-width-input v-model="order.phone" type="text" fontSize="26rpx"
										placeholder="电话" color="#8C8C8C" show-edit />
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 签收 -->
			<template v-if="activeTab == 'yiqianshou'">
				<view class="time-box" @click="onClickTrackingTime">
					<text style="color: #87868E;">签收时间
						<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 class="order-status-box">
					<view class="status-main">

						<image class="status-icon" src="/static/image/shopping/jingdong/detail/qianshou.png"
							mode="aspectFit" @click="chooseCourierImg">
						</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="min-height: 192rpx;">
						<view class="animate-scale desc flex-align-center shrink-0">
							<auto-width-input class="desc" v-model="order.trackingDesc2" fontSize="26rpx"
								placeholder="运输信息" color="#8C8C8C" type="textarea" show-edit />
						</view>
						<view class="upload-box flex1 w100">
							<view class="info-box flex-1 w100">
								<view class="image-box shrink-0" @click="chooseCourierImg">
									<image v-if="order.courierImg" class="w100 h100" :src="order.courierImg"
										mode="aspectFit">
									</image>
									<view v-else style="background-color: #EEEEEE;" class="w100 h100 flex-center">
										<image style="width: 30rpx;height: 30rpx;" src="/static/image/common/add.png">
										</image>
									</view>
								</view>
								<view class="phone animate-scale flex-align-center flex-1"
									style="margin-right: 8rpx;width: 100px;">
									<auto-width-input class="auto-input" v-model="order.courier" type="text"
										fontSize="26rpx" placeholder="快递员" color="#8C8C8C" show-edit />
								</view>
							</view>
							<view class="btn-box  shrink-0">
								<view class="btn grey">联系Ta</view>
								<view class="btn red">打赏Ta</view>
							</view>

						</view>
					</view>
					<view class="bottom-box">
						<view class="dot"></view>
						<view class="flex-1">
							<view class="address flex-1 animate-scale flex-align-center w100">
								<auto-width-input class="auto-width" v-model="order.fullAddress" type="textarea"
									fontWeight="500" fontSize="30rpx" placeholder="收货地址" color="#1A1A1A" show-edit />
							</view>
							<view class="flex" style="margin-top: 8rpx;">
								<view class="phone animate-scale flex-align-center" style="margin-right: 8rpx;">
									<auto-width-input v-model="order.consignee" type="text" fontSize="26rpx"
										placeholder="收货人" color="#8C8C8C" show-edit />
								</view>
								<view class="phone animate-scale flex-align-center">
									<auto-width-input v-model="order.phone" type="text" fontSize="26rpx"
										placeholder="电话" color="#8C8C8C" show-edit />
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 商品类型 (自营,京东,其它)-->
			<view class="time-box" style="margin-top: 16rpx;">
				<view style="color: #87868E;" class="flex-justify-between flex-align-center">
					<text>商店类型</text>
					<picker class="flex-1" style="display: flex;justify-content: flex-end;" :range="shopTypeOptions"
						:value="shopTypeIndex" @change="onShopTypeChange">
						<view class="flex-align-center">
							<text style="color: #1A1A1A; margin-right: 8rpx;">{{ shopTypeOptions[shopTypeIndex]
							}}</text>
							<uni-icons type="right" size="14" color="#87868E"></uni-icons>
						</view>
					</picker>
				</view>
			</view>

			<!-- 商品卡片 -->
			<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>
						<view class="title flex animate-scale">
							<auto-width-input v-model="order.shopName" fontSize="26rpx" fontWeight="700"
								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">
					<view class="image-box" @click="chooseImage">
						<view v-if="!order.products[0].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="order.products[0].image"></image>
					</view>
					<view class="info-box">
						<view class="name flex animate-scale">
							<auto-width-input class="name" v-model="order.products[0].title" fontSize="26rpx"
								fontWeight="700" placeholder="商品标题名称" color="#1A1A1A" show-edit type="textarea" />
						</view>
						<view class="flex flex-align-center animate-scale">
							<auto-width-input class="desc" v-model="order.products[0].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="order.products[0].service" type="textarea"
								fontSize="22rpx" placeholder="请输入服务" color="#A96F24" 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="order.products[0].price"
								type="number" fontSize="36rpx" placeholder="请输入商品价格" color="#1A1A1A" fontWeight="500"
								show-edit />
						</view>
					</view>
					<!-- <view class="price-box">
					<view class="price wx-font-medium flex-align-center animate-scale">￥<text
							style="font-size: 36rpx;">{{
								order.totalPrice }}</text>
					</view>
				</view> -->
				</view>
				<view v-if="activeTab == 'dengdaifukuan' || activeTab == 'yiquxiao'" 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="activeTab == 'dengdaifukuan'" 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="activeTab == 'dengdaifukuan'" class="text">物流/平台</text>
						</view>
					</view>
				</view>
				<view 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>

			<!-- 商品总价 -->
			<view v-if="activeTab == 'dengdaifukuan' || 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>
						<text style="font-size: 32rpx;font-weight: 500;">{{ order.products[0].price }}</text>
						<!-- <auto-width-input class="wx-font-medium" v-model="order.products[0].price" fontSize="32rpx"
						placeholder="商品总价" color="#1A1A1A" fontWeight="500" type="number" show-edit /> -->
					</view>
				</view>
				<view class="item flex-justify-between">
					<text class="label">运费</text>
					<view class="wx-font-medium flex flex-align-center">￥
						<auto-width-input class="wx-font-medium" v-model="order.carriage" fontSize="32rpx"
							placeholder="运费" color="#1A1A1A" fontWeight="500" type="number" show-edit />
					</view>
				</view>
				<view class="price">需付款 <text class="number wx-font-medium">
						￥{{ (Number(order.products[0].price) + Number(order.carriage)) ?
							(Number(order.products[0].price)
								+ Number(order.carriage)) :
							0 }}</text></view>
			</view>

			<!-- 订单信息 -->
			<view class="order-info-box">
				<view class="title flex-justify-between">
					<text>订单信息</text>
				</view>
				<view v-if="activeTab != 'dengdaifukuan' && activeTab != 'yiquxiao'" 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;">
						<view class="wx-font-medium flex flex-align-center">
							<view class="flex" style="align-items: baseline;color: #FF4444;">
								<text>共减￥</text>
								<auto-width-input class="wx-font-medium" v-model="order.discount" fontSize="32rpx"
									placeholder="优惠价格" color="#F10F1A" fontWeight="500" type="number" show-edit />
							</view>
						</view>
						<view class="wx-font-medium flex flex-align-center">
							<view class="flex" style="align-items: baseline;color: #1A1A1A;">
								<text>合计￥</text>
								<auto-width-input class="wx-font-medium" v-model="order.totalPrice" fontSize="36rpx"
									placeholder="合计总价" color="#1A1A1A" fontWeight="500" type="number" show-edit />
							</view>
						</view>
					</view>

				</view>
				<view class="order-info ">
					<view class="item flex-justify-between" v-for="(item, index) in order.orderInfo" :key="index"
						@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
								:disabled="item.type == 'time' || item.type == 'timeRange'" />
						</view>

					</view>
				</view>
				<view class="delivery-info">
					<view class="item flex-justify-between" v-for="(item, index) in order.sendType" :key="index"
						@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
								:disabled="item.type == 'time' || item.type == 'timeRange'" />
						</view>

					</view>
				</view>
			</view>

		</view>
	</view>

	<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>
						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[0]"
							:key="index">
							{{ item }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[1]"
							:key="index">
							{{ item }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[2]"
							:key="index">
							{{ item }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[3]"
							:key="index">
							{{ item }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[4]"
							:key="index">
							{{ 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 } from "vue";
import NavBar from "@/components/nav-bar/nav-bar.vue";
import { shoppingType, shoppingClassfiy, shoppingProductList } 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 activeTab = ref("dengdaifukuan");
const isEditMode = ref(false);
const currentId = ref('');
const navTitle = computed(() => isEditMode.value ? "修改订单" : "新增订单");

const shopTypeOptions = ['自营商店', '京东商店', '其它'];
const shopTypeValues = ['self', 'jd', 'none'];
const shopTypeIndex = computed(() => {
	if (!order.value || !order.value.shopType) return 2; // 默认“其它”
	const idx = shopTypeValues.indexOf(order.value.shopType);
	return idx > -1 ? idx : 2;
});

const statusBarHeight = ref(0);
const timepopup = ref();

const selectItemInfo = ref({
	type: '',
	value: '',
	label: '',
	id: ''
});

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

// 时间段选择器数据
const timeRangePickerData = ref({
	rangeCols: [[], [], [], [], []], // 年, 月, 日, 开始时间, 结束时间
	rangeSelect: [0, 5, 14, 9, 22]    // 2026, 06, 15, 09:00, 22:00 (基于索引)
});

// 初始化时间段选择器的列数据
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 = [];
	for (let i = 1; i <= 12; i++) {
		months.push(i.toString().padStart(2, '0') + '月');
	}

	const days = [];
	for (let i = 1; i <= 31; i++) {
		days.push(i.toString().padStart(2, '0') + '日');
	}

	const hours = [];
	for (let i = 0; i < 24; i++) {
		hours.push(i.toString().padStart(2, '0') + ':00');
	}

	timeRangePickerData.value.rangeCols = [years, months, days, hours, hours];

	// 根据当前日期设置默认索引 (2026-06-15 示例或当前日期)
	const yearIdx = years.indexOf('2026年') !== -1 ? years.indexOf('2026年') : 5;
	timeRangePickerData.value.rangeSelect = [yearIdx, 5, 14, 9, 22];
};

onMounted(() => {
	const info = uni.getSystemInfoSync();
	statusBarHeight.value = info.statusBarHeight || 0;
	initTimeRangeColumns();
});
const order = ref(shoppingClassfiy[activeTab.value]);

// 初始化默认地址信息，防止渲染时为空
if (order.value) {
	order.value.consignee = order.value.consignee || "";
	order.value.phone = order.value.phone || "";
	order.value.fullAddress = order.value.fullAddress || "";
}

// 时间选择器数据
const timeRange = ref([
	Array.from({ length: 24 }, (_, i) => (i < 10 ? '0' + i : i + '')), // 时
	Array.from({ length: 60 }, (_, i) => (i < 10 ? '0' + i : i + '')),  // 分
	Array.from({ length: 60 }, (_, i) => (i < 10 ? '0' + i : i + ''))   // 秒
]);

// 当前选择器索引
const timeValue = computed(() => {
	if (!order.value || !order.value.statusDesc) return [0, 0, 0];
	const parts = order.value.statusDesc.split(' : ');
	if (parts.length !== 3) return [0, 0, 0];
	return [
		parseInt(parts[0]) || 0,
		parseInt(parts[1]) || 0,
		parseInt(parts[2]) || 0
	];
});

/**
 * 修改倒计时时间
 */
const handleTimeChange = (e) => {
	const val = e.detail.value;
	const h = timeRange.value[0][val[0]];
	const m = timeRange.value[1][val[1]];
	const s = timeRange.value[2][val[2]];
	order.value.statusDesc = `${h} : ${m} : ${s}`;
};

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 {
		// 新增：如果是新增状态，初始化默认数据
		if (order.value) {
			const now = formatTime(new Date());
			// 初始化订单信息（时间、编号）
			if (order.value.orderInfo) {
				order.value.orderInfo.forEach(item => {
					if ((item.label === '下单时间' || item.label === '支付时间') && !item.value) {
						item.value = now;
					}
					if (item.label === '订单编号' && !item.value) {
						item.value = generateRandomOrder();
					}
				});
			}
			// 初始化配送信息
			if (order.value.sendType) {
				order.value.sendType.forEach(item => {
					if (item.label === '期望配送时间' && (!item.value || item.value.trim() === '')) {
						item.value = generateDefaultExpectedTime();
					}
				});
			}

			// 随机初始化特定状态字段
			if (activeTab.value === 'dengdaifukuan' && !order.value.statusDesc) {
				const h = (Math.floor(Math.random() * 23) + 1).toString().padStart(2, '0');
				const m = Math.floor(Math.random() * 59).toString().padStart(2, '0');
				const s = Math.floor(Math.random() * 59).toString().padStart(2, '0');
				order.value.statusDesc = `${h} : ${m} : ${s}`;
			}
			if (activeTab.value === 'zhengzaichuku' && !order.value.trackingTime) {
				const date = new Date();
				date.setMinutes(date.getMinutes() + Math.floor(Math.random() * 50) + 10);
				order.value.trackingTime = formatTime(date);
			}
			if (activeTab.value === 'yiqianshou' && !order.value.trackingTime) {
				const date = new Date();
				date.setDate(date.getDate() + Math.floor(Math.random() * 1) + 1);
				date.setHours(date.getHours() + Math.floor(Math.random() * 12));
				order.value.trackingTime = formatTime(date);
			}

			// 随机初始化商品数据
			clickRandomDate();
		}
	}
});

/**
 * 随机选择商品 (避开当前商品)
 */
const clickRandomDate = () => {
	if (!shoppingProductList || shoppingProductList.length === 0) return;

	// 获取当前商品标题 (用于去重)
	const currentTitle = order.value?.products?.[0]?.title || '';

	// 过滤掉当前已经选中的商品
	let availableProducts = shoppingProductList.filter(p => {
		const title = p.products?.[0]?.title || '';
		return title !== currentTitle;
	});

	// 如果过滤后没剩或者只有一个商品且刚好是当前的，则 fallback 到全量随机
	if (availableProducts.length === 0) {
		availableProducts = shoppingProductList;
	}

	// 随机抽选
	const randomIndex = Math.floor(Math.random() * availableProducts.length);
	const selected = JSON.parse(JSON.stringify(availableProducts[randomIndex]));

	// 更新到当前订单对象
	if (order.value) {
		order.value.shopType = selected.shopType || order.value.shopType;
		order.value.shopName = selected.shopName || order.value.shopName;
		order.value.totalPrice = selected.totalPrice || order.value.totalPrice;
		order.value.carriage = selected.carriage || order.value.carriage;
		order.value.discount = selected.discount || order.value.discount;

		if (selected.products && selected.products.length > 0) {
			order.value.products[0] = {
				...order.value.products[0],
				...selected.products[0]
			};
		}
	}
};

/**
 * 选择图片并转换为本地持久化路径 (并清理旧图)
 */
const chooseImage = () => {
	// 记录旧图路径用于清理
	const oldImagePath = order.value.products[0].image;

	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];
			uni.showLoading({ title: '处理图片中...' });

			// 将新图保存为持久化文件
			uni.saveFile({
				tempFilePath: tempFilePath,
				success: (saveRes) => {
					// 1. 设置新图片路径
					order.value.products[0].image = 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);
					uni.showToast({ title: '图片持久化失败', icon: 'none' });
					order.value.products[0].image = tempFilePath;
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		}
	});
}

/**
 * 选择快递员头像并转换为本地持久化路径 (并清理旧图)
 */
const chooseCourierImg = () => {
	// 记录旧图路径用于清理
	const oldImagePath = order.value.courierImg;

	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];
			uni.showLoading({ title: '处理图片中...' });

			// 将新图保存为持久化文件
			uni.saveFile({
				tempFilePath: tempFilePath,
				success: (saveRes) => {
					// 1. 设置新图片路径
					order.value.courierImg = 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)
						});
					}
				},
				fail: (err) => {
					console.error('保存头像失败:', err);
					order.value.courierImg = tempFilePath;
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		}
	});
}

/**
 * 点击列表项触发
 */
const onClickItemInfo = (item) => {
	if (item.label === '收货信息') return; // 收货信息不可手动修改
	if (item.type == 'time') {
		datePickerData.value.selectDate = item.value;
		datePickerData.value.endDate = formatTime(new Date());
		selectItemInfo.value = item;
		timepopup.value.open();
	} else if (item.type == 'timeRange') {
		selectItemInfo.value = item;
		timepopup.value.open();
	} else {
		// 普通输入聚焦逻辑
		item.focus = false;
		nextTick(() => {
			item.focus = true;
		});
	}
}

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

/**
 * 点击出库时间
 */
const onClickTrackingTime = () => {
	selectItemInfo.value = {
		type: 'time',
		isTrackingTime: true
	};
	datePickerData.value.selectDate = order.value.trackingTime || formatTime(new Date());
	datePickerData.value.endDate = "2099-12-31 23:59:59";
	timepopup.value.open();
}

/**
 * 确认时间选择
 */
const settmes = () => {
	if (selectItemInfo.value.type == 'time') {
		if (selectItemInfo.value.isTrackingTime) {
			order.value.trackingTime = datePickerData.value.selectDate;
		} else {
			selectItemInfo.value.value = datePickerData.value.selectDate;
		}
	} else if (selectItemInfo.value.type == 'timeRange') {
		const cols = timeRangePickerData.value.rangeCols;
		const sel = timeRangePickerData.value.rangeSelect;
		const y = cols[0][sel[0]].replace('年', '');
		const m = cols[1][sel[1]].replace('月', '');
		const d = cols[2][sel[2]].replace('日', '');
		const startStr = cols[3][sel[3]];
		const endStr = cols[4][sel[4]];
		selectItemInfo.value.value = `${y}-${m}-${d},${startStr}-${endStr}`;
	}
	timepopup.value.close();
}

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

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

/**
 * 格式化时间
 */
const formatTime = (date) => {
	const year = date.getFullYear();
	const month = date.getMonth() + 1;
	const day = date.getDate();
	const hour = date.getHours();
	const minute = date.getMinutes();
	const second = date.getSeconds();
	return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
}

/**
 * 随机生成 18 位订单号
 */
const generateRandomOrder = () => {
	let orderNo = '30'; // 京东订单常见的开头
	for (let i = 0; i < 16; i++) {
		orderNo += Math.floor(Math.random() * 10);
	}
	return orderNo;
}

/**
 * 生成默认期望配送时间 (明天 09:00-21:00)
 */
const generateDefaultExpectedTime = () => {
	const tomorrow = new Date();
	tomorrow.setDate(tomorrow.getDate() + 1);
	const y = tomorrow.getFullYear();
	const m = (tomorrow.getMonth() + 1).toString().padStart(2, '0');
	const d = tomorrow.getDate().toString().padStart(2, '0');
	return `${y}-${m}-${d} 09:00-21:00`;
}

/**
 * 切换tab
 * @param item 
 */
const switchTab = (item) => {
	// 备份当前输入，防止切换 tab 导致数据丢失
	const oldData = JSON.parse(JSON.stringify(order.value));

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

	if (order.value && oldData) {
		// 恢复通用字段
		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;
		order.value.carriage = oldData.carriage || order.value.carriage;
		order.value.discount = oldData.discount || order.value.discount;
		order.value.totalPrice = oldData.totalPrice || order.value.totalPrice;

		// 恢复商品数据
		if (order.value.products && order.value.products[0] && oldData.products && oldData.products[0]) {
			order.value.products[0] = JSON.parse(JSON.stringify(oldData.products[0]));
		}

		// 恢复 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;
				}
			});
		}

		// 针对新增模式，如果数据仍然为空，则自动生成
		if (!isEditMode.value && order.value) {
			const now = formatTime(new Date());
			// 订单信息
			if (order.value.orderInfo) {
				order.value.orderInfo.forEach(info => {
					if ((info.label === '下单时间' || info.label === '支付时间') && !info.value) {
						info.value = now;
					}
					if (info.label === '订单编号' && !info.value) {
						info.value = generateRandomOrder();
					}
				});
			}
			// 配送信息
			if (order.value.sendType) {
				order.value.sendType.forEach(info => {
					if (info.label === '期望配送时间' && (!info.value || info.value.trim() === '')) {
						info.value = generateDefaultExpectedTime();
					}
				});
			}

			// 随机初始化特定状态字段
			if (activeTab.value === 'dengdaifukuan' && !order.value.statusDesc) {
				const h = (Math.floor(Math.random() * 23) + 1).toString().padStart(2, '0');
				const m = Math.floor(Math.random() * 59).toString().padStart(2, '0');
				const s = Math.floor(Math.random() * 59).toString().padStart(2, '0');
				order.value.statusDesc = `${h} : ${m} : ${s}`;
			}
			if (activeTab.value === 'zhengzaichuku' && !order.value.trackingTime) {
				const date = new Date();
				date.setMinutes(date.getMinutes() + Math.floor(Math.random() * 50) + 10);
				order.value.trackingTime = formatTime(date);
			}
			if (activeTab.value === 'yiqianshou' && !order.value.trackingTime) {
				const date = new Date();
				date.setDate(date.getDate() + Math.floor(Math.random() * 1) + 1);
				date.setHours(date.getHours() + Math.floor(Math.random() * 12));
				order.value.trackingTime = formatTime(date);
			}
		}
	}
}

async function onConfirm() {
	let list = uni.getStorageSync('jingdongShopping') || [];
	if (!Array.isArray(list)) {
		list = [];
	}

	order.value.activeTab = activeTab.value;

	// 处理图片持久化
	const product = order.value.products[0];
	if (product && product.image && (product.image.includes('tmp') || product.image.includes('blob'))) {
		try {
			const res = await new Promise((resolve, reject) => {
				uni.saveFile({
					tempFilePath: product.image,
					success: resolve,
					fail: reject
				});
			});
			product.image = res.savedFilePath;
			console.log('图片持久化成功:', product.image);
		} catch (err) {
			console.error('图片保存失败:', err);
		}
	}

	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);
	uni.showToast({
		title: isEditMode.value ? '修改成功' : '保存成功',
		icon: 'success'
	});
	setTimeout(() => {
		uni.navigateBack();
	}, 500);
}

const onShopTypeChange = (e) => {
	const idx = e.detail.value;
	order.value.shopType = shopTypeValues[idx];
}

// 自动同步“收货信息”与“收货地址”
watch([
	() => order.value?.consignee,
	() => order.value?.phone,
	() => order.value?.fullAddress
], ([name, phone, fullAddr]) => {
	if (!order.value) return;

	// 1. 同步“收货信息”
	const userInfoValue = `${name || ''} ${phone || ''}`.trim();
	const findAndSet = (list, label, value, onlyIfEmpty = false) => {
		if (!list) return;
		const target = list.find(i => i.label === label);
		if (target) {
			if (!onlyIfEmpty || !target.value || target.value.trim() === '') {
				target.value = value;
			}
		}
	};

	findAndSet(order.value.sendType, '收货信息', userInfoValue);
	findAndSet(order.value.orderInfo, '收货信息', userInfoValue);

	// 2. 如果是正在出库，同步“收货地址” (允许手动修改：仅在为空时自动填充)
	if (order.value.status === '正在出库' && fullAddr) {
		findAndSet(order.value.sendType, '收货地址', fullAddr, true);
		findAndSet(order.value.orderInfo, '收货地址', fullAddr, true);
	}
}, { deep: true, immediate: true });

// 自动计算实付款总额
watch([
	() => order.value?.products?.[0]?.price,
	() => order.value?.discount,
	() => order.value?.carriage
], ([price, discount, carriage]) => {
	if (!order.value) return;
	const p = parseFloat(price) || 0;
	const d = parseFloat(discount) || 0;
	const c = parseFloat(carriage) || 0;
	// 计算逻辑：原价 - 优惠 + 运费
	const total = (p - d + c).toFixed(2);
	order.value.totalPrice = total;
}, { deep: true, immediate: true });

</script>

<style lang="less" scoped>
/* 右上角点击蒙层：position:fixed，透明，覆盖导航栏右侧按钮区域 */
.right-btn-mask {
	position: fixed;
	top: 0;
	right: 0;
	width: 80px;
	/* height 由 :style 动态绑定 = statusBarHeight + 44px */
	z-index: 10000;
	background: transparent;
}

.tab-box {
	// // position: -webkit-sticky;
	// position: sticky;
	// /* #ifdef H5 */
	// top: 44px;
	// /* H5 端通常有导航栏高度 */
	// /* #endif */
	// /* #ifndef H5 */
	// top: 88rpx;
	// /* #endif */
	// z-index: 9;
	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;
		}
	}

}

.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-box,
	.number-box {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		margin-right: 16rpx;
	}

	.address-box {
		display: flex;
		align-items: center;
		margin-top: 8rpx;
	}

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

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

	.address {
		color: #8C8C8C;
		font-size: 26rpx;
		line-height: 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;
		padding-bottom: 18rpx;
		// 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;
			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 {
		display: flex;
		margin-top: 14rpx;

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

		.info-box {
			flex: 1;
			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 {
				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;
			}
		}
	}

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

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

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

	.order-info {
		padding-bottom: 34rpx;
		border-bottom: 0.5px solid #F2F2F2;
	}

	.item {
		display: flex;
		justify-content: space-between;
		margin-top: 36rpx;

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

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

.timeBox {
	background-color: #fff;
	padding: 10px;
	border-radius: 24rpx 24rpx 0 0;

	.titleBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		padding: 0 10px;

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.btn {
			font-size: 28rpx;
			color: #1676FE;
			font-weight: 500;
		}
	}

	.range-picker-view {
		width: 100%;
		height: 400rpx;
		background-color: #fff;
	}

	.picker-item {
		line-height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 24rpx;
		color: #333;
	}
}
</style>
<style>
/* 直接在页面导入公共样式 */
@import '/common/main.css';
@import "@/common/specify-style.less";

.page-container {
	padding-bottom: 100rpx;
}

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

.auto-input {
	overflow-x: auto;
}

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

.random-dice {
	display: flex;
	justify-content: flex-end;
	margin: 0 16rpx;
}
</style>