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

			<view v-if="activeTab != 'refunding'">
				<view class="time-box" v-if="activeTab == 'wait_pay'" style="margin-top: 16rpx;">
					<view style="color: #87868E;" class="flex-justify-between flex-align-center">
						<text>剩余付款时间</text>
						<picker mode="multiSelector" :range="timeRange" :value="timeValue" @change="handleTimeChange">
							<text>
								<text style="color: #DD223F;font-weight: 500; margin-left: 10rpx;">{{ order.payCountdown
								}}</text>
								<image class="edit-icon" src="/static/image/common/edit.png"></image>
							</text>
						</picker>
					</view>
				</view>
				<!-- 状态切换开关 -->
				<view v-if="activeTab == 'wait_recv'" class="time-box" style="margin-top: 10rpx;">
					<view style="color: #87868E;" class="flex-justify-between flex-align-center">
						<text>物流状态</text>
						<view class="flex-align-center" @click="order.isSignFor = !order.isSignFor">
							<text style="color: #1A1A1A; margin-right: 12rpx;">{{ order.isSignFor ? '已签收' : '运输中'
							}}</text>
							<switch :checked="order.isSignFor" color="#FF7824" style="transform: scale(0.7);" />
						</view>
					</view>
				</view>
				<!-- 已发货（运输中/已签收） -->
				<view v-if="activeTab == 'wait_recv'" class="card status-box">
					<image style="width: 34rpx;height: 34rpx;flex-shrink: 0;margin-right: 8rpx;"
						:src="`/static/image/shopping/taobao/detail/${activeTab == 'wait_recv' && order.isSignFor ? 'yiqianshou' : 'yunshuzhong'}.png`"
						mode="aspectFill"></image>
					<text class="status-text">{{ activeTab == 'wait_recv' && !order.isSignFor ? '运输中' : '已签收'
					}}</text>
					<view class="status-desc flex-1 animate-scale" style="width: 100px;">
						<auto-width-input v-model="order.statusDesc2" fontSize="30rpx" fontWeight="500" color="#1A1A1A"
							placeholder="物流进度描述" show-edit type="textarea" />
					</view>
				</view>

				<!-- 交易关闭/交易成功（已送达） -->
				<view v-if="activeTab == 'closed' || activeTab == 'success'" class="card status-box"
					style="margin-bottom: 10rpx;flex-direction: column;align-items: start;">
					<view class="flex flex-align-center">
						<image style="width: 34rpx;height: 34rpx;flex-shrink: 0;"
							src="/static/image/shopping/taobao/detail/location.png" mode="aspectFill"></image>
						<view class="animate-scale" style="margin-left: 8rpx;">
							<auto-width-input v-model="order.userName" fontSize="30rpx" fontWeight="500"
								placeholder="姓名" show-edit />
						</view>
						<view class="animate-scale" style="margin-left: 8rpx;">
							<auto-width-input v-model="order.phone" fontSize="30rpx" fontWeight="500" placeholder="电话"
								show-edit />
						</view>
					</view>

					<view class="animate-scale flex-1" style="margin-left: 8rpx;margin-top: 8rpx;">
						<auto-width-input v-model="order.address" fontSize="30rpx" fontWeight="500" placeholder="详细地址"
							show-edit />
					</view>
				</view>
				<!-- 待付款（订单信息），待发货，待收货（未签收） -->
				<view v-if="activeTab != 'closed' && activeTab != 'success'" class="address-box flex">
					<image class="icon" src="/static/image/shopping/taobao/detail/location.png" mode="aspectFit">
					</image>
					<view class="content flex-1">
						<view class="up animate-scale">
							<auto-width-input v-model="order.address" fontSize="30rpx" fontWeight="500"
								placeholder="收货地址" type="textarea" show-edit />
						</view>
						<view class="down flex-align-center">
							<view class="animate-scale">
								<auto-width-input v-model="order.userName" fontSize="26rpx" color="#7C8495"
									placeholder="姓名" show-edit />
							</view>
							<view class="animate-scale" style="margin-left: 8rpx;">
								<auto-width-input v-model="order.phone" fontSize="26rpx" color="#7C8495"
									placeholder="电话" show-edit />
							</view>
						</view>
					</view>
				</view>
				<view v-if="activeTab != 'closed' && activeTab != 'success'" class="card status-desc flex-align-center">
					<image style="width: 34rpx;height: 34rpx;margin-right: 8rpx;"
						src="/static/image/shopping/taobao/detail/shandian.png"></image>
					<view class="animate-scale flex-1" :class="{ 'flex-1': activeTab != 'wait_pay' }">
						<auto-width-input v-model="order.statusDesc1" fontSize="30rpx" fontWeight="500"
							placeholder="状态描述1" show-edit />
					</view>
					<template v-if="activeTab == 'wait_pay'">
						<text
							style="margin: 0 14rpx;color: #D8D8D8;font-weight: 200;font-size: 24rpx;line-height: 24rpx;margin-top: -2px;">|</text>
						<view class="animate-scale flex-1">
							<auto-width-input v-model="order.statusDesc2" fontSize="26rpx" color="#7C8495"
								placeholder="状态描述2" show-edit />
						</view>
					</template>
				</view>

				<!-- 商店类型 (淘宝,天猫,其它)-->
				<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="card product-card">
					<!-- 商店名称 -->
					<view class="shop-name-box flex-align-center">
						<image style="height: 28rpx;" :src="`/static/image/shopping/taobao/${order.shopType}.png`"
							mode="heightFix">
						</image>
						<view class="animate-scale flex-1" style="margin: 0 4rpx;width: 100%;">
							<auto-width-input v-model="order.shopName" fontSize="28rpx" fontWeight="600" color="#00032A"
								placeholder="店铺名称" show-edit />
						</view>
					</view>
					<!-- 商品信息 -->
					<view class="goods-list flex" v-for="(item, index) in order.goodsList" :key="index">
						<image class="goods-img" :src="item.image" mode="aspectFill" @click="chooseImage"></image>
						<view class="goods-info flex-1">
							<view class="goods-title flex-justify-between flex-align-center">
								<view class="title-box flex animate-scale">
									<auto-width-input v-model="item.title" fontSize="26rpx" fontWeight="500"
										color="#00032A" placeholder="商品标题" type="textarea" show-edit />
								</view>
								<!-- <view class="price-box animate-scale flex-align-center">
									<text style="font-size: 24rpx;margin-right: 2rpx;">￥</text>
									<auto-width-input v-model="item.price" type="number" fontSize="36rpx"
										fontWeight="500" color="#1A1A1A" placeholder="价格" show-edit />
								</view> -->
							</view>
							<view class="goods-specs flex-justify-between flex-align-center">
								<view class="title-box flex animate-scale">
									<auto-width-input v-model="item.specs" fontSize="26rpx" color="#7C8495"
										placeholder="商品规格" type="textarea" show-edit />
								</view>

							</view>
							<view class="inline-tag flex-justify-between flex-align-center">
								<view class="animate-scale flex-1">
									<auto-width-input v-model="item.tags" fontSize="24rpx" color="#0AA957"
										placeholder="标签" type="textarea" show-edit />
								</view>

							</view>
							<view class="inline-tag flex-justify-between flex-align-center">
								<view class="price-box animate-scale">
									<auto-width-input v-model="item.oriPrice" type="digit" fontSize="26rpx"
										color="#7B7E8C" placeholder="商品原价" show-edit />
								</view>
							</view>
							<view class="inline-tag flex-justify-between flex-align-center">

								<view class="price-box animate-scale">
									到手价：
									<auto-width-input v-model="item.price" type="digit" fontSize="26rpx" color="#7B7E8C"
										placeholder="商品到手价" show-edit />
								</view>
							</view>
							<view class="inline-tag flex-justify-between flex-align-center">
								<view class="animate-scale">
									数量：<auto-width-input v-model="item.count" type="number" fontSize="26rpx"
										color="#1A1A1A" placeholder="商品数量" show-edit prefix="x" />
								</view>
							</view>
						</view>
					</view>

					<view class="discount-box">
						<view class="flex-justify-between flex-align-center item">
							<view class="flex-align-center">
								<image style="width:32rpx;height: 32rpx;"
									src="/static/image/shopping/taobao/detail/dianpuyouhui.png">
								</image>
								<text style="margin: 0 12rpx;font-size: 26rpx;font-weight: 500;">店铺优惠</text>
								<text style="font-size: 24rpx;color: #1A1A1A;line-height: 24rpx;">超级立减</text>
							</view>
							<view class="animate-scale flex-align-center">
								<text style="font-size: 32rpx;color: #FF7824;font-weight: 500;">-￥</text>
								<auto-width-input v-model="order.platformDiscount" type="digit" fontSize="32rpx"
									fontWeight="500" color="#FF7824" placeholder="优惠金额" show-edit />

							</view>
						</view>
						<view class="flex-justify-between flex-align-center item">
							<view class="flex-align-center">
								<image style="width:32rpx;height: 32rpx;"
									src="/static/image/shopping/taobao/detail/pingtaiyouhui.png">
								</image>
								<text style="margin: 0 12rpx;font-size: 26rpx;font-weight: 500;">平台优惠</text>
							</view>
							<view class="animate-scale flex-align-center">
								<text style="font-size: 32rpx;color: #FF7824;font-weight: 500;">-￥</text>
								<auto-width-input v-model="order.storeDiscount" type="digit" fontSize="32rpx"
									fontWeight="500" color="#FF7824" placeholder="优惠金额" show-edit />

							</view>
						</view>
					</view>
					<view class="flex-justify-between flex-align-center" style="height: 30rpx;">
						<text class="bold-text">实付款 <text v-if="activeTab == 'success' || activeTab == 'closed'"
								class="yellow-text"><text>共减</text><text class="wx-font-medium"
									style="font-size: 32rpx;">￥{{
										(Number(order.storeDiscount || 0) + Number(order.platformDiscount || 0)).toFixed(2)
									}}</text></text></text>
						<view class="price wx-font-medium flex-align-center">
							<text style="font-size: 40rpx;">￥</text>
							<auto-width-input v-model="order.totalPrice" type="digit" fontSize="44rpx" fontWeight="500"
								color="#1A1A1A" placeholder="实付款" show-edit />

						</view>
					</view>
				</view>
				<view class="order-info card">
					<view class="info-box">
						<view v-for="item in order.orderInfo" :key="item.key" class="flex-justify-between item"
							style="align-items: flex-start;" @click="onClickItemInfo(item)">
							<view class="lable" style="flex-shrink: 0; margin-top: 4rpx;">
								<text style="white-space: nowrap;">{{ item.label }}</text>
							</view>
							<view class="flex-1 flex-align-center"
								style="justify-content: flex-end;margin-left: 20rpx;width: 100px;">
								<auto-width-input class="value" v-model="item.value" fontSize="26rpx" color="#7C8495"
									:type="(item.type == 'address' || item.key == 'shippingInfo') ? 'textarea' : (item.type ? item.type : 'text')"
									show-edit style="text-align: right;"
									:disabled="item.type == 'time' || item.type == 'timeRange'" />
							</view>
						</view>
					</view>
					<view class="order-ID flex-justify-between flex-align-center">
						<text class="lable flex-align-center" @click="isFoldOrderInfoCard = !isFoldOrderInfoCard">订单信息
							<uni-icons :type="isFoldOrderInfoCard ? 'up' : 'down'" size="16"
								color="#7C8495"></uni-icons></text>
						<view class="value flex-align-center animate-scale">
							<auto-width-input v-model="order.orderId" fontSize="26rpx" color="#7C8495" placeholder="订单号"
								show-edit />
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<!-- 退款类型的收货信息编辑区域 -->
				<view class="address-box flex" style="margin-top: 16rpx; border-radius: 24rpx; margin-bottom: 20rpx;">
					<image class="icon" src="/static/image/shopping/taobao/detail/location.png" mode="aspectFit">
					</image>
					<view class="content flex-1">
						<view class="up animate-scale">
							<auto-width-input v-model="order.address" fontSize="30rpx" fontWeight="500"
								placeholder="收货地址" type="textarea" show-edit />
						</view>
						<view class="down flex-align-center">
							<view class="animate-scale">
								<auto-width-input v-model="order.userName" fontSize="26rpx" color="#7C8495"
									placeholder="姓名" show-edit />
							</view>
							<view class="animate-scale" style="margin-left: 8rpx;">
								<auto-width-input v-model="order.phone" fontSize="26rpx" color="#7C8495"
									placeholder="电话" show-edit />
							</view>
						</view>
					</view>
				</view>

				<view class="card refund-box">
					<view class="card flex-column flex-align-center">
						<view class="main-text animate-scale">
							退款成功
						</view>
						<view class="desc animate-scale" style="margin-top: 12rpx;">
							<auto-width-input v-model="order.statusDesc" fontSize="26rpx" color="#7C8495"
								placeholder="状态描述" show-edit />
						</view>
						<view class="line"></view>
					</view>
					<view class="flex-align-center refund-money-box" style="line-height: 34rpx;">
						<image style="width: 34rpx;height: 34rpx;"
							:src="`/static/image/shopping/taobao/detail/refund/icon${order.refundIcon}.png`">
						</image>
						<image style="width: 28rpx;height: 28rpx;margin-right: 16rpx;"
							src="/static/image/common/edit.png" @click="onChangeRefundIcon(order.refundIcon)"></image>
						<view class="label flex-1 animate-scale">
							<auto-width-input v-model="order.statusDesc1" fontSize="26rpx" color="#1A1A1A"
								placeholder="退款去向描述" show-edit />
						</view>
						<view class="wx-font-medium animate-scale flex-align-center">
							<text style="font-size: 28rpx;">￥</text>
							<auto-width-input v-model="order.refundMoney" type="number" fontSize="38rpx"
								fontWeight="500" color="#1A1A1A" placeholder="金额" show-edit />
						</view>
					</view>
					<view class="flex refund-money-box">
						<image style="width: 34rpx;height: 34rpx;margin-right: 16rpx;"
							src="/static/image/shopping/taobao/detail/refund/yunfeibaozhang.png"></image>
						<view>
							<view class="label">运费保障</view>
							<view class="desc animate-scale">
								<auto-width-input v-model="order.statusDesc2" fontSize="24rpx" color="#7C8495"
									placeholder="保障描述详情" show-edit />
							</view>
						</view>
					</view>
				</view>
				<view class="card refund-product-card">
					<view class="shop-name-box flex-align-center" style="margin-bottom: 20rpx;">
						<view v-if="!order.shopImg" class="upload-avatar flex-center" @click="chooseShopImg">
							<text style="font-size: 40rpx;line-height: 40rpx;color: #FF7824;">+</text>
						</view>
						<image v-else style="width: 70rpx;height: 70rpx;border-radius: 8rpx;margin-right: 12rpx;"
							:src="order.shopImg" mode="aspectFill" @click="chooseShopImg">
						</image>
						<view class="animate-scale flex-1">
							<auto-width-input v-model="order.shopName" fontSize="28rpx" fontWeight="600" color="#00032A"
								placeholder="店铺名称" show-edit />
							<auto-width-input v-model="order.shopDesc" fontSize="26rpx" color="#7C8495"
								placeholder="店铺描述" show-edit type="textarea" />
						</view>
					</view>

					<view class="product-info flex-align-center" v-for="(goods, index) in order.goodsList" :key="index">
						<image
							style="width: 140rpx;height: 140rpx;margin-right: 24rpx;flex-shrink: 0;border-radius: 12rpx;"
							:src="goods.image" mode="aspectFill" @click="chooseImage">
						</image>
						<view class="flex-1">
							<view class="name animate-scale">
								<auto-width-input v-model="goods.title" fontSize="28rpx" fontWeight="500"
									color="#1A1A1A" placeholder="商品标题" show-edit />
							</view>
							<view class="spec animate-scale" style="margin-top: 8rpx;">
								<auto-width-input v-model="goods.specs" fontSize="24rpx" color="#7C8495"
									placeholder="商品规格" show-edit />
							</view>
							<view class="tags animate-scale" style="margin-top: 8rpx;">
								<auto-width-input v-model="goods.tags" fontSize="22rpx" color="#FF7824"
									placeholder="商品标签" show-edit />
							</view>
							<view class="tags animate-scale" style="margin-top: 8rpx;">
								<auto-width-input v-model="goods.price" fontSize="22rpx" color="#1A1A1A"
									placeholder="商品价格" type="digit" show-edit />
							</view>
						</view>
					</view>
					<view class="order-info-box">
						<view class="item flex-justify-between flex-align-center">
							<text class="label">协商历史</text>
							<text class="value" style="color: #1A1A1A;">查看</text>
						</view>
						<view v-show="!isFoldRefundOrderInfoCard || item.key == 'refunTime'"
							class="item flex-justify-between" style="align-items: flex-start;"
							v-for="item in order.orderInfo" :key="item.key" @click="onClickItemInfo(item)">
							<text class="label" style="flex-shrink: 0; white-space: nowrap; margin-top: 4rpx;">{{
								item.label
							}}</text>
							<view class="flex-align-center flex-1"
								style="justify-content: flex-end; margin-left: 20rpx;">
								<auto-width-input class="value" v-model="item.value" fontSize="26rpx" color="#7C8495"
									:type="(item.type == 'address' || item.key == 'shippingInfo') ? 'textarea' : (item.type ? item.type : 'text')"
									show-edit style="text-align: right;"
									:disabled="item.type == 'time' || item.type == 'timeRange'" />
							</view>
						</view>
						<view class="order-ID flex-justify-between flex-align-center">
							<text class="lable flex-align-center"
								@click="isFoldOrderInfoCard = !isFoldOrderInfoCard">订单信息
								<uni-icons :type="isFoldOrderInfoCard ? 'up' : 'down'" size="16"
									color="#7C8495"></uni-icons></text>
							<view class="value flex-align-center animate-scale">
								<auto-width-input v-model="order.orderId" fontSize="26rpx" color="#7C8495"
									placeholder="订单号" show-edit />
							</view>
						</view>
					</view>
				</view>
				<text style="margin: 0 8rpx;display: block;font-size: 20rpx;color: #7C8495;">*点击切换商品长按可上传自定义图片*</text>
				<view class="product-img-card flex-center" @longpress.prevent="onUploadRefundImg">
					<image :src="order.productImgUrl || '/static/image/shopping/taobao/detail/refund/product1.png'"
						@click.stop="changeImage" style="width: 100%;" mode="widthFix">
					</image>
				</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, defualtData } 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("wait_pay");
const isEditMode = ref(false);
const currentId = ref('');
const navTitle = computed(() => isEditMode.value ? "修改订单" : "新增订单");

const shopTypeOptions = ['淘宝', '天猫'];
const shopTypeValues = ['taobao', 'tianmao'];
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({
	...JSON.parse(JSON.stringify(shoppingClassfiy[activeTab.value])),
	productImgUrl: '/static/image/shopping/taobao/detail/refund/product1.png'
});

// 初始化默认地址信息，防止渲染时为空
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.payCountdown) return [0, 0, 0];
	const parts = order.value.payCountdown.split(' : ');
	if (parts.length !== 3) return [0, 0, 0];
	return [
		parseInt(parts[0]) || 0,
		parseInt(parts[1]) || 0,
		parseInt(parts[2]) || 0
	];
});

//切换退款账户图标
const onChangeRefundIcon = (index) => {
	if (index < 3) {
		order.value.refundIcon = index + 1;
	} else {
		order.value.refundIcon = 1;
	}
}

const changeImage = () => {
	// 如果当前是图 1 (或为空导致的兜底图 1)，则切到图 2；否则切回图 1
	if (!order.value.productImgUrl || order.value.productImgUrl.includes('product1.png')) {
		order.value.productImgUrl = '/static/image/shopping/taobao/detail/refund/product2.png';
	} else {
		order.value.productImgUrl = '/static/image/shopping/taobao/detail/refund/product1.png';
	}
}

// 长按上传自定义退款图
const onUploadRefundImg = () => {
	// 记录旧图路径用于清理
	const oldImg = order.value.productImgUrl;

	uni.chooseImage({
		count: 1,
		success: (res) => {
			const tempPath = res.tempFilePaths[0];
			uni.showLoading({ title: '持久化处理中...' });

			// 立即转存为本地永久路径
			uni.saveFile({
				tempFilePath: tempPath,
				success: (saveRes) => {
					order.value.productImgUrl = saveRes.savedFilePath;

					// 清理旧的本地物理文件
					if (oldImg && (oldImg.includes('_doc') || oldImg.includes('store_'))) {
						uni.removeSavedFile({
							filePath: oldImg,
							success: () => console.log('旧退款图已物理删除:', oldImg)
						});
					}
					uni.hideLoading();
					uni.showToast({ title: '图片已保存', icon: 'success' });
				},
				fail: (err) => {
					console.error('退款图保存失败:', err);
					uni.hideLoading();
					order.value.productImgUrl = tempPath; // 失败则降级使用临时路径
				}
			});
		}
	});
}

/**
 * 修改倒计时时间
 */
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.payCountdown = `${h} : ${m} : ${s}`;
};

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

	if (editFlag && options.id) {
		// ... (编辑模式逻辑保持不变)
		isEditMode.value = true;
		currentId.value = String(options.id);
		const list = uni.getStorageSync('taobaoShopping') || [];
		let editData = list.find(item => String(item.id) === String(options.id));

		// 如果缓存没找到，尝试从默认 JSON 数据中找
		if (!editData) {
			editData = defualtData.find(item => String(item.id) === String(options.id));
		}

		if (editData) {
			order.value = JSON.parse(JSON.stringify(editData));

			// 优先使用 statusType 对齐 Tab 状态，兜底使用 activeTab
			activeTab.value = editData.statusType || editData.activeTab || 'wait_pay';
		}

	} else {
		// 新增：执行通用随机化逻辑
		if (order.value) {
			randomizeOrderInfo();
			// 随机初始化特定状态字段 (倒计时等)
			if (activeTab.value === 'wait_pay' && !order.value.payCountdown) {
				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.payCountdown = `${h} : ${m} : ${s}`;
			}
			// 随机初始化商品
			clickRandomDate();
		}
	}
});

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

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

	// 过滤掉当前已经选中的商品
	let availableProducts = shoppingProductList.filter(p => {
		const title = p.goodsList?.[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;
		order.value.storeDiscount = selected.storeDiscount || order.value.storeDiscount;
		order.value.platformDiscount = selected.platformDiscount || order.value.platformDiscount;


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

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

	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.shopImg = 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.shopImg = tempFilePath;
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		}
	});
}

/**
 * 选择图片并转换为本地持久化路径 (并清理旧图)
 */
const chooseImage = () => {
	// 记录旧图路径用于清理
	const oldImagePath = order.value.goodsList[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.goodsList[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 位订单号 (淘宝格式 1/3 开头)
 */
const generateRandomOrder = () => {
	let orderNo = Math.random() > 0.5 ? '3' : '1';
	for (let i = 0; i < 17; 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 = order.value ? JSON.parse(JSON.stringify(order.value)) : null;

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

	// 确保从模板加载后 productImgUrl 不为空
	if (!order.value.productImgUrl) {
		order.value.productImgUrl = '/static/image/shopping/taobao/detail/refund/product1.png';
	}

	if (order.value && oldData) {
		// 恢复通用字段
		order.value.userName = oldData.userName || order.value.userName;
		order.value.phone = oldData.phone || order.value.phone;
		order.value.address = oldData.address || order.value.address;
		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;
		order.value.productImgUrl = oldData.productImgUrl || order.value.productImgUrl;

		// 如果不是退款模式，则恢复优惠金额；如果是退款模式，则保持模板中的空值（或显式清空）
		if (activeTab.value !== 'refunding') {
			order.value.platformDiscount = oldData.platformDiscount || order.value.platformDiscount;
			order.value.storeDiscount = oldData.storeDiscount || order.value.storeDiscount;
		} else {
			order.value.platformDiscount = '';
			order.value.storeDiscount = '';
		}

		// 恢复商品数据
		if (order.value.goodsList && order.value.goodsList[0] && oldData.goodsList && oldData.goodsList[0]) {
			order.value.goodsList[0] = JSON.parse(JSON.stringify(oldData.goodsList[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) {
			randomizeOrderInfo();
			// 随机初始化特定状态字段 (如待付款倒计时)
			if (activeTab.value === 'wait_pay' && !order.value.payCountdown) {
				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.payCountdown = `${h} : ${m} : ${s}`;
			}
		}
	}
}

/**
 * 通用随机化订单信息字段 (针对 time, date, number 类型)
 */
const randomizeOrderInfo = () => {
	if (!order.value) return;

	// 1. 处理主订单号 (18位)：仅在为空时生成
	if (!order.value.orderId || order.value.orderId.trim() === '') {
		order.value.orderId = generateRandomOrder();
	}

	if (!order.value.orderInfo) return;

	const now = new Date();
	const createDate = new Date(now.getTime() - (Math.floor(Math.random() * 60 + 60) * 60 * 1000));
	const payDate = new Date(createDate.getTime() + (Math.floor(Math.random() * 10 + 5) * 60 * 1000));
	const deliverDate = new Date(payDate.getTime() + (Math.floor(Math.random() * 120 + 30) * 60 * 1000));
	const finishDate = new Date(deliverDate.getTime() + (Math.floor(Math.random() * 180 + 60) * 60 * 1000));

	order.value.orderInfo.forEach(item => {
		// 只有在值为空时才进行随机化填充，防止覆盖手动修改的数据
		if (!item.value || item.value.trim() === '') {
			// 处理时间/日期类
			if (item.type === 'time' || item.type === 'date') {
				let targetDate = now;
				if (item.key === 'createTime') targetDate = createDate;
				else if (item.key === 'paymentTime' || item.key === 'applyTime') targetDate = payDate;
				else if (item.key === 'deliveryTime') targetDate = deliverDate;
				else if (item.key === 'refunTime') targetDate = finishDate;
				else {
					targetDate = new Date(now.getTime() - Math.floor(Math.random() * 3 * 24 * 3600 * 1000));
				}
				item.value = formatTime(targetDate);
			}
			// 处理数字类
			else if (item.type === 'number') {
				const prefix = formatTime(now).replace(/[- :]/g, '').substring(0, 8);
				let suffix = '';
				for (let i = 0; i < 20; i++) suffix += Math.floor(Math.random() * 10);
				item.value = prefix + suffix;
			}
		}
	});
};

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

	order.value.activeTab = activeTab.value;
	order.value.statusType = activeTab.value; // 同步状态字段，适配详情页

	// 处理图片持久化 (主图)
	const product = order.value.goodsList[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;
		} catch (err) {
			console.error('主图保存失败:', err);
		}
	}

	// 处理图片持久化 (退款图)
	if (order.value.productImgUrl && (order.value.productImgUrl.includes('tmp') || order.value.productImgUrl.includes('blob'))) {
		try {
			const res = await new Promise((resolve, reject) => {
				uni.saveFile({
					tempFilePath: order.value.productImgUrl,
					success: resolve,
					fail: reject
				});
			});
			order.value.productImgUrl = res.savedFilePath;
			console.log('退款图持久化成功:', order.value.productImgUrl);
		} 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('taobaoShopping', 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?.userName,
	() => order.value?.phone,
	() => order.value?.address
], ([name, phone, addr]) => {
	if (!order.value) return;

	// 1. 同步“收货信息”
	const userInfoValue = `${name || ''} ${phone || ''}，${addr || ''}`.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.orderInfo, '收货信息', userInfoValue);
}, { deep: true, immediate: true });

// 自动计算实付款总额
watch([
	() => order.value?.goodsList?.[0]?.price,
	() => order.value?.goodsList?.[0]?.count,
	() => order.value?.platformDiscount,
	() => order.value?.storeDiscount,
	() => order.value?.carriage
], ([price, count, pDiscount, sDiscount, carriage]) => {
	if (!order.value) return;
	const p = parseFloat(price) || 0;
	const n = parseInt(count) || 1;
	const pd = parseFloat(pDiscount) || 0;
	const sd = parseFloat(sDiscount) || 0;
	const c = parseFloat(carriage) || 0;

	// 计算逻辑：(原价 * 数量) - platformDiscount - storeDiscount + carriage
	const total = (p * n - pd - sd + c).toFixed(2);
	order.value.totalPrice = total;
}, { deep: true, immediate: true });

// 实时同步“退款金额”字段 (头部大字与详情列表联动)
watch(() => order.value?.refundMoney, (newVal) => {
	if (!order.value || !order.value.orderInfo) return;
	const target = order.value.orderInfo.find(i => i.key === 'refunMoney');
	if (target && target.value !== newVal) {
		target.value = newVal;
	}
}, { immediate: true });

watch(() => order.value?.orderInfo, (newInfo) => {
	if (!order.value || !newInfo) return;
	const target = newInfo.find(i => i.key === 'refunMoney');
	if (target && target.value !== order.value.refundMoney) {
		order.value.refundMoney = target.value;
	}
}, { deep: 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;
	}
}

.status-box {
	padding: 16rpx 32rpx;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;

	.status-text {
		flex-shrink: 0;
		font-size: 30rpx;
		color: #FF7824;
		line-height: 30rpx;
		font-weight: 500;
		white-space: nowrap;
	}

	.status-desc {
		overflow: hidden;
		text-overflow: ellipsis;
		flex-shrink: 0;
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 30rpx;
		font-weight: 500;
		margin-left: 8rpx;
		white-space: nowrap;
	}
}

.address-box {
	background-color: #FFFFFF;
	padding: 18rpx 32rpx 28rpx;
	display: flex;
	align-items: flex-start;

	.icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 8rpx;
	}

	.edit-text {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #FF7824;
		line-height: 26rpx;
		margin-top: 6rpx;
	}

	.content {
		.up {
			font-weight: 500;
			font-size: 30rpx;
			line-height: 1.5;
			color: #1A1A1A;
			margin-bottom: 18rpx;
		}

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

	}

}

.card {
	background-color: #FFFFFF;

	&.status-desc {
		margin: 16rpx 0;
		padding: 0 32rpx;
		height: 84rpx;

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

		text {
			font-size: 26rpx;
			color: #7C8495;
			line-height: 24rpx;
		}
	}

	.upload-avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 8rpx;
		margin-right: 12rpx;
		background-color: #D8D8D8;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&.product-card {
		background-color: #FFFFFF;
		padding: 32rpx;

		.shop-name-box {


			.shop-name {
				font-size: 28rpx;
				color: #00032A;
				line-height: 1.5;
				font-weight: 600;
				margin: 0 4rpx;
			}
		}

		.goods-list {
			margin-top: 24rpx;

			.goods-img {
				flex-shrink: 0;
				width: 156rpx;
				height: 156rpx;
				border-radius: 12rpx;
				margin-right: 24rpx;
			}

			.goods-specs {
				color: #7C8495 !important;
				font-size: 26rpx;
				line-height: 26rpx;
				margin-top: 24rpx;

				.title {
					color: #7C8495 !important;
					size: 26rpx;
					font-weight: 400;
				}

				.price {
					font-size: 26rpx;
					color: #7B7E8C;
					line-height: 26rpx;
					font-weight: 500;

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

			.inline-tag {
				margin-top: 18rpx;

				.desc {
					font-size: 24rpx;
					color: #0AA957;
					line-height: 24rpx;
				}

			}

			.title-box {
				flex: 1;
				width: 100px;
				min-height: 32rpx;
				line-height: 1.5;
				text-align: left;
			}

			.title {
				position: relative;
				width: 100%;
				font-size: 26rpx;
				color: #00032A;
				line-height: 1.5;
				font-weight: 500;
			}


			.price {
				margin-left: 18rpx;
				color: #1A1A1A;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 30rpx;

				.small {
					font-size: 30rpx;
				}
			}
		}

		.btn-box {
			display: flex;
			justify-content: flex-end;
			margin-top: 12rpx;
			margin-bottom: 40rpx;

			.btn {
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 12rpx;
				margin-left: 12rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				padding: 0 28rpx;
				background-color: #F1F5F8;
			}

			.primary {
				background-color: #FFECE5;
				color: #F37120;
				font-weight: 500;
			}
		}

		.total-price-box {

			padding-bottom: 30rpx;
			border-bottom: 0.5px solid #D8D8D8;

			.title {
				font-size: 30rpx;
				color: #00032A;
				line-height: 30rpx;
				font-weight: 500;
				margin-right: 8rpx;
			}

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

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

		.discount-box {
			margin-top: 48rpx;

			.item {
				margin-bottom: 46rpx;
				height: 32rpx;
			}

			.discount-price {
				font-size: 32rpx;
				color: #FF7824;
				font-weight: 500;
			}
		}
	}

	&.order-info {
		padding: 28rpx 32rpx;
		margin: 16rpx 0;

		.order-ID {

			.lable {
				font-size: 30rpx;
				line-height: 32rpx;
				color: #1A1A1A;
				font-weight: 500;
				// margin-right: 6rpx;
			}

			.value {
				font-weight: 400;
				font-size: 26rpx;
				color: #7C8495;
				line-height: 26rpx;
				text-align: right;

			}
		}

		.item {
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;

			.lable {
				font-size: 26rpx;
				color: #1A1A1A;
				line-height: 26rpx;
				flex-shrink: 0;
				display: flex;
				flex-wrap: nowrap;
				align-content: center;
			}

			.value {
				font-size: 26rpx;
				color: #7C8495;
				line-height: 26rpx;
				margin-left: 50rpx;
			}
		}
	}
}

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

.bottom-box {
	display: flex;
	justify-content: space-between;
	background-color: #FFFFFF;
	padding: 0 28rpx;
	padding-top: 24rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 0.5px solid #ECEDEF;
	height: 108rpx;
	height: calc(108rpx + env(safe-area-inset-bottom));
	height: calc(108rpx + constant(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	padding-bottom: constant(safe-area-inset-bottom);

	.left-icons {
		.icon-box {
			margin-right: 28rpx;

			.text {
				font-size: 20rpx;
				color: #7C8495;
				line-height: 20rpx;
			}
		}
	}

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

		.btn {
			height: 70rpx;
			width: 164rpx;
			text-align: center;
			line-height: 70rpx;
			background-color: #F4F5F7;
			color: #1A1A1A;
			margin-left: 16rpx;
			border-radius: 12rpx;
			font-size: 26rpx;
			font-weight: 400;

			&.primary {
				background-color: #FD6205;
				color: #FFFFFF;
			}
		}

		&.wait_pay {
			.price {
				font-size: 36rpx;
				color: #FF7824;
				line-height: 24rpx;
			}

			.btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 220rpx;
				height: 80rpx;

				.pay {
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 26rpx;
				}

				.time {
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 22rpx;
					margin-top: 8rpx;
				}
			}

			.save {
				font-size: 26rpx;
				color: #FF7824;
				line-height: 24rpx;
				text-align: right;
				margin-top: 8rpx;
			}
		}
	}
}

.bold-text {
	font-size: 30rpx;
	color: #00032A;
	line-height: 30rpx;
	font-weight: 500;

	.yellow-text {
		color: #FF7824;
		font-weight: 400;
		margin-left: 6rpx;
	}
}

.refund-box {
	padding: 0 32rpx;
	padding-top: 68rpx;
	padding-bottom: 10rpx;

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

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

	.line {
		margin-top: 58rpx;
		height: 0.5px;
		width: 100%;
		background-color: #E5E5E5;
	}

	.refund-money-box {
		padding: 28rpx;

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

		.wx-font-medium {
			font-weight: 500;
		}

		.desc {
			font-size: 26rpx;
			color: #7C8495;
			line-height: 26rpx;
			margin-top: 16rpx;
		}
	}



}

.refund-product-card {
	margin: 16rpx 0;
	padding: 20rpx 32rpx;

	.product-info {
		margin-bottom: 16rpx;

		.flex-1 {
			width: 100rpx;
		}

		.name {
			font-size: 26rpx;
			color: #00032A;
			line-height: 1.5;
			min-height: 28rpx;
		}

		.spec {
			margin-top: 18rpx;
			font-size: 26rpx;
			color: #7C8495;
			line-height: 1.5;
		}

		.tags {
			margin-top: 18rpx;
			font-size: 26rpx;
			color: #DD6F0E;
			line-height: 22rpx;
		}
	}

	.order-info-box {
		border-top: 0.5px solid #E5E5E5;
		padding-top: 24rpx;

		.item {
			margin-bottom: 32rpx;
			line-height: 1.5;
			font-size: 26rpx;
			color: #7C8495;
		}
	}


}

.help-box {
	padding: 30rpx 32rpx;

	.card-title-box {
		width: 100%;

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

		.look-more {
			font-size: 26rpx;
			color: #7C8495;
			line-height: 26rpx;
			font-weight: 400;
		}
	}

	.btn-box {
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;

		.btn {
			width: calc(50% - 9rpx);
			height: 56rpx;
			line-height: 56rpx;
			white-space: nowrap;
			text-align: center;
			font-size: 26rpx;
			color: #41495C;
			font-weight: 400;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #D0D0D2;
			margin-top: 16rpx;
		}
	}
}

.refunding-title-box {
	display: flex;
	flex-wrap: nowrap;

	text {
		font-size: 26rpx;
		color: #7C8495;
		line-height: 24rpx;
		white-space: nowrap;
	}

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

	.next {
		margin: 0 18rpx;
	}
}

.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 0;
	padding: 16rpx;
	background-color: #ffffff;
}

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

.product-img-card {
	margin: 16rpx 0;
	min-height: 100rpx;
	background-color: #ffffff;
}

.animate-scale {
	overflow: auto;
}
</style>