<template>
	<nav-bar title="订单详情" bgColor="#FFFFFF" isBack :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton"
		tipLayerType="taobao-shopping-order-detail-tip" isTipLayer tipLayerText="编辑订单信息">
		<template v-slot:left>
			<image v-if="order" @click="util.goBack" class="back-icon"
				:src="`/static/image/shopping/taobao/detail/${order?.statusType == 'refunding' ? 'refund-back' : 'back'}.png`"
				mode="aspectFit"></image>
		</template>
		<template v-slot:center>
			<view v-if="order" class="center-content">
				<view v-if="order.statusType == 'refunding' && currentFilter == 4" class="refunding-title-box">
					<image class="icon" src="/static/image/shopping/taobao/detail/refund/finish.png"></image>
					<text>商家处理</text>
					<image class="next icon" src="/static/image/shopping/taobao/detail/refund/next.png"></image>
					<image class="icon" src="/static/image/shopping/taobao/detail/refund/finish.png"></image>
					<text>寄回商品</text>
					<image class="icon next" src="/static/image/shopping/taobao/detail/refund/next.png"></image>
					<text>3退款结束</text>
				</view>
				<view v-else class="title-box">
					<view class="title">{{ order.statusType == 'refunding' ? '交易关闭' : titleList[order.statusType] }}
					</view>
					<view v-if="order.statusType == 'wait_recv' && order.isSignFor" class="desc">
						还剩{{ order.confirmReceiptCountdown }}自动确认</view>
				</view>
			</view>
		</template>
		<template v-slot:right>
			<view class="right-box">
				<image class="icon" src="/static/image/shopping/taobao/detail/more.png" mode="aspectFit">
				</image>
			</view>
		</template>
	</nav-bar>

	<view v-if="order && currentFilter != 4">
		<view v-if="order.statusType == 'wait_recv' || order.statusType == 'refunding'" class="card status-box"
			:style="{ 'margin-bottom': order.statusType == 'refunding' ? '16rpx' : '0', padding: order.statusType == 'refunding' ? '28rpx 32rpx' : '22rpx 32rpx' }">
			<image style="width: 34rpx;height: 34rpx;flex-shrink: 0;margin-right: 8rpx;"
				:src="`/static/image/shopping/taobao/detail/${(order.statusType == 'wait_recv' && order.isSignFor || order.statusType == 'refunding') ? 'yiqianshou' : 'yunshuzhong'}.png`"
				mode="aspectFill"></image>
			<text class="status-text">{{ order.statusType == 'wait_recv' && !order.isSignFor ? '运输中' : '已签收' }}</text>
			<text></text>
			<text class="status-desc flex-1" style="width: 100px;">
				{{ order.statusType == 'refunding' ? order.userName + ' ' + "86-" + order.phone + ' 送至 ' +
					order.address : order.statusDesc2 }}</text>
			<uni-icons type="right" size="12" color="#7C8495"></uni-icons>
		</view>
		<view v-if="order.statusType == 'closed' || order.statusType == 'success'" class="card status-box"
			style="margin-bottom: 10rpx;">
			<image style="width: 34rpx;height: 34rpx;flex-shrink: 0;"
				src="/static/image/shopping/taobao/detail/location.png" mode="aspectFill"></image>
			<text class="status-desc">{{ order.userName }}</text>
			<text class="status-desc">86-{{ order.phone }}</text>
			<text class="status-desc flex-1" style="width: 100px;">{{ order.address }}</text>
			<uni-icons type="down" size="12" color="#7C8495"></uni-icons>
		</view>
		<view v-if="order.statusType != 'closed' && order.statusType != 'success' && order.statusType != 'refunding'"
			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">{{ order.address }}</view>
				<view class="down flex-align-center">{{ order.userName }} 86-{{ order.phone }}
					<image style="height: 28rpx;margin-left: 12rpx;"
						src="/static/image/shopping/taobao/detail/haomabaohuzhong.png" mode="heightFix">
					</image>
				</view>
			</view>
			<view class="edit-text">
				<text>修改</text>
				<uni-icons type="right" size="14" color="#FF7824"></uni-icons>
			</view>
		</view>
		<view v-if="order.statusType != 'closed' && order.statusType != 'success' && order.statusType != 'refunding'"
			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>
			<text class="desc title" :class="{ 'flex-1': order.statusType != 'wait_pay' }">{{ order.statusDesc1
			}}</text>
			<template v-if="order.statusType == 'wait_pay'">
				<text
					style="margin: 0 14rpx;color: #D8D8D8;font-weight: 200;font-size: 24rpx;line-height: 24rpx;margin-top: -2px;">|</text>
				<text class="desc">{{ order.statusDesc2 }}</text>
			</template>
			<uni-icons v-else type="right" size="12" color="#7C8495"></uni-icons>
		</view>

		<!-- 商品卡片 -->
		<view class="card product-card">
			<!-- 商店名称 -->
			<view class="shop-name-box flex-align-center flex-justify-between refunding-style"
				v-if="order.statusType == 'refunding'">
				<image v-if="order.shopImg" class="refund-shop" style="height: 70rpx;width: 70rpx;margin-right: 18rpx;"
					:src="order.shopImg" mode="aspectFill">
				</image>
				<view class="flex-1 flex-column">
					<text class="shop-name">{{ order.shopName }}</text>
					<text v-if="order.shopDesc" class="shop-desc">{{ order.shopDesc }}</text>
				</view>
				<view class="flex-align-center">
					<text style="font-size: 26rpx;color: #7C8495;line-height: 26rpx;">进店逛逛</text>
					<uni-icons type="right" size="14" color="#8C8C8C"></uni-icons>
				</view>
			</view>
			<!-- 商店名称 -->
			<view class="shop-name-box flex-align-center" v-if="order.statusType != 'refunding'">
				<image style="height: 28rpx;" :src="`/static/image/shopping/taobao/${order.shopType}.png`"
					mode="heightFix">
				</image>
				<text class="shop-name">{{ order.shopName }} </text>
				<uni-icons type="right" size="14" color="#8C8C8C"></uni-icons>
			</view>
			<!-- 商品信息 -->
			<view class="goods-list flex" :class="{ 'flex-align-center': order.statusType != 'refunding' }"
				v-for="(item, index) in order.goodsList" :key="index">
				<image class="goods-img" :src="item.image" mode="aspectFill"></image>
				<view class="goods-info flex-1">
					<view class="goods-title flex-justify-between flex-align-center">
						<view class="title-box flex ">
							<text class="title flex-1">{{ item.title }}</text>
							<uni-icons v-if="item.title.length > 15" class="uni-icon" type="down" size="12"
								color="#7C8495"></uni-icons>
						</view>

						<text class="price wx-font-medium flex-align-center"><text class="small">￥</text>{{
							Number(item.price).toFixed(2).split('.')[0] }}.<text style="font-size: 26rpx;">{{
								Number(item.price).toFixed(2).split('.')[1] }}</text>
							<uni-icons style="margin-top: -4rpx;" type="right" size="12"
								color="#7C8495"></uni-icons></text>
					</view>
					<view class="goods-specs flex-justify-between flex-align-center">
						<view class="title-box flex ">
							<text class="title flex-1">{{ item.specs }}</text>
							<uni-icons v-if="item.specs.length > 15" class="uni-icon" type="down" size="12"
								color="#7C8495"></uni-icons>
						</view>

						<text
							v-if="item.oriPrice && Number(item.oriPrice) > 0 && Number(item.oriPrice) > Number(item.price)"
							class="price wx-font-medium flex-align-center"><text class="small">￥</text>{{
								Number(item.oriPrice).toFixed(2) }}</text>
					</view>
					<view class="inline-tag flex-justify-between flex-align-center">
						<text class="desc flex-1">
							{{ item.tags }}
							<uni-icons type="right" size="12" color="#0AA957"></uni-icons>
						</text>
						<text>x{{ item?.count }}</text>
					</view>
					<view class="refunding-desc" v-if="order.statusType == 'refunding'">
						<view class="flex-align-center">
							<text class="label" style="color:#F37120">退款成功</text>
							<text class="value">{{ order.statusDesc }}</text>
						</view>
						<uni-icons color="#D8D8D8" type="right" size="12"></uni-icons>
					</view>
				</view>
			</view>

			<view class="btn-box">
				<view v-for="(btn, index) in btnList[order.statusType]" :key="index" class="btn"
					:class="{ primary: btn.isPrimary }">{{
						btn.name
					}}
				</view>
			</view>
			<view v-if="!isFoldProductCard && order.statusType != 'refunding'"
				class="total-price-box flex-justify-between flex-align-center">
				<view class="flex-align-center">
					<text class="title">商品总价</text>
					<text class="count">共{{ getGoodsTotalCount(order.goodsList) }}件</text>
				</view>
				<view class="price wx-font-medium">
					<text style="font-size: 30rpx;">￥</text>
					<text style="font-size: 36rpx;">{{ getGoodsTotalPrice(order.goodsList).split('.')[0] }}.</text>
					<text style="font-size: 30rpx;">{{ getGoodsTotalPrice(order.goodsList).split('.')[1] }}</text>
				</view>
			</view>
			<view v-if="!isFoldProductCard && order.statusType != 'refunding'" class="discount-box">
				<view v-if="order.platformDiscount && Number(order.platformDiscount) > 0"
					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>
					<text class="wx-font-medium discount-price ">-￥{{ order.platformDiscount }}<uni-icons type="right"
							size="14" color="#FF7824"></uni-icons></text>
				</view>
				<view v-if="order.storeDiscount && Number(order.storeDiscount) > 0"
					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>
					<text class="wx-font-medium discount-price ">-￥{{ order.storeDiscount }}<uni-icons type="right"
							size="14" color="#FF7824"></uni-icons></text>
				</view>
			</view>
			<view class="flex-justify-between flex-align-center" style="height: 30rpx;">
				<text class="bold-text">实付款 <text v-if="order.statusType == 'success' || order.statusType == '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">
					<text style="font-size: 40rpx;">￥</text>
					<text style="font-size: 44rpx;">{{ Number(order.totalPrice).toFixed(2).split('.')[0] }}.</text>
					<text style="font-size: 32rpx;">{{ Number(order.totalPrice).toFixed(2).split('.')[1] }}</text>
					<uni-icons style="margin-left: 6rpx;"
						:type="isFoldProductCard && order.statusType != 'refunding' ? 'down' : 'up'" size="14"
						color="#D8D8D8" @click="isFoldProductCard = !isFoldProductCard"></uni-icons>
				</view>
			</view>
		</view>
		<view class="order-info card">
			<view v-if="!isFoldOrderInfoCard" class="info-box">
				<view v-for="item in order.orderInfo" :key="item.key"
					v-show="order.statusType == 'refunding' ? !item.isCurrentFilter4 : true"
					class="flex-justify-between flex-align-center item">
					<view class="lable">
						<text style="white-space: nowrap;">{{ item.label }}</text>
						<image v-if="item.key == 'shippingInfo'" style="width: 26rpx;height: 26rpx;margin-left: 8rpx;"
							src="/static/image/shopping/taobao/detail/eye.png"></image>
					</view>
					<text class="value" style="text-align: right;">
						<text v-if="item.key == 'shippingInfo'" style="text-align: right;line-height: 34rpx;">{{
							order.userName + ' ' +
							"86-" + order.phone + '，' +
							order.address
						}}</text>
						<text v-else style="text-align: right;">{{ item.value }}</text>
						<uni-icons v-if="item.key == 'tianmaoIntegral' || item.key == 'transactionSnapshot'"
							style="margin-top: -4rpx;margin-left: 4rpx;" type="right" size="12"
							color="#7C8495"></uni-icons>
					</text>
				</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">
					<text>{{ order.orderId }}</text>
					<text style="margin: 0 10rpx; font-size: 22rpx;">|</text>
					<text style="color: #1A1A1A;">复制</text>
				</view>
			</view>
		</view>
		<image v-if="order.statusType == 'refunding'" class="product-img-card" style="margin: 0;width: 100%;"
			:src="order.productImgUrl || '/static/image/shopping/taobao/detail/refund/product1.png'" mode="widthFix">
		</image>
		<view v-else class="card service-card flex-align-center flex-justify-between">
			<text class="label">服务保障</text>
			<view class="">
				<text class="more">查看更多</text>
				<uni-icons type="right" size="14" color="#EF7518"></uni-icons>
			</view>
		</view>
		<view :style="order.statusType == 'refunding' ? 'margin-top: 6rpx;' : 'margin-top: 16rpx;'">
			<image style="width: 100%;" :src="screenshotImage" mode="widthFix"></image>
		</view>
	</view>
	<view v-else-if="order.statusType == 'refunding' && currentFilter == 4">
		<view class="card  refund-box">
			<view class="card  flex-column flex-align-center">
				<view class="main-text">退款成功</view>
				<view class="desc">平台支持您的退款申请。</view>
				<view class="line"></view>
			</view>
			<view class="flex-align-center refund-money-box" style="line-height: 34rpx;">
				<image style="width: 34rpx;height: 34rpx;margin-right: 16rpx;"
					:src="`/static/image/shopping/taobao/detail/refund/icon${order.refundIcon}.png`"></image>
				<text class="label flex-1">{{ order.statusDesc1 }}</text>
				<text class="wx-font-medium">
					<text style="font-size: 28rpx;">￥</text>
					<text style="font-size: 38rpx;">{{ Number(order.refundMoney).toFixed(2).split('.')[0] }}.</text>
					<text style="font-size: 28rpx;">{{ Number(order.refundMoney).toFixed(2).split('.')[1] }}</text>
				</text>
			</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">{{ order.statusDesc2 }}</view>
				</view>
			</view>
		</view>
		<view class="card refund-product-card">
			<template></template>
			<view class="product-info flex-align-center" v-for="goods in order.goodsList" :key="goods.name">
				<image style="width: 140rpx;height: 140rpx;margin-right: 24rpx;flex-shrink: 0;" :src="goods.image">
				</image>
				<view class="flex-1">
					<view class="name">{{ goods.title }}</view>
					<view class="spec">{{ goods.specs }}
						<uni-icons type="down" color="#D8D8D8" size="12"></uni-icons>
					</view>
					<view class="tags">{{ goods.tags }}</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') && item.isCurrentFilter4"
					class="item flex-justify-between flex-align-center" v-for="item in order.orderInfo" :key="item.key">
					<text class="label">{{ item.label }}</text>
					<text class="value">{{ item.value }} <text style="color: #1A1A1A;"
							v-if="item.key == 'refundId'">·复制</text></text>
				</view>
				<view class="item flex-justify-between flex-align-center" style="margin-bottom: 0;"
					@click="isFoldRefundOrderInfoCard = !isFoldRefundOrderInfoCard">
					<text class="label">{{ isFoldRefundOrderInfoCard ? '查看全部售后信息' : '收起售后信息' }} <uni-icons
							:type="isFoldRefundOrderInfoCard ? 'down' : 'up'" size="14"
							color="#7C8495"></uni-icons></text>
				</view>
			</view>
		</view>
		<view class="product-img-card">
			<image :src="order.productImgUrl || '/static/image/shopping/taobao/detail/refund/product1.png'"
				style="width: 100%;" mode="widthFix">
			</image>
		</view>
		<view class="card help-box">
			<view class="flex-align-center card-title-box">
				<image style="width: 34rpx;height: 34rpx;margin-right: 16rpx;"
					src="/static/image/shopping/taobao/detail/refund/kefu.png"></image>
				<text class="title flex-1">您是否遇到以下问题？</text>
				<text class="look-more">查看更多</text>
				<uni-icons type="right" size="14" color="#7C8495"></uni-icons>
			</view>
			<view class="flex btn-box">
				<view class="btn">卖家什么时候退款</view>
				<view class="btn">没有退款入口怎么办</view>
				<view class="btn">运费险理赔</view>
				<view class="btn">运费谁承担</view>
			</view>
		</view>
		<view class="bottom-template" >

		</view>
	</view>
		<view class="" :style="{'height':$store.state.safeBottomAz+'px'}">

		</view>


	<view v-if="order" class="bottom-box flex-justify-between flex-align-center" :style="{'padding-bottom':($store.state.safeBottomAz||$store.state.safeBottom)+'px'}">
		<view class="left-icons flex">
			<view class="icon-box" v-for="icon in bottomBtnList[order.statusType].icons" :key="icon.name">
				<image style="width: 40rpx;height: 40rpx;"
					:src="`/static/image/shopping/taobao/detail/${icon.icon}.png`">
				</image>
				<view class="text">{{ icon.name }}</view>
			</view>
		</view>
		<view v-if="order.statusType != 'wait_pay'" class="right-btns flex-align-center">
			<view class="btn" v-for="btn in bottomBtnList[currentFilter == 4 ? 'refunding2' : order.statusType].btns"
				:key="btn.name" :class="{ primary: btn.isPrimary }">{{ btn.name }}
			</view>
		</view>
		<view v-else class="right-btns flex-align-center wait_pay">
			<view>
				<view>
					<text class="count">共{{ getGoodsTotalCount(order.goodsList) }}件</text>
					<text style="font-size: 28rpx;color: #1A1A1A;line-height: 24rpx;">合计:</text>
					<text class="price wx-font-medium">￥{{ Number(order.totalPrice).toFixed(2) }}</text>
				</view>
				<view class="save" v-if="Number(
					Number(order.platformDiscount || 0) + Number(order.storeDiscount || 0)).toFixed(2) > 0">共减<text
						class="wx-font-medium" style="margin-left: 6rpx;">￥{{ Number(
							Number(order.platformDiscount || 0) + Number(order.storeDiscount || 0)).toFixed(2) }}</text>
				</view>
			</view>
			<view class="btn primary">
				<text class="pay">继续付款</text>
				<text class="time">剩余{{ order.payCountdown }}</text>
			</view>
		</view>
	</view>

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

<script setup>
import { ref, computed, onUnmounted, watch, onMounted, getCurrentInstance, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { util } from '@/utils/common.js';
import { shoppingType, defualtData } from '../json/order.json'

//导航栏菜单按钮
const buttonGroup = [
	{
		name: "编辑订单",
		click: () => {
			if (order.value && order.value.id) {
				uni.navigateTo({
					url: `/pages/shopping/taobao/add-shopping-order/add-shopping-order?id=${order.value.id}&isEdit=true`
				});
			} else {
				uni.showToast({ title: '订单数据未加载', icon: 'none' });
			}
		}
	}
]
const screenshotImage = ref('')
const titleList = {
	"wait_pay": "待付款",
	"wait_send": "待发货",
	"wait_recv": "待收货",
	"refunding": "退款/售后",
	"closed": "交易关闭",
	"success": "交易成功"
}

const btnList = {
	"wait_pay": [
		{
			name: "更换款式",
			isPrimary: true
		},
		{
			name: "加入购物车",
			isPrimary: false
		}
	],
	"wait_send": [
		{
			name: "加入购物车",
			isPrimary: false
		},
		{
			name: "申请退款",
			isPrimary: false
		}
	],
	"wait_recv": [
		{
			name: "加入购物车",
			isPrimary: false
		},
		{
			name: "申请退款",
			isPrimary: false
		}
	],
	"success": [
		{
			name: "咸鱼转卖",
			isPrimary: true
		},
		{
			name: "申请售后",
			isPrimary: true
		},
		{
			name: "加入购物车",
			isPrimary: false
		}
	],
	"closed": [
		{
			name: "加入购物车",
			isPrimary: false
		}
	],
	"refunding": [
		{
			name: "申请售后",
			isPrimary: false
		}, {
			name: "加入购物车",
			isPrimary: true
		}
	]
}

const bottomBtnList = {
	"wait_pay": {
		icons: [
			{
				icon: 'kefu',
				name: '客服'
			},
			{
				icon: 'quxiao',
				name: '取消'
			}
		]
	},
	"wait_send": {
		icons: [
			{
				icon: 'kefu',
				name: '客服'
			},
			{
				icon: 'tousu',
				name: '投诉'
			}
		],
		btns: [
			{
				name: '催发货',
				isPrimary: false
			},
			{
				name: '查看物流',
				isPrimary: false
			},
			{
				name: '修改地址',
				isPrimary: true
			}
		]
	},
	"wait_recv": {
		icons: [
			{
				icon: 'kefu',
				name: '客服'
			},
			{
				icon: 'gengduo',
				name: '更多'
			}
		],
		btns: [
			{
				name: '延长收货',
				isPrimary: false
			},
			{
				name: '查看物流',
				isPrimary: false
			},
			{
				name: '确认收货',
				isPrimary: true
			}
		]
	},
	"success": {
		icons: [
			{
				icon: 'kefu',
				name: '客服'
			},
			{
				icon: 'gengduo',
				name: '更多'
			}
		],
		btns: [
			{
				name: '咸鱼转卖',
				isPrimary: false
			},
			{
				name: '再买一单',
				isPrimary: false
			},
			{
				name: '评价',
				isPrimary: true
			}
		]
	},
	"closed": {
		icons: [
			{
				icon: 'kefu',
				name: '客服'
			},
		],
		btns: [
			{
				name: '删除订单',
				isPrimary: false
			},
			{
				name: '加入购物车',
				isPrimary: false
			},
			{
				name: '再买一单',
				isPrimary: true
			}
		]
	},
	"refunding": {
		icons: [
			{
				icon: 'kefu',
				name: '卖家'
			},
		],
		btns: [
			{
				name: '删除订单',
				isPrimary: false
			},
			{
				name: '加入购物车',
				isPrimary: false
			},
			{
				name: '再买一单',
				isPrimary: true
			}
		]
	},
	"refunding2": {
		icons: [
			{
				icon: 'kefu',
				name: '卖家'
			},
		],
		btns: [
			{
				name: '寄件详情',
				isPrimary: false
			},
			{
				name: '钱款去向',
				isPrimary: true
			}
		]
	}
}

const isFoldProductCard = ref(false)
const isFoldOrderInfoCard = ref(false)
const isFoldRefundOrderInfoCard = ref(false)


const getGoodsTotalPrice = (list) => {
	let totalPrice = 0
	for (const key in list) {
		totalPrice = totalPrice + Number(list[key].oriPrice ? list[key].oriPrice : list[key].price) * Number(list[key].count || 1)
	}
	return totalPrice.toFixed(2)
}

const getGoodsTotalCount = (list) => {
	let totalCount = 0
	for (const key in list) {
		totalCount = totalCount + Number(list[key].count)
	}
	return totalCount
}
let order = ref(null)

const currentId = ref(null);
let countdownTimer = null;
const currentFilter = ref(-1)

const loadOrderDetail = () => {
	if (!currentId.value) return;
	// 1. 优先从持久化缓存读取 (用户新增或修改的数据)
	const storageList = uni.getStorageSync('taobaoShopping') || [];
	const target = storageList.find(item => String(item.id) === String(currentId.value));

	if (target) {
		order.value = JSON.parse(JSON.stringify(target));
		console.log('从缓存加载订单详情成功');
		// 如果是等待付款状态，启动倒计时
		if (order.value.statusType === 'wait_pay' && order.value.payCountdown) {
			initCountdown();
		}
	} else {
		// 2. 兜底从默认 JSON 读取
		const defaultTarget = defualtData.find((item) => String(item.id) === String(currentId.value));
		if (defaultTarget) {
			order.value = JSON.parse(JSON.stringify(defaultTarget));
			console.log('从默认数据加载订单详情');
			// 默认数据也需要启动倒计时
			if (order.value.statusType === 'wait_pay' && order.value.payCountdown) {
				initCountdown();
			}
		}
	}
}

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

	// 解析时间字符串 "HH : mm : ss" 或 "HH:mm:ss" 为秒数
	const parseTimeToSeconds = (timeStr) => {
		if (!timeStr) return 0;
		// 统一格式，移除空格并将冒号分隔
		const parts = timeStr.replace(/\s/g, '').split(':');
		let seconds = 0;
		if (parts.length === 3) {
			seconds = parseInt(parts[0]) * 3600 + parseInt(parts[1]) * 60 + parseInt(parts[2]);
		} else if (parts.length === 2) {
			seconds = parseInt(parts[0]) * 60 + parseInt(parts[1]);
		}
		return isNaN(seconds) ? 0 : seconds;
	};

	// 将秒数格式化为 "HH : mm : ss"
	const formatSecondsToTime = (totalSeconds) => {
		if (totalSeconds <= 0) return "00:00:00";
		const h = Math.floor(totalSeconds / 3600);
		const m = Math.floor((totalSeconds % 3600) / 60);
		const s = totalSeconds % 60;
		const pad = (n) => String(n).padStart(2, '0');
		return `${pad(h)}:${pad(m)}:${pad(s)}`;
	};

	let remainingSeconds = parseTimeToSeconds(order.value.payCountdown);

	if (remainingSeconds <= 0) return;

	countdownTimer = setInterval(() => {
		remainingSeconds--;
		if (remainingSeconds <= 0) {
			order.value.payCountdown = "00 : 00 : 00";
			clearInterval(countdownTimer);
			// 可选：倒计时结束时改变状态为“已取消”
			// order.value.status = '已取消';
		} else {
			order.value.payCountdown = formatSecondsToTime(remainingSeconds);
		}
	}, 1000);
};

onLoad((options) => {
	if (options?.id) {
		currentId.value = options.id;
		currentFilter.value = options.currentFilter
	}
})

onShow(() => {
	loadOrderDetail();
	// 加载拼图截图缓存
	const savedScreenshot = uni.getStorageSync('taobao_screenshot');
	if (savedScreenshot) {
		screenshotImage.value = savedScreenshot;
	}
})

onUnmounted(() => {
	if (countdownTimer) {
		clearInterval(countdownTimer);
		countdownTimer = null;
	}
})
</script>

<style lang="less" scoped>
.back-icon {
	width: 40rpx;
	height: 40rpx;
}

.title-box {
	font-size: 40rpx;
	color: #1A1A1A;
	text-align: center;
	font-weight: 500;
	overflow: hidden;

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

	.desc {
		font-weight: 400;
		font-size: 26rpx;
		color: #1A1A1A;
		line-height: 26rpx;
		margin-top: 12rpx;
	}

	.uni-icon {
		flex-shrink: 0;
		margin-left: 8rpx;
	}
}

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

.status-box {
	padding: 22rpx 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: 30rpx;
			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;
		}
	}

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

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

			.shop-desc {
				font-weight: 400;
				font-size: 24rpx;
				color: #7C8495;
				line-height: 22rpx;
				margin: 0 4rpx;
				margin-top: 12rpx;
			}

			&.refunding-style {
				padding-bottom: 24rpx;
				border-bottom: 0.5px solid #D8D8D8 !important;

				.refund-shop {
					background-color: #D8D8D8;
					border-radius: 8rpx;
				}
			}
		}

		.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;
				height: 32rpx;
				line-height: 32rpx;
				white-space: nowrap;
				overflow: hidden;
				text-align: left;
			}

			.title {
				position: relative;
				width: 100%;
				font-size: 26rpx;
				color: #00032A;
				line-height: 28rpx;
				font-weight: 500;
				white-space: nowrap;
				overflow: hidden;

			}

			.title::after {
				position: absolute;
				content: "";
				width: 100rpx;
				height: 100%;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
				right: 0;
			}

			.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: 28rpx;

			.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 {
	min-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;
	min-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: 28rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

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

		.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: 26rpx;
			font-size: 26rpx;
			color: #7C8495;
		}
	}


}

.help-box {
	padding: 30rpx 32rpx;
	margin-bottom: 120rpx;

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

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

.product-img-card {
	margin: 16rpx 0;
	margin-bottom: 10rpx;
}

.service-card {
	padding: 28rpx 32rpx;
	line-height: 30rpx;

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

	.more {
		font-size: 26rpx;
		color: #EF7518;
		line-height: 28rpx;
	}
}

.refunding-desc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64rpx;
	background-color: #F4F5F7;
	line-height: 64rpx;
	padding: 0 12rpx;
	border-radius: 12rpx;
	margin-bottom: 6rpx;
	margin-top: 16rpx;

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

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

}
</style>
<style>
@import '@/common/main.css';
</style>