<!-- 訂單詳情页 -->
<template>
	<view class="order-details-page">
		<view class="edgeInsetTop"></view>
		<view class="wanl-order order-details">
			<!-- 顶部状态栏 -->
			<view class="header order-details-header">
				<view class="content">
					<view>
						<view class="status-text">{{ getStatusText(orderData.state) }}</view>
						<view class="reason"><text class="reason-text">{{ orderData.statetime }}</text></view>
					</view>
				</view>
			</view>

			<!-- 地址和物流信息 -->
			<view class="address cu-list menu-avatar order-details-card">
				<!-- 物流信息（已发货状态才显示） -->
				<view class="cu-item" @tap="onLogistics(orderData.id)" v-if="orderData.state != 7 && orderData.state != 1 && orderData.state != 2 && logisticsType">
					<view class="cu-avatar round wanl-bg-blue"><text class="wlIcon-yunshuzhong"></text></view>
					<view class="content">
						<view><text class="text-cut-2 text-sm wanl-pip">{{ orderData.logistics.status }} - {{ orderData.logistics.context }}</text></view>
						<view class="wanl-gray"><text class="text-sm">{{ orderData.logistics.time }}</text></view>
					</view>
					<view class="action"><text class="wlIcon-fanhui2 wanl-gray"></text></view>
				</view>
				<!-- 收货地址 -->
				<view class="cu-item">
					<view class="cu-avatar round wanl-bg-orange"><text class="wlIcon-weizhi1"></text></view>
					<view class="content">
						<view>
							<text class="wanl-pip margin-right-sm">{{ orderData.address.name }}</text>
							<text class="wanl-gray text-sm">{{ orderData.address.mobile }}</text>
						</view>
						<view class="wanl-pip text-cut-2 text-sm">
							{{ orderData.address.address.replace(/\//g, ' ') }}
							<text class="margin-left-xs" v-if="orderData.address.address_name">{{ $t('order.nearby', [orderData.address.address_name]) }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 店铺和商品信息 -->
			<view class="lists bg-white order-details-card" v-if="orderData.order_no">
				<view class="shopname text-sm padding-top-bj order-details-shop" @tap="onShop(orderData.shop_id)">
					<text class="wlIcon-dianpu1 margin-right-sm"></text>
					<text class="padding-right-xs wanl-black">{{ orderData.shop.shopname }}</text>
					<text class="wlIcon-fanhuigengduo"></text>
				</view>
				<view class="cu-list menu-avatar">
					<block v-for="(item, index) in orderData.goods" :key="item.id">
						<view class="cu-item">
							<image class="goods-img radius" :src="$appKit.oss(item.image, 140, 140, 1)" mode="aspectFill" @tap="onGoods(item.goods_id)" lazy-load ></image>
							<view class="content" @tap="onGoods(item.goods_id)">
								<view class="text-cut-2">{{ item.title }}</view>
								<view class="wanl_sku text-sm"><text class="wanl-gray-dark">{{ item.difference }}</text></view>
							</view>
							<view class="action text-sm">
								<view class="wanl-gray text-price">{{ item.price }}</view>
								<view class="wanl-gray">x {{ item.number }}</view>
							</view>
						</view>
						<!-- 退款按钮 -->
						<view class="flex justify-end padding-lr-bj padding-bottom">
							<button class="cu-btn line-black sm" @tap="onRefund(orderData.id, item.refund_status, item.refund_id, index)" v-if="orderData.state == 2 || orderData.state == 3 || orderData.state == 4 || orderData.state == 6">{{ getRefund(item.refund_status) }}</button>
						</view>
					</block>
				</view>
				<!-- 价格明细 -->
				<view class="price padding-lr-bj padding-tb-bj text-sm order-details-price">
					<view>{{ $t('order.goodsTotal') }}<text class="text-price">{{ orderData.pay.order_price }}</text></view>
					<view>{{ $t('order.freight') }}<text class="text-price">{{ orderData.pay.freight_price }}</text></view>
					<view>{{ $t('order.discount') }}<text class="text-price">{{ orderData.pay.discount_price }}</text></view>
					<view>{{ $t('order.orderTotal') }}<text class="text-price">{{ orderData.pay.price }}</text></view>
					<view class="text-sm" v-if="orderData.pay.actual_payment != 0">{{ $t('order.actualAmount') }}<text class="text-price wanl-orange">{{ orderData.pay.actual_payment }}</text></view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order bg-white margin-top-bj padding-bj order-details-card" v-if="orderData.order_no">
				<view class="title" @tap="toMore">
					<view class="text-sm">{{ $t('order.orderDetail') }}</view>
					<view><text class="wlIcon-fanhui3" v-if="infoMore"></text><text class="wlIcon-fanhui4" v-else></text></view>
				</view>
				<view class="text-sm">
					<view class="item"><text class="wanl-gray" style="width: 160rpx">{{ $t('order.orderNo') }}</text><text>{{ orderData.order_no }}</text></view>
					<view class="item"><text class="wanl-gray" style="width: 160rpx">{{ $t('order.payNo') }}</text><text>{{ orderData.pay.pay_no }}</text></view>
					<view class="item"><text class="wanl-gray" style="width: 160rpx">{{ $t('order.createTime') }}</text><text>{{ orderData.createtime_text }}</text></view>
					<block v-if="infoMore">
						<view class="item" v-if="orderData.paymenttime"><text class="wanl-gray-dark" style="width: 160rpx">{{ $t('order.payTime') }}</text><text>{{ orderData.paymenttime_text }}</text></view>
						<view class="item" v-if="orderData.delivertime"><text class="wanl-gray-dark" style="width: 160rpx">{{ $t('order.deliverTime') }}</text><text>{{ orderData.delivertime_text }}</text></view>
						<view class="item" v-if="orderData.taketime"><text class="wanl-gray-dark" style="width: 160rpx">{{ $t('order.takeTime') }}</text><text>{{ orderData.taketime_text }}</text></view>
					</block>
				</view>
			</view>
			<view class="edgeInsetBottom"></view>
		</view>
	</view>
</template>

<script>
import { pullOrderInfo } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			orderData: {
				order_no: '',
				address: { name: '', mobile: '', address: '', address_name: '' },
				logistics: { context: '', status: '', time: '' },
				statetime: ''
			},
			logisticsType: false,
			infoMore: false
		}
	},
	created() {
		this.orderData.address.name = this.$t('order.loading')
	},
	onLoad(option) {
		this.loadData({ id: option.id })
	},
	methods: {
		/**
		 * 加载订单详情
		 * 同时计算各状态的倒计时提示文字
		 */
		async loadData(data) {
			try {
				const res = await pullOrderInfo(data)
				this.orderData = res
				this.logisticsType = true

				// 根据订单状态计算倒计时提示
				if (res.state == 1) {
					// 待付款：计算自动关闭倒计时
					var diff = (res.createtime + res.config.cancel * 86400) - Date.parse(new Date()) / 1000
					var days = Math.floor(diff / 86400), hours = Math.floor(diff % 86400 / 3600), minutes = Math.floor(diff % 86400 % 3600 / 60)
					if (minutes > 0 && hours === 0 && days === 0) this.orderData.statetime = this.$t('order.autoCloseMinutes', [minutes])
					else if (hours > 0 && days === 0) this.orderData.statetime = this.$t('order.autoCloseHours', [hours, minutes])
					else if (days > 0) this.orderData.statetime = this.$t('order.autoCloseDays', [days, hours, minutes])
				} else if (res.state == 2) {
					this.orderData.statetime = this.$t('order.waitSellerShip')
				} else if (res.state == 3) {
					// 待收货：计算自动确认收货倒计时
					var diff = (res.delivertime + res.config.receiving * 86400) - Date.parse(new Date()) / 1000
					var days = Math.floor(diff / 86400), hours = Math.floor(diff % 86400 / 3600), minutes = Math.floor(diff % 86400 % 3600 / 60)
					if (minutes > 0 && hours === 0 && days === 0) this.orderData.statetime = this.$t('order.autoConfirmMinutes', [minutes])
					else if (hours > 0 && days === 0) this.orderData.statetime = this.$t('order.autoConfirmHours', [hours, minutes])
					else if (days > 0) this.orderData.statetime = this.$t('order.autoConfirmDays', [days, hours, minutes])
				} else if (res.state == 4) {
					// 待评价：计算自动评价倒计时
					var diff = (res.taketime + res.config.comment * 86400) - Date.parse(new Date()) / 1000
					var days = Math.floor(diff / 86400), hours = Math.floor(diff % 86400 / 3600), minutes = Math.floor(diff % 86400 % 3600 / 60)
					if (minutes > 0 && hours === 0 && days === 0) this.orderData.statetime = this.$t('order.autoCommentMinutes', [minutes])
					else if (hours > 0 && days === 0) this.orderData.statetime = this.$t('order.autoCommentHours', [hours, minutes])
					else if (days > 0) this.orderData.statetime = this.$t('order.autoCommentDays', [days, hours, minutes])
				} else if (res.state == 6) {
					this.orderData.statetime = res.dealtime_text
				} else if (res.state == 7) {
					this.orderData.statetime = this.$t('order.closedTip')
				}
			} catch (e) {
				console.error('[order] loadData', e)
			}
		},

		/** 订单状态文字映射 */
		getStatusText(status) {
			return [
				this.$t('order.pendingPayment'),
				this.$t('order.paymentSuccess'),
				this.$t('order.pendingReceipt'),
				this.$t('order.pendingReview'),
				this.$t('order.refundOrder'),
				this.$t('order.orderComplete'),
				this.$t('order.tradeClosed')
			][status - 1]
		},

		/** 退款状态文字映射 */
		getRefund(status) {
			return [
				this.$t('order.refund'),
				this.$t('order.refunding'),
				this.$t('order.waitReturn'),
				this.$t('order.refundDone'),
				this.$t('order.refundClosed'),
				this.$t('order.refundRejected')
			][status]
		},

		/** 跳转退款申请/详情 */
		onRefund(order_id, refund_status, refund_id, index) {
			if (refund_status == 0) {
				uni.navigateTo({ url: '/pages/user/refund/apply?data=' + JSON.stringify({
					order_id: this.orderData.id,
					order_type: 'goods',
					goods: this.orderData.goods[index],
					freight_type: this.orderData.freight_type,
					discount_price: this.orderData.pay.discount_price,
					goods_number: this.orderData.goods.length
				}) })
			} else {
				uni.navigateTo({ url: '/pages/user/refund/details?id=' + refund_id })
			}
		},

		/** 展开/收起更多订单信息 */
		toMore() { this.infoMore = !this.infoMore },

		/** 跳转店铺页 */
		onShop(shop_id) { uni.navigateTo({ url: '/pages/shop/index?id=' + shop_id }) },

		/** 跳转商品详情 */
		onGoods(goods_id) { uni.navigateTo({ url: '/pages/product/goods?id=' + goods_id }) },

		/** 跳转物流页 */
		onLogistics(id) { uni.navigateTo({ url: '/pages/order/logistics?id=' + id }) },
	}
}
</script>

<style scoped>
.order-details-page { background: #f3f5f7; min-height: 100vh; }
.edgeInsetTop { height: var(--status-bar-height); }

/* 顶部状态栏 */
.order-details-header { border-radius: 0 0 22rpx 22rpx; overflow: hidden; }
.wanl-order .header { width: 100%; height: 180rpx; position: relative; background-color: #ff6b35; }
.wanl-order .header .content { width: 100%; height: 180rpx; position: absolute; z-index: 10; left: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 60rpx; box-sizing: border-box; }
.wanl-order .header .status-text { font-size: 34rpx; line-height: 34rpx; color: #FEFEFE; }
.wanl-order .header .reason { font-size: 24rpx; line-height: 24rpx; color: rgba(254, 254, 254, 0.75); padding-top: 15rpx; }
.wanl-order .header .reason-text { padding-right: 12rpx; white-space: pre-wrap; }

/* 卡片通用样式 */
.order-details-card { background: #fff; border-radius: 18rpx; box-shadow: 0 8rpx 28rpx rgba(17, 24, 39, 0.06); margin: 18rpx 20rpx 0; overflow: hidden; }
.order-details-shop { margin: 22rpx 22rpx 18rpx 22rpx !important; }
.order-details-price { border-top: 1px solid rgba(0, 0, 0, 0.04); }

/* 商品列表 */
.wanl-order .lists .shopname { margin: 25rpx 25rpx 30rpx 25rpx; }
.wanl-order .lists .price > view { display: flex; align-items: center; justify-content: space-between; height: 40rpx; }
.cu-list.menu-avatar>.cu-item { height: 160rpx; }
.goods-img { position: absolute; left: 25rpx; width: 140rpx; height: 140rpx; }

/* 订单信息 */
.wanl-order .order .title { display: flex; align-items: center; justify-content: space-between; }
.wanl-order .order .item { display: flex; padding-top: 30rpx; }

/* 颜色 */
.wanl-bg-blue { background-color: #2979ff !important; color: #ffffff !important; }
.wanl-bg-orange { background: linear-gradient(135deg, #ff6b35, #ff3d2e) !important; color: #fff !important; }
.wanl-orange { color: #ff6b35; }

.edgeInsetBottom { height: 30rpx; }
</style>
