<template>
	<view>
		<nav-bar class="nav-bar" :title="navTitle" bgColor="#F1F5F8" tipLayerType="jingdong-shopping-list" isTipLayer
			tipLayerText="添加订单信息" isRightButton @right-click="onConfirm">
		</nav-bar>

		<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>

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

		<!-- 待收货骑手地图 -->
		<view v-if="order.statusType == 'wait_recv'" class="map-box">

			<view class="qishou flex-align-center flex-column">
				<view class="qishou-info"
					:style="{ transform: isEditMode ? 'translateY(0)' : 'translateY(-20%) !important' }">
					<view class="title">骑手正在按序送货</view>
					<view class="time flex-align-center" style="white-space: nowrap;">前方剩余<view class="">
							<auto-width-input class="num green" v-model="order.orderQty" fontSize="24rpx"
								color="#1AA35B" show-edit />
						</view>，约<view class=""><auto-width-input class="green" v-model="order.surplusDeliveryTime"
								fontSize="24rpx" color="#1AA35B" show-edit /></view>
						送达
					</view>
				</view>
			</view>
		</view>

		<view v-if="order.statusType == 'wait_pay'" class="wait_pay"
			:style="(!isEditMode && order.statusType != 'wait_recv') ? 'margin-top: 20rpx;' : ''">
			<view class="flex-align-center">
				<view v-if="order.statusType == 'wait_pay'" class="main-text flex-align-center"
					style="white-space: nowrap;">
					<text>待支付，剩余</text>
					<view class="time" style="margin-left: 12rpx;">
						<picker mode="multiSelector" :range="payTimePickerArray" :value="payTimePickerIndex"
							@change="onPayTimeChange">
							<view class="flex-align-center">
								<text style="font-size: 48rpx; font-weight: 600; color: #1A1A1A;">{{
									order.remainingPayTime }}</text>
								<image style="width: 28rpx; height: 28rpx; margin-left: 12rpx; margin-top: 4rpx;"
									src="/static/image/common/edit.png"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="deliver-info" v-if="order.statusType != 'closed'">
			<view v-if="order.statusType == 'wait_recv' || order.statusType == 'wait_pay'"
				style="justify-content: baseline; display: flex; align-items: center;">
				<text class="label">预计</text>
				<view class="time">
					<picker mode="multiSelector" :range="timeRangePickerArray" :value="timeRangePickerIndex"
						@change="onTimeRangeChange">
						<view class="flex-align-center" style="min-width: 150rpx; height: 100%;">
							<text style="font-size: 40rpx; font-weight: 500; color: #1A1A1A;">{{ order.deliveryTime
							}}</text>
							<image style="width: 28rpx; height: 28rpx; margin-left: 12rpx; margin-top: 4rpx;"
								src="/static/image/common/edit.png"></image>
						</view>
					</picker>
				</view>
			</view>
			<view v-if="order.statusType != 'closed'" class="flex"
				style="margin-top: 26rpx;justify-content: flex-start;">
				<text class="label">送至</text>
				<view class="flex-1 address-info flex-align-center" style="max-width: 550rpx;">
					<view class=" flex-1"><auto-width-input v-model="order.orderInfo[0].value" fontSize="26rpx"
							color="#1A1A1A" type="textarea" show-edit /></view>
				</view>
			</view>
			<view v-if="order.statusType == 'success'" class="flex"
				style="margin-top: 26rpx;justify-content: flex-start; padding-bottom: 20rpx;">
				<text class="label">送达图片</text>
				<view class="delivery-photo flex-align-center">
					<view v-if="!order.deliveryPhoto || deliveryPhotos.includes(order.deliveryPhoto)" class="add"
						@click="chooseDeliveryPhoto">+</view>
					<image v-else style="width: 80rpx;height: 80rpx;" :src="order.deliveryPhoto" mode="aspectFill"
						@click="chooseDeliveryPhoto"
						:class="!deliveryPhotos.includes(order.deliveryPhoto) ? 'active-photo' : ''">
					</image>
					<image style="width: 80rpx;height: 80rpx;margin-left: 16rpx;"
						v-for="(photo, index) in deliveryPhotos" :key="index" :src="photo" mode="aspectFill"
						@click="selectDeliveryPhoto(photo)"
						:class="order.deliveryPhoto === photo ? 'active-photo' : ''">
					</image>
				</view>
			</view>
			<view v-if="order.statusType == 'wait_recv'" class="flex"
				style="margin-top: 26rpx;justify-content: flex-start;">
				<text class="label">服务</text>
				<view class="flex-1 address-info">
					<text style="color: #1AA35B;">超20分钟免单-生效中</text>
					<text> 若超时，即{{ timeoutDelivery }}后送达赔4元可叠加红包</text>
					<uni-icons type="right" size="12" color="#8C8C8C"></uni-icons>
				</view>
			</view>
			<view v-if="order.statusType == 'wait_recv'" class="flex"
				style="margin-top: 26rpx;justify-content: flex-start; padding-bottom: 20rpx;">
				<text class="label">配送地图</text>
				<view class="delivery-photo flex-align-center">
					<image style="width: 120rpx;height: 80rpx;margin-right: 16rpx;" v-for="(mapImg, index) in mapPhotos"
						:key="index" :src="mapImg" mode="aspectFill" @click="selectMapPhoto(mapImg)"
						:class="order.mapUrl === mapImg ? 'active-photo' : ''">
					</image>
				</view>
			</view>
		</view>
		<view v-if="order.statusType == 'wait_pay'" class="wait_pay-buttom">
			<view class="button flex-center flex-column">
				<view class="flex-align-center" style="font-size: 32rpx;line-height: 32rpx; white-space: nowrap;">去支付 ￥
					<view class=""><auto-width-input v-model="order.priceDetail.actualPay" type="digit" fontSize="32rpx"
							color="#FFFFFF" show-edit /></view>
				</view>
			</view>
		</view>
		<view class="product-info-box">
			<!-- 订单详情卡片 -->
			<view class="info-card">
				<view class="shop-title-box flex-align-center">
					<view class="shop-name " style="white-space: nowrap;"><auto-width-input v-model="order.shopName"
							fontSize="30rpx" fontWeight="500" color="#1A1A1A" show-edit />
					</view>
					<text class="shop-name">(</text>
					<view class="shop-name " style="white-space: nowrap;"><auto-width-input v-model="order.location"
							fontSize="30rpx" fontWeight="500" color="#1A1A1A" show-edit />
					</view><text class="shop-name">)</text>
					<uni-icons type="right" size="16" color="#8C8C8C"></uni-icons>
				</view>

				<view class="goods-item flex" v-for="(item, index) in order.goodsList" :key="index"
					style="position: relative; padding-bottom: 30rpx; border-bottom: 1rpx solid #F5F5F5; margin-bottom: 30rpx; align-items: flex-start;">

					<view class="goods-img-box flex-center" @click="chooseImage(item)"
						style="width: 150rpx; height: 150rpx; flex-shrink: 0; margin-right: 24rpx; border-radius: 12rpx; overflow: hidden; background-color: #F5F5F5; display: flex; align-items: center; justify-content: center;">
						<image v-if="item.image" class="goods-img" :src="item.image" mode="aspectFill"
							style="width: 100%; height: 100%;">
						</image>
						<uni-icons v-else type="plusempty" size="36" color="#D9D9D9"></uni-icons>
					</view>

					<view class="goods-info flex-1 flex-column" style="overflow: hidden; padding-top: 4rpx;">
						<!-- 第一排：商品标题及删除按钮 -->
						<view class="flex-align-center" style="margin-bottom: 20rpx;">
							<auto-width-input class="flex-1" v-model="item.title" fontSize="28rpx" color="#1A1A1A"
								type="textarea" show-edit />
							<view class="flex-center" @click.stop="removeGoods(index)"
								style="margin-left: 20rpx; flex-shrink: 0;">
								<uni-icons type="trash" size="18" color="#FF4D4F"></uni-icons>
							</view>
						</view>

						<!-- 第二排：商品描述/规格 -->
						<view class="flex-align-center" style="margin-bottom: 20rpx;">
							<auto-width-input class="flex-1" v-model="item.spec" fontSize="24rpx" color="#7C8495"
								show-edit />
						</view>

						<!-- 第二排：商品服务 -->
						<view class="flex-align-center" style="margin-bottom: 20rpx;">
							<auto-width-input class="flex-1" v-model="item.tag" fontSize="24rpx" color="#0AA957"
								placeholder="请输入商品服务" show-edit />
						</view>

						<!-- 第三排：数量 -->
						<view class="flex-align-center" style="margin-bottom: 20rpx;">
							<auto-width-input class="flex-1" v-model="item.count" type="number" fontSize="24rpx"
								color="#7C8495" show-edit />
						</view>

						<!-- 第四排：价格 -->
						<view class="flex-align-center" style="margin-bottom: 20rpx;">
							<text
								style="font-size: 26rpx; color: #1A1A1A; margin-right: 4rpx; font-weight: 500;">￥</text>
							<auto-width-input class="flex-1" v-model="item.actualPrice" type="digit" fontSize="34rpx"
								fontWeight="500" color="#1A1A1A" show-edit />
						</view>

						<!-- 第五排：优惠/原价 -->
						<view class="flex-align-center" style="color: #F86603;">
							<text style="font-size: 24rpx; margin-right: 4rpx;">原价 ￥</text>
							<auto-width-input class="flex-1" v-model="item.oriPrice" type="digit" fontSize="24rpx"
								color="#1a1a1a" show-edit />
						</view>
					</view>
				</view>

				<view class="flex-center" style="margin-top: 10rpx; padding-bottom: 20rpx;" @click="addGoods">
					<view
						style="border: 1px dashed #FF7824; color: #FF7824; font-size: 26rpx; padding: 12rpx 50rpx; border-radius: 40rpx;width: 100%; text-align: center;">
						+ 添加商品</view>
				</view>

				<view class="fee-item flex-between" v-for="(fee, index) in order.fees" :key="'fee-' + index">
					<view class="fee-left flex-align-center">
						<view class="">
							<auto-width-input v-model="fee.name" fontSize="26rpx" color="#7C8495"
								:show-edit="!(fee.name === '打包费' || fee.name === '配送费')"
								:disabled="fee.name === '打包费' || fee.name === '配送费'" />
						</view>
					</view>
					<view class="fee-right flex-column flex-align-end">
						<view class="actual-price flex-align-center"><text class="label">实付</text><text
								class="symbol wx-font-medium">￥</text>
							<view class="num wx-font-medium "><auto-width-input v-model="fee.actualPrice" type="digit"
									fontSize="36rpx" fontWeight="500" color="#1A1A1A" show-edit />
							</view>
						</view>
						<view class="ori-price wx-font-regular flex-align-center">￥<view class="">
								<auto-width-input v-model="fee.oriPrice" type="digit" fontSize="24rpx" color="#7C8495"
									show-edit />
							</view>
						</view>
					</view>
				</view>

				<view class="fee-item flex-between" style="align-items: center;"
					v-for="(comp, index) in order.compensations" :key="'comp-' + index">
					<view class="fee-left flex-align-center">
						<view class=""><auto-width-input v-model="comp.name" fontSize="26rpx" color="#7C8495"
								show-edit />
						</view>
						<uni-icons v-if="comp.showQuestion" type="help" size="16" color="#C6C6C6"
							style="margin-left: 6rpx;"></uni-icons>
					</view>
					<view class="fee-right ">
						<auto-width-input v-model="comp.value" fontSize="26rpx"
							:color="comp.isRed ? '#F83D3D' : '#1A1A1A'" show-edit />
					</view>
				</view>
				<view class="price-detail-title flex-between">
					<view class="left flex-align-center">
						<text>价格明细</text>
					</view>
					<view class="right flex-align-center">
						<view class="total-discount flex-align-center" style="white-space: nowrap;">总优惠
							<text class="symbol wx-font-medium">￥</text>
							<view class=""><auto-width-input v-model="order.priceDetail.totalDiscount" type="digit"
									fontSize="34rpx" color="#FF2020" show-edit /></view>
						</view>
						<view class="total-actual flex-align-center" style="white-space: nowrap;">实付<text
								class="symbol wx-font-medium">￥</text>
							<view class="num wx-font-medium "><auto-width-input v-model="order.priceDetail.actualPay"
									type="digit" fontSize="34rpx" color="#1A1A1A" show-edit /></view>
						</view>
					</view>
				</view>

				<view class="price-detail-list">
					<view class="detail-item flex-between" v-for="(detail, index) in order.priceDetail.details"
						:key="'detail-' + index">
						<view class="label ">{{ detail.name }}</view>
						<view class="val alipay-font " :class="{ 'bold-val': detail.isBold, 'red-val': detail.isRed }">
							<auto-width-input v-model="detail.value" fontSize="32rpx"
								:color="detail.isRed ? '#F83D3D' : '#1A1A1A'" show-edit />
						</view>
					</view>
				</view>

				<view class="divider-line"></view>

				<view class="order-info-area">
					<view class="order-item flex" v-for="(info, index) in order.orderInfo" :key="'info-' + index"
						:style="info.label === '收货信息' ? 'align-items: flex-start;' : ''"
						v-show="!(order.statusType === 'wait_pay' && info.label === '送达时间')">
						<text class="label" :style="info.label === '收货信息' ? 'line-height:36rpx;' : ''">{{ info.label
						}}</text>
						<view class="val flex-1 flex-align-center" style="justify-content: flex-end;">

							<!-- 送达时间 picker -->
							<template v-if="info.label === '送达时间'">
								<picker mode="multiSelector" :range="deliveryInfoPickerArray"
									:value="deliveryInfoPickerIndex" @change="(e) => onDeliveryInfoChange(e, index)"
									class="flex-1" :disabled="order.statusType === 'wait_pay'">
									<view class="flex-align-center" style="justify-content: flex-end;">
										<text style="font-size: 24rpx; color: #1A1A1A;">{{ info.value || '请选择送达时间'
										}}</text>
										<image v-if="order.statusType !== 'wait_pay'"
											style="width: 24rpx; height: 24rpx; margin-left: 8rpx;"
											src="/static/image/common/edit.png"></image>
									</view>
								</picker>
							</template>

							<!-- 下单时间、付款时间等 picker -->
							<template v-else-if="info.label.includes('时间')">
								<picker mode="multiSelector" :range="orderTimePickerArray" :value="orderTimePickerIndex"
									@change="(e) => onOrderTimeChange(e, index)" class="flex-1">
									<view class="flex-align-center" style="justify-content: flex-end;">
										<text style="font-size: 24rpx; color: #1A1A1A;">{{ info.value || '请选择时间'
										}}</text>
										<image style="width: 24rpx; height: 24rpx; margin-left: 8rpx;"
											src="/static/image/common/edit.png"></image>
									</view>
								</picker>
							</template>

							<!-- 常规文本输入 -->
							<template v-else>
								<view class=" input-box flex-1" style="display: flex; justify-content: flex-end;">
									<auto-width-input v-model="info.value" fontSize="24rpx" color="#1A1A1A"
										:type="info.label === '收货信息' ? 'textarea' : (info.label === '订单号' ? 'number' : 'text')"
										style="text-align: right;" show-edit />
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

const isScrolled = ref(false);
const screenshotImage = ref('');

const activeTab = ref("wait_pay");
const isEditMode = ref(false);
const currentId = ref('');
const navTitle = computed(() => isEditMode.value ? "修改外卖订单" : "新增外卖订单");

const savedDeliveryTime = ref('');
const savedOrderDeliveryTime = ref('');

const deliveryPhotos = ref(['/static/image/shopping/taobao/waimai/deliveryPhoto1.png', '/static/image/shopping/taobao/waimai/deliveryPhoto2.png']);
const mapPhotos = ref(['/static/image/shopping/taobao/waimai/map1.png', '/static/image/shopping/taobao/waimai/map2.png']);

const order = ref({
	...JSON.parse(JSON.stringify(waimaiClassfiy[activeTab.value])),
	statusType: activeTab.value,
	orderType: 'waimai'
});

if (!order.value.deliveryPhoto) {
	order.value.deliveryPhoto = deliveryPhotos.value[0];
}

if (!order.value.mapUrl) {
	order.value.mapUrl = mapPhotos.value[0];
}

// 核心自动计算引擎 (监听商品列表、费用列表、以及手动添加的其他优惠)
watch(() => {
	if (!order.value || !order.value.priceDetail) return null;
	// 避免无限循环，排查掉会被我们程序自动改写的明细项
	const detailsDep = order.value.priceDetail.details ? order.value.priceDetail.details.map(d => {
		if (['总价', '商品总价', '商品优惠', '配送费优惠', '打包费优惠'].includes(d.name)) return null;
		return d.value;
	}) : [];
	return {
		goods: JSON.stringify(order.value.goodsList || []),
		fees: JSON.stringify(order.value.fees || []),
		details: JSON.stringify(detailsDep)
	};
}, (newVal) => {
	if (!newVal || !order.value.priceDetail || !order.value.priceDetail.details) return;
	let sum = 0;
	let goodsDiscount = 0;
	let actualGoodsSum = 0;

	// 1. 计算商品总价与商品优惠
	if (order.value.goodsList) {
		order.value.goodsList.forEach(item => {
			const oriStr = String(item.oriPrice || item.actualPrice || '0').trim();
			const oriPrice = parseFloat(oriStr.replace(/[^0-9.]/g, '')) || 0;
			const actStr = String(item.actualPrice || '0').trim();
			const actualPrice = parseFloat(actStr.replace(/[^0-9.]/g, '')) || 0;
			const count = parseInt(item.count) || 1;

			sum += oriPrice * count;
			actualGoodsSum += actualPrice * count;
			if (item.oriPrice && oriPrice > actualPrice) {
				goodsDiscount += (oriPrice - actualPrice) * count;
			}
		});
	}

	// 2. 计算费用优惠 (配送费/打包费)
	let deliveryDiscount = 0;
	let packageDiscount = 0;
	let feeSum = 0;
	if (order.value.fees) {
		order.value.fees.forEach(fee => {
			if (fee.name === '配送费' || fee.name === '打包费') {
				const oriStr = String(fee.oriPrice || fee.actualPrice || '0').trim();
				const oriPrice = parseFloat(oriStr.replace(/[^0-9.]/g, '')) || 0;
				const actStr = String(fee.actualPrice || '0').trim();
				const actualPrice = parseFloat(actStr.replace(/[^0-9.]/g, '')) || 0;

				feeSum += actualPrice;

				if (fee.oriPrice && oriPrice > actualPrice) {
					if (fee.name === '配送费') deliveryDiscount += (oriPrice - actualPrice);
					if (fee.name === '打包费') packageDiscount += (oriPrice - actualPrice);
				}
			}
		});
	}

	const getDetailObj = (name) => order.value.priceDetail.details.find(d => d.name === name);

	const totalObj = getDetailObj('总价') || getDetailObj('商品总价');
	if (totalObj) totalObj.value = '￥' + sum.toFixed(2);

	const goodsDiscountObj = getDetailObj('商品优惠');
	if (goodsDiscountObj) goodsDiscountObj.value = '-￥' + goodsDiscount.toFixed(2);

	const deliveryDiscountObj = getDetailObj('配送费优惠');
	if (deliveryDiscountObj) deliveryDiscountObj.value = '-￥' + deliveryDiscount.toFixed(2);

	const packageDiscountObj = getDetailObj('打包费优惠');
	if (packageDiscountObj) packageDiscountObj.value = '-￥' + packageDiscount.toFixed(2);

	// 3. 计算总优惠 (遍历所有明细里的优惠项)
	let totalDiscount = 0;
	order.value.priceDetail.details.forEach(d => {
		if (d.name && !['总价', '商品总价'].includes(d.name)) {
			// 只有明确是带有 - 号或者是红色(优惠项)的，才加总
			if (String(d.value).includes('-') || d.isRed) {
				const val = parseFloat(String(d.value || '0').replace(/[^0-9.]/g, '')) || 0;
				totalDiscount += val;
			}
		}
	});

	order.value.priceDetail.totalDiscount = totalDiscount.toFixed(2);

	// 4. 计算实付价格 (商品实付总和 + 配送费打包费实付)
	const actualPaySum = actualGoodsSum + feeSum;
	order.value.priceDetail.actualPay = actualPaySum.toFixed(2);

}, { deep: true, immediate: true });

onPageScroll((e) => {
	isScrolled.value = e.scrollTop > 10;
});

const switchTab = (item) => {
	activeTab.value = item.key;

	// 备份所有用户可能已经编辑或随机生成的核心业务数据，防止模板覆盖
	const backup = {
		shopName: order.value.shopName,
		location: order.value.location,
		goodsList: JSON.parse(JSON.stringify(order.value.goodsList || [])),
		fees: JSON.parse(JSON.stringify(order.value.fees || [])),
		compensations: JSON.parse(JSON.stringify(order.value.compensations || [])),
		deliveryPhoto: order.value.deliveryPhoto,
		mapUrl: order.value.mapUrl || mapPhotos.value[0],
		deliveryTime: order.value.deliveryTime,
		remainingPayTime: order.value.remainingPayTime,
		surplusDeliveryTime: order.value.surplusDeliveryTime,
		orderQty: order.value.orderQty,
		priceDetail: JSON.parse(JSON.stringify(order.value.priceDetail || {})),
		orderInfoMap: {}
	};
	if (order.value.orderInfo) {
		order.value.orderInfo.forEach(info => {
			backup.orderInfoMap[info.label] = info.value;
		});
	}

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

	// 恢复备份的数据，保持数据连贯性
	if (backup.shopName) order.value.shopName = backup.shopName;
	if (backup.location) order.value.location = backup.location;
	if (backup.goodsList.length > 0) order.value.goodsList = backup.goodsList;
	if (backup.fees.length > 0) order.value.fees = backup.fees;
	if (backup.compensations.length > 0) order.value.compensations = backup.compensations;

	if (backup.deliveryTime) {
		order.value.deliveryTime = backup.deliveryTime;
	}

	if (backup.deliveryPhoto) {
		order.value.deliveryPhoto = backup.deliveryPhoto;
	} else {
		order.value.deliveryPhoto = deliveryPhotos.value[0];
	}

	if (backup.mapUrl) {
		order.value.mapUrl = backup.mapUrl || mapPhotos.value[0];
	} else {
		order.value.mapUrl = mapPhotos.value[0];
	}

	if (backup.remainingPayTime) order.value.remainingPayTime = backup.remainingPayTime;
	if (backup.surplusDeliveryTime) order.value.surplusDeliveryTime = backup.surplusDeliveryTime;
	if (backup.orderQty) order.value.orderQty = backup.orderQty;
	if (backup.priceDetail && Object.keys(backup.priceDetail).length > 0) order.value.priceDetail = backup.priceDetail;

	if (order.value.orderInfo) {
		if (backup.orderInfoMap['送达时间'] && backup.orderInfoMap['送达时间'] !== '尽快送达') {
			savedOrderDeliveryTime.value = backup.orderInfoMap['送达时间'];
		}
		order.value.orderInfo.forEach(info => {
			if (backup.orderInfoMap[info.label]) {
				info.value = backup.orderInfoMap[info.label];
			}

			if (info.label === '送达时间') {
				if (item.key === 'wait_pay') {
					info.value = '尽快送达';
				} else if (info.value === '尽快送达' && savedOrderDeliveryTime.value) {
					info.value = savedOrderDeliveryTime.value;
				}
			}
		});
	}

	order.value.statusType = item.key;
	order.value.orderType = 'waimai';
}

const onConfirm = () => {
	if (!order.value.shopName) {
		uni.showToast({ title: '请输入店铺名称', icon: 'none' });
		return;
	}
	let list = uni.getStorageSync('taobaoShopping') || [];

	if (isEditMode.value) {
		const idx = list.findIndex(item => String(item.id) === String(currentId.value));
		if (idx > -1) {
			list[idx] = JSON.parse(JSON.stringify(order.value));
			console.log(list[idx], "编辑")
		} else {
			list.unshift(JSON.parse(JSON.stringify(order.value)));
		}
	} else {
		const newOrder = JSON.parse(JSON.stringify(order.value));
		newOrder.id = new Date().getTime().toString();

		list.unshift(newOrder);
		console.log("新增数据")
	}

	uni.setStorageSync('taobaoShopping', list);
	uni.showToast({
		title: '保存成功',
		icon: 'success'
	});
	setTimeout(() => {
		util.goBack();
	}, 1000);
}

const setDefaultOrderTime = () => {
	if (order.value.orderInfo && order.value.orderInfo.length > 0) {
		const now = new Date();
		const curY = now.getFullYear();
		const curM = (now.getMonth() + 1).toString().padStart(2, '0');
		const curD = now.getDate().toString().padStart(2, '0');
		const curH = now.getHours().toString().padStart(2, '0');
		const curMin = now.getMinutes().toString().padStart(2, '0');
		const curS = now.getSeconds().toString().padStart(2, '0');
		const currentTimeStr = `${curY}-${curM}-${curD} ${curH}:${curMin}:${curS}.123`;

		order.value.orderInfo.forEach(info => {
			if (info.label === '下单时间') {
				info.value = currentTimeStr;
			}
		});
	}
};

onLoad(async (options) => {
	const editFlag = String(options.isEdit) === 'true' || options.isEdit === true;
	if (editFlag && options.id) {
		isEditMode.value = true;
		currentId.value = String(options.id);
		let list = uni.getStorageSync('taobaoShopping') || [];
		let editData = list.find(item => String(item.id) === String(options.id));

		if (!editData) {
			editData = defualtData.find(item => String(item.id) === String(options.id));
		}

		if (editData) {
			order.value = JSON.parse(JSON.stringify(editData));
			activeTab.value = editData.statusType || 'wait_pay';
		}
	} else {
		setDefaultOrderTime();
		clickRandomDate();
	}

	const map1 = await imgLocal.getLocalImage(`shopping/taobao/waimai/map1.png`)
	const map2 = await imgLocal.getLocalImage(`shopping/taobao/waimai/map2.png`)
	mapPhotos.value[0] = map1;
	mapPhotos.value[1] = map2;
});

// === 待支付倒计时选择器逻辑 (mm:ss) ===
const payMinutes = Array.from({ length: 16 }, (_, i) => i.toString().padStart(2, '0')); // 00 to 15
const paySeconds = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
const payTimePickerArray = [payMinutes, [':'], paySeconds];
const payTimePickerIndex = ref([14, 0, 59]);

const onPayTimeChange = (e) => {
	const val = e.detail.value;
	let m = payMinutes[val[0]];
	let s = paySeconds[val[2]];
	// 限制最多15分钟
	if (m === '15') {
		s = '00';
	}
	order.value.remainingPayTime = `${m}:${s}`;
};

const initRandomPayTime = () => {
	const m = Math.floor(Math.random() * 15); // 0 to 14
	const s = Math.floor(Math.random() * 60); // 0 to 59
	order.value.remainingPayTime = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
};

// === 时间范围选择器逻辑 (hh:mm-hh:mm) ===
const hours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
const minutes = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
const timeRangePickerArray = [hours, minutes, ['-'], hours, minutes];
const timeRangePickerIndex = ref([12, 0, 0, 12, 30]);

const onTimeRangeChange = (e) => {
	const val = e.detail.value;
	const h1 = hours[val[0]];
	const m1 = minutes[val[1]];
	const h2 = hours[val[3]];
	const m2 = minutes[val[4]];
	order.value.deliveryTime = `${h1}:${m1}-${h2}:${m2}`;
	savedDeliveryTime.value = order.value.deliveryTime;
};

const initRandomDeliveryTime = () => {
	const h = Math.floor(Math.random() * 14) + 8; // 8 to 21
	const m1 = Math.floor(Math.random() * 60);
	const m2 = (m1 + 30) % 60;
	const h2 = m1 + 30 >= 60 ? h + 1 : h;

	const hStr = h.toString().padStart(2, '0');
	const m1Str = m1.toString().padStart(2, '0');
	const h2Str = h2.toString().padStart(2, '0');
	const m2Str = m2.toString().padStart(2, '0');

	order.value.deliveryTime = `${hStr}:${m1Str}-${h2Str}:${m2Str}`;
	savedDeliveryTime.value = order.value.deliveryTime;
};

// === 订单明细底部时间选择器逻辑 (下单时间 / 送达时间 等) ===
const getVal = (str) => str.replace(/[^0-9]/g, '');

const getWeekday = (y, m, d) => {
	const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
	const date = new Date(y, parseInt(m) - 1, parseInt(d));
	return week[date.getDay()];
};

const pickerYears = Array.from({ length: 15 }, (_, i) => (2020 + i).toString() + '年');
const pickerMonths = Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0') + '月');
const pickerDays = Array.from({ length: 31 }, (_, i) => (i + 1).toString().padStart(2, '0') + '日');
const pickerHours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0') + '时');
const pickerMinutes = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0') + '分');
const pickerSeconds = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0') + '秒');

const orderTimePickerArray = [pickerYears, pickerMonths, pickerDays, pickerHours, pickerMinutes, pickerSeconds];
const orderTimePickerIndex = ref([6, 0, 0, 12, 0, 0]); // 默认从 2026 年开始

const deliveryInfoPickerArray = [pickerMonths, pickerDays, pickerHours, pickerMinutes, pickerHours, pickerMinutes];
const deliveryInfoPickerIndex = ref([0, 0, 12, 0, 12, 30]);

const onOrderTimeChange = (e, index) => {
	const val = e.detail.value;
	const Y = getVal(orderTimePickerArray[0][val[0]]);
	const M = getVal(orderTimePickerArray[1][val[1]]);
	const D = getVal(orderTimePickerArray[2][val[2]]);
	const h = getVal(orderTimePickerArray[3][val[3]]);
	const m = getVal(orderTimePickerArray[4][val[4]]);
	const s = getVal(orderTimePickerArray[5][val[5]]);

	order.value.orderInfo[index].value = `${Y}-${M}-${D} ${h}:${m}:${s}.123`;
};

const onDeliveryInfoChange = (e, index) => {
	const val = e.detail.value;
	const M = getVal(deliveryInfoPickerArray[0][val[0]]);
	const D = getVal(deliveryInfoPickerArray[1][val[1]]);
	const h1 = getVal(deliveryInfoPickerArray[2][val[2]]);
	const m1 = getVal(deliveryInfoPickerArray[3][val[3]]);
	const h2 = getVal(deliveryInfoPickerArray[4][val[4]]);
	const m2 = getVal(deliveryInfoPickerArray[5][val[5]]);

	const currentYear = new Date().getFullYear();
	const wd = getWeekday(currentYear, M, D);

	order.value.orderInfo[index].value = `${M}-${D}(${wd}) ${h1}:${m1}-${h2}:${m2}`;
	savedOrderDeliveryTime.value = order.value.orderInfo[index].value;
};

const initRandomOrderInfoTimes = () => {
	const currentYear = new Date().getFullYear();
	const M = Math.floor(Math.random() * 12) + 1;
	const D = Math.floor(Math.random() * 28) + 1;
	const h1 = Math.floor(Math.random() * 14) + 8;
	const m1 = Math.floor(Math.random() * 60);
	const s1 = Math.floor(Math.random() * 60);

	const h2 = (m1 + 30) >= 60 ? h1 + 1 : h1;
	const m2 = (m1 + 30) % 60;

	const MM = M.toString().padStart(2, '0');
	const DD = D.toString().padStart(2, '0');
	const HH1 = h1.toString().padStart(2, '0');
	const mm1 = m1.toString().padStart(2, '0');
	const HH2 = h2.toString().padStart(2, '0');
	const mm2 = m2.toString().padStart(2, '0');
	const SS1 = s1.toString().padStart(2, '0');

	const wd = getWeekday(currentYear, MM, DD);

	if (order.value.orderInfo && order.value.orderInfo.length > 0) {
		order.value.orderInfo.forEach(info => {
			if (info.label === '送达时间') {
				const randomVal = `${MM}-${DD}(${wd}) ${HH1}:${mm1}-${HH2}:${mm2}`;
				savedOrderDeliveryTime.value = randomVal;
				info.value = order.value.statusType === 'wait_pay' ? '尽快送达' : randomVal;
			} else if (info.label.includes('时间') && info.label !== '下单时间') {
				info.value = `${currentYear}-${MM}-${DD} ${HH1}:${mm1}:${SS1}.123`;
			}
		});
	}
};

const clickRandomDate = () => {
	initRandomDeliveryTime();
	initRandomPayTime();
	initRandomOrderInfoTimes();

	if (!waimaiProductList || waimaiProductList.length === 0) return;
	const randomIndex = Math.floor(Math.random() * waimaiProductList.length);
	const selected = JSON.parse(JSON.stringify(waimaiProductList[randomIndex]));
	if (order.value && selected.products && selected.products.length > 0) {
		order.value.shopName = selected.shopName || order.value.shopName;
		order.value.location = selected.location || order.value.location;

		order.value.goodsList = selected.products.map(p => ({
			image: p.image,
			title: p.title,
			spec: p.desc || '',
			actualPrice: p.price || p.actualPrice,
			oriPrice: p.oriPrice || '',
			count: p.count || '1',
			tag: p.tag || "食品安全理赔 慢必赔"
		}));
	}
};

const addGoods = () => {
	if (!order.value.goodsList) order.value.goodsList = [];
	order.value.goodsList.push({
		title: "新增外卖商品",
		image: "",
		spec: "默认规格",
		tag: "食品安全理赔 慢必赔",
		actualPrice: "10.6",
		oriPrice: "15.00",
		count: "1"
	});
};

const removeGoods = (index) => {
	if (order.value.goodsList.length > 1) {
		order.value.goodsList.splice(index, 1);
	} else {
		uni.showToast({ title: '至少保留一个商品', icon: 'none' });
	}
};

const chooseImage = (goodsItem) => {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			const tempPath = res.tempFilePaths[0];
			uni.saveFile({
				tempFilePath: tempPath,
				success: (saveRes) => {
					goodsItem.image = saveRes.savedFilePath;
					uni.showToast({ title: '图片已更新', icon: 'success' });
				}
			});
		}
	});
}

const chooseDeliveryPhoto = () => {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			const tempPath = res.tempFilePaths[0];
			uni.saveFile({
				tempFilePath: tempPath,
				success: (saveRes) => {
					order.value.deliveryPhoto = saveRes.savedFilePath;
					uni.showToast({ title: '送达图片已更新', icon: 'success' });
				}
			});
		}
	});
};

const selectDeliveryPhoto = (photo) => {
	order.value.deliveryPhoto = photo;
};

const selectMapPhoto = (photo) => {
	order.value.mapUrl = photo;
};

onShow(() => {
	const savedScreenshot = uni.getStorageSync('taobao_screenshot');
	if (savedScreenshot) {
		screenshotImage.value = savedScreenshot;
	}
})

const timeoutDelivery = computed(() => {
	if (!order.value.deliveryTime) return '';
	const parts = order.value.deliveryTime.split('-');
	if (parts.length < 2) return '';
	const timeParts = parts[1].trim().split(':');
	if (timeParts.length < 2) return '';
	let hours = parseInt(timeParts[0], 10);
	let minutes = parseInt(timeParts[1], 10) + 20;
	if (minutes >= 60) {
		hours = (hours + Math.floor(minutes / 60)) % 24;
		minutes = minutes % 60;
	}
	return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
});

const items = [
	{
		image: "/static/image/shopping/taobao/waimai/zhaorenfu.png",
		text: "找人付",
		show: () => {
			return order.value.statusType == 'wait_pay'
		}
	},
	{
		image: "/static/image/shopping/taobao/waimai/gaidingdan.png",
		text: "修改订单信息",
		show: () => order.value.statusType == 'wait_pay' || order.value.statusType == 'wait_recv',
		color: "#FE6306"
	},
	{
		image: "/static/image/shopping/taobao/waimai/shenqingshouhou.png",
		text: "申请售后",
		show: () => order.value.statusType == 'success',
	},
	{
		image: "/static/image/shopping/taobao/waimai/zaimaiyidan.png",
		text: "再买一单",
		show: () => order.value.statusType == 'success',
		color: "#FE6306"
	},
	{
		image: "/static/image/shopping/taobao/waimai/pingjiayinhongbao.png",
		text: "评价赢红包",
		show: () => order.value.statusType == 'success',
	},
	{
		image: "/static/image/shopping/taobao/waimai/lianxi.png",
		text: "联系商家",
		show: () => order.value.statusType == 'wait_recv' || order.value.statusType == 'success'
	},
	{
		image: "/static/image/shopping/taobao/waimai/lianxi.png",
		text: "联系骑士",
		show: () => order.value.statusType == 'wait_recv' || order.value.statusType == 'success'
	},
	{
		image: "/static/image/shopping/taobao/waimai/cuidan.png",
		text: "催单",
		show: () => order.value.statusType == 'wait_recv'
	},
	{
		image: "/static/image/shopping/taobao/waimai/quxiaodingdan.png",
		text: "取消订单",
		show: () => order.value.statusType == 'wait_pay' || order.value.statusType == 'wait_recv'
	},
	{
		image: "/static/image/shopping/taobao/waimai/dianhuashangjia.png",
		text: "电话商家",
		show: () => order.value.statusType == 'closed'
	}
]


</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 32rpx;
		border-radius: 28rpx;
		margin-right: 16rpx;
		background-color: #fff;
		font-size: 26rpx;
		color: #1a1a1a;
		flex-shrink: 0;
		font-weight: 500;

		&.active {
			color: #FF7824;
		}
	}
}

.random-dice {
	z-index: 100;
	padding: 10rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}


::v-deep .uni-navbar__header-btns {
	width: auto !important;
}

::v-deep .uni-navbar__header-container {
	padding: 0 14rpx;
	padding-left: 34rpx;
}

.wait-recv-page-container {
	::v-deep .placeholder-box {
		display: none;
	}
}

.nav-bar {
	background-color: #ffffff;

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

	.search-box {
		background-color: #F1F5F8;
		padding: 0 18rpx;
		width: 100%;
		border-radius: 16rpx;

		.search-icon {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}

		.input {
			width: 100%;
			height: 72rpx;
			font-size: 26rpx;

			::v-deep .input-placeholder {
				color: #7E8C9D;
			}
		}
	}

	.right-box {
		.item {
			margin-left: 30rpx;
			height: 70rpx;
			border-radius: 12rpx;
			align-items: center;
			justify-content: center;
			flex-direction: column;

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

			.text {
				font-size: 18rpx;
				color: #1A1A1A;
				line-height: 18rpx;
			}
		}
	}
}

.map-box {
	position: relative;

	.qishou {
		left: 50%;
		top: 50%;

		.qishou-info {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 20rpx 16rpx;
			margin-bottom: 8rpx;

			.title {
				font-size: 32rpx;
				color: #1A1A1A;
				line-height: 26rpx;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.time {
				font-size: 24rpx;
				color: #7B7E8C;
				line-height: 26rpx;
			}

			.green {
				color: #1AA35B;
			}
		}
	}
}

.wait_pay {
	padding: 32rpx 16rpx;
	padding-bottom: 18rpx;
	background-color: #ffffff;

	.main-text {
		font-weight: 400;
		font-size: 48rpx;
		line-height: 48rpx;
		color: #1A1A1A;
		font-weight: 600;
		margin-right: 8rpx;
		margin-left: 16rpx;
	}

	.notice-box {
		padding: 28rpx 16rpx;
		margin-top: 30rpx;
		background-color: #FAFAFA;
		border-radius: 8rpx;

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

.deliver-info {
	background-color: #FFFFFF;
	padding: 32rpx 32rpx 0;

	.bold-text {
		font-size: 40rpx;
		color: #1A1A1A;
		line-height: 40rpx;
		font-weight: 500;
	}

	.label {
		font-size: 26rpx;
		color: #1A1A1A;
		line-height: 26rpx;
		font-weight: 500;
		margin-right: 10rpx;
	}

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

	.address-info {
		font-weight: 400;
		font-size: 26rpx;
		color: #1A1A1A;
		line-height: 40rpx;
		margin-top: -8rpx;
	}

	.delivery-photo {
		overflow: hidden;
		background-color: #FFFFFF;

		.add {
			width: 80rpx;
			height: 80rpx;
			line-height: 70rpx;
			border-radius: 12rpx;
			background-color: #F0F0F0;
			margin-right: 16rpx;
			font-size: 60rpx;
			color: #8C8C8C;
			text-align: center;
		}

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
			background-color: #F0F0F0;
			box-sizing: border-box;

			&.active-photo {
				border: 4rpx solid #1AA35B !important;
			}
		}

		// &::before {
		// 	content: '+1';
		// 	background-color: #000000;
		// 	opacity: 0.5;
		// 	border-radius: 12rpx 0 12rpx 0;
		// 	font-size: 20rpx;
		// 	color: #FFFFFF;
		// 	line-height: 20rpx;
		// 	padding: 6rpx 8rpx;
		// }
	}

}

.wait_pay-buttom {
	padding: 0 32rpx;
	padding-top: 42rpx;
	background-color: #ffffff;
	padding-bottom: 32rpx;

	.button {
		background-color: #FE6306;
		width: 100%;
		height: 80rpx;
		border-radius: 12rpx;
		flex-direction: column;
		color: #FFFFFF;
	}
}



.orange {
	color: #FE6306 !important;
}

.product-info-box {
	background-color: transparent;
	margin-top: 16rpx;

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

	.info-card {
		background-color: #FFFFFF;
		padding: 24rpx 32rpx;
		margin-bottom: 16rpx;

		.shop-title-box {
			margin-bottom: 30rpx;

			.tag {
				background-color: #FE6306;
				color: #FFFFFF;
				font-size: 20rpx;
				padding: 2rpx 6rpx;
				border-radius: 4rpx;
				margin-right: 12rpx;
				line-height: 28rpx;
			}

			.shop-name {
				font-size: 30rpx;
				font-weight: 500;
				color: #1A1A1A;
				margin-right: 6rpx;
				line-height: 28rpx;
				max-width: 300rpx;
			}
		}

		.goods-collapsed {
			margin-bottom: 40rpx;

			.images {
				.img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 12rpx;
					margin-right: 12rpx;
					background-color: #F5F5F5;
					flex-shrink: 0;
				}
			}

			.count {
				font-size: 24rpx;
				color: #7C8495;
				flex-shrink: 0;
				margin-left: 20rpx;
			}
		}

		.goods-item {
			margin-bottom: 40rpx;
			align-items: flex-start;

			.goods-img-box {
				position: relative;
				width: 100rpx;
				height: 100rpx;
				margin-right: 16rpx;
				border-radius: 12rpx;
				flex-shrink: 0;

				.goods-img {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					background-color: #F5F5F5;
				}
			}

			.goods-middle {
				margin-right: 32rpx;

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

				.spec {
					font-size: 24rpx;
					color: #7C8495;
					line-height: 36rpx;
					margin-top: 4rpx;
				}

				.count {
					font-size: 24rpx;
					color: #7C8495;
					line-height: 26rpx;
					margin-top: 6rpx;
				}
			}

			.goods-right {
				.actual-price {
					color: #1A1A1A;
					line-height: 24rpx;
					margin-top: 4rpx;

					.label {
						font-size: 24rpx;
						margin-right: 4rpx;
					}

					.symbol {
						font-size: 26rpx;
						font-weight: 500;
					}

					.num {
						font-size: 36rpx;
						font-weight: 500;
					}
				}

				.ori-price {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #7C8495;
					margin-top: 10rpx;
					text-align: right;
				}
			}
		}

		.fee-item {
			margin-bottom: 32rpx;
			line-height: 26rpx;
			font-size: 26rpx;
			align-items: flex-start;

			.fee-left {
				font-size: 26rpx;
				color: #7C8495;
			}

			.fee-right {
				.actual-price {
					color: #1A1A1A;

					.label {
						font-size: 24rpx;
						margin-right: 4rpx;
					}

					.symbol {
						font-size: 26rpx;
					}

					.num {
						font-size: 36rpx;
					}
				}

				.ori-price {
					font-size: 24rpx;
					color: #7C8495;
					margin-top: 10rpx;
					text-align: right;
				}

				.red-text {
					font-size: 26rpx;
					color: #F83D3D;
				}
			}
		}

		.price-detail-title {
			margin-top: 40rpx;
			margin-bottom: 24rpx;
			line-height: 30rpx;

			.left {
				font-size: 28rpx;
				font-weight: bold;
				color: #1A1A1A;
			}

			.right {
				align-items: baseline;

				.total-discount {
					font-size: 24rpx;
					color: #FF2020;
					margin-right: 16rpx;

					.symbol {
						font-size: 22rpx;
					}
				}

				.total-actual {
					font-size: 24rpx;
					color: #1A1A1A;

					.symbol {
						font-size: 24rpx;
					}

					.num {
						font-size: 34rpx;
					}
				}
			}
		}

		.price-detail-list {
			background-color: #F1F5F8;
			border-radius: 12rpx;
			padding: 30rpx 16rpx;
			margin-bottom: 16rpx;

			.detail-item {
				margin-bottom: 36rpx;
				line-height: 26rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					font-size: 26rpx;
					color: #7C8495;
				}

				.val {
					font-size: 32rpx;
					color: #1A1A1A;

					&.red-val {
						color: #F83D3D;
					}
				}
			}
		}

		.divider-line {
			height: 1rpx;
			background-color: #D8D8D8;
			margin-bottom: 32rpx;
		}

		.order-info-area {
			.order-item {
				margin-bottom: 36rpx;
				line-height: 26rpx;

				.label {
					font-size: 26rpx;
					color: #7C8495;
					width: 140rpx;
					flex-shrink: 0;
				}

				.val {
					font-size: 24rpx;
					line-height: 26rpx;
					color: #1A1A1A;
					word-break: break-all;
					width: 100px;

					.input-box {
						width: 100%;
						overflow-x: scroll;
					}
				}
			}
		}
	}
}

.common-problem-box {
	height: 108rpx;
	background-color: #ffffff;
	padding: 0 32rpx;
	color: #1A1A1A;
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 16rpx;

	.item {
		font-size: 24rpx;
		color: #465C72;
		line-height: 24rpx;
		background-color: #F1F5F8;
		border-radius: 4rpx;
		padding: 0 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		margin-left: 18rpx;
		font-weight: 400;
	}
}
</style>
<style>
@import "/common/main.css";

page {
	background-color: #F1F5F8;
}
</style>
