<template>
	<view class="container">
		<!-- 内容区域 -->
		<view class="content">
			<!-- 订单状态 -->
			<view class="status-section" :class="statusClass">
				<view class="status-icon" :class="statusIconClass">{{ statusIcon }}</view>
				<text class="status-text">{{ orderData.status }}</text>
				<text v-if="orderData.failureReason" class="failure-reason">{{ orderData.failureReason }}</text>
			</view>

			<!-- 收货地址 - 仅实物商品显示 -->
			<view v-if="orderData.productType === 'physical'" class="address-section">
				<view class="address-left">
					<image class="location-icon" :src="$baseUrl + 'homepage/Q3Res/settlementCenter_addressIcon.png'" mode="aspectFit"></image>
					<view class="address-info">
						<text class="address-text">浙江省杭州市西湖区文一西路98号数娱大厦3楼</text>
						<view class="recipient-info">
							<text class="recipient-name">李一</text>
							<text class="recipient-phone">187****2501</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 商品详情 -->
			<view class="product-section">
				<view class="product-detail">
					<view class="product-image">
						<text class="image-placeholder">{{ orderData.productType === 'virtual' ? '优惠券' : '商品' }}</text>
					</view>
					<view class="product-info">
						<text class="product-name">{{ orderData.productName }}</text>
						<text v-if="orderData.productType === 'physical'" class="product-spec">净含量 750g</text>
						<text v-if="orderData.productType === 'virtual'" class="product-spec">过期时间 {{ orderData.expireTime }}</text>
						<text v-if="orderData.productType === 'virtual'" class="product-spec">使用说明 {{ orderData.usageInstructions }}</text>
						<view class="price-quantity-row">
							<text class="product-price">{{ orderData.price }}</text>
							<text class="product-quantity">x{{ orderData.quantity }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 支付汇总 -->
			<view class="payment-section">
				<view class="payment-row">
					<text class="payment-label">商品总价</text>
					<text class="payment-value">{{ orderData.totalPrice }}</text>
				</view>
				<view v-if="orderData.productType === 'physical'" class="payment-row">
					<text class="payment-label">运费</text>
					<text class="payment-value">¥0.00</text>
				</view>
				<view class="payment-total">
					<text class="total-label">实付:</text>
					<text class="total-value">{{ orderData.actualPayment }}</text>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-info-section">
				<view class="info-row">
					<text class="info-label">订单编号</text>
					<view class="info-right">
						<text class="info-value">{{ orderData.orderNumber }}</text>
						<text class="copy-btn" @click="copyOrderNumber">复制</text>
					</view>
				</view>
				<view class="info-row">
					<text class="info-label">下单时间</text>
					<text class="info-value">{{ orderData.orderTime }}</text>
				</view>
			</view>

			<!-- 物流信息 - 仅实物商品且已发货/已完成时显示 -->
			<view v-if="orderData.productType === 'physical' && (orderData.status === '已发货' || orderData.status === '已完成')" class="logistics-section" @click="viewLogistics">
				<view class="logistics-row">
					<text class="logistics-label">物流公司</text>
					<text class="logistics-value">{{ orderData.logisticsCompany }}</text>
				</view>
				<view class="logistics-row">
					<text class="logistics-label">物流单号</text>
					<view class="logistics-right">
						<text class="logistics-value">{{ orderData.trackingNumber }}</text>
						<text class="copy-btn" @click.stop="copyTrackingNumber">复制</text>
					</view>
				</view>
				<text class="arrow-icon">→</text>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view v-if="showActionButton" class="bottom-action">
			<button class="action-btn" :class="actionBtnClass" @click="handleAction">{{ actionButtonText }}</button>
		</view>

		<!-- 客服按钮 -->
		<view class="service-btn">
			<image class="service-icon" :src="$baseUrl + 'homepage/Q3Res/settlementCenter_serviceBtn.png'" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 订单数据 - 可根据实际需要修改
			orderData: {
				productType: 'physical', // 'physical' | 'virtual'
				status: '已完成', // 实物: '等待商家发货' | '已发货' | '已完成' | 虚拟: '交易成功' | '交易关闭'
				statusCode: 'completed', // 'waiting_ship' | 'shipped' | 'completed' | 'success' | 'failed'
				failureReason: '', // 失败原因
				productName: '优惠券名称占位优惠券名称占位优惠券名称占位',
				price: '12000积分',
				quantity: 1,
				totalPrice: '12000积分',
				actualPayment: '12000积分',
				orderNumber: '78562412311',
				orderTime: '2018-11-01 12:22:22',
				logisticsCompany: '圆通快递',
				trackingNumber: 'YT172891917117',
				expireTime: '2018-11-01 12:22:22',
				usageInstructions: '这是卡券'
			}
		}
	},
	computed: {
		// 状态样式类
		statusClass() {
			const statusMap = {
				'waiting_ship': 'status-waiting',
				'shipped': 'status-shipped', 
				'completed': 'status-completed',
				'success': 'status-success',
				'failed': 'status-failed'
			};
			return statusMap[this.orderData.statusCode] || 'status-completed';
		},
		
		// 状态图标样式类
		statusIconClass() {
			const iconMap = {
				'waiting_ship': 'icon-waiting',
				'shipped': 'icon-shipped',
				'completed': 'icon-completed', 
				'success': 'icon-success',
				'failed': 'icon-failed'
			};
			return iconMap[this.orderData.statusCode] || 'icon-completed';
		},
		
		// 状态图标
		statusIcon() {
			const iconMap = {
				'waiting_ship': '①',
				'shipped': '🚚',
				'completed': '✓',
				'success': '✓',
				'failed': '!'
			};
			return iconMap[this.orderData.statusCode] || '✓';
		},
		
		// 是否显示操作按钮
		showActionButton() {
			return (this.orderData.productType === 'physical' && this.orderData.statusCode === 'waiting_ship') ||
				   (this.orderData.productType === 'virtual' && this.orderData.statusCode === 'success');
		},
		
		// 操作按钮文本
		actionButtonText() {
			if (this.orderData.productType === 'physical' && this.orderData.statusCode === 'waiting_ship') {
				return '申请退货';
			}
			if (this.orderData.productType === 'virtual' && this.orderData.statusCode === 'success') {
				return '去使用';
			}
			return '';
		},
		
		// 操作按钮样式类
		actionBtnClass() {
			return this.orderData.productType === 'virtual' ? 'btn-use' : 'btn-refund';
		}
	},
	methods: {
		// 复制订单编号
		copyOrderNumber() {
			uni.setClipboardData({
				data: this.orderData.orderNumber,
				success: () => {
					uni.showToast({
						title: '订单编号已复制',
						icon: 'success'
					});
				}
			});
		},

		// 复制物流单号
		copyTrackingNumber() {
			uni.setClipboardData({
				data: this.orderData.trackingNumber,
				success: () => {
					uni.showToast({
						title: '物流单号已复制',
						icon: 'success'
					});
				}
			});
		},

		// 查看物流详情
		viewLogistics() {
			uni.showToast({
				title: '查看物流详情',
				icon: 'none'
			});
		},
		
		// 处理操作按钮点击
		handleAction() {
			if (this.orderData.productType === 'physical' && this.orderData.statusCode === 'waiting_ship') {
				uni.showToast({
					title: '申请退货',
					icon: 'none'
				});
			}
			if (this.orderData.productType === 'virtual' && this.orderData.statusCode === 'success') {
				uni.showToast({
					title: '去使用',
					icon: 'none'
				});
			}
		},
		
		// 设置订单状态 - 供外部调用
		setOrderStatus(productType, statusCode, statusText, failureReason = '') {
			this.orderData.productType = productType;
			this.orderData.statusCode = statusCode;
			this.orderData.status = statusText;
			this.orderData.failureReason = failureReason;
			
			// 根据商品类型调整数据
			if (productType === 'virtual') {
				this.orderData.price = '¥0.00';
				this.orderData.totalPrice = '0积分';
				this.orderData.actualPayment = '免费';
			}
		}
	}
}
</script>

<style scoped>
.container {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
	box-sizing: border-box;
}

/* 内容区域 */
.content {
	padding: 0;
	box-sizing: border-box;
}

/* 订单状态 */
.status-section {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.status-section.status-waiting {
	background-color: #f0e6d2;
}

.status-section.status-shipped {
	background-color: #f0e6d2;
}

.status-section.status-completed {
	background-color: #f0e6d2;
}

.status-section.status-success {
	background-color: #f0e6d2;
}

.status-section.status-failed {
	background-color: #ffe6e6;
}

.status-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
}

.status-icon.icon-waiting {
	background-color: #d3a458;
	color: #fff;
}

.status-icon.icon-shipped {
	background-color: #d3a458;
	color: #fff;
}

.status-icon.icon-completed {
	background-color: #d3a458;
	color: #fff;
}

.status-icon.icon-success {
	background-color: #4CAF50;
	color: #fff;
}

.status-icon.icon-failed {
	background-color: #f44336;
	color: #fff;
}

.status-text {
	font-size: 32rpx;
	font-weight: bold;
}

.status-section.status-waiting .status-text,
.status-section.status-shipped .status-text,
.status-section.status-completed .status-text {
	color: #d3a458;
}

.status-section.status-success .status-text {
	color: #4CAF50;
}

.status-section.status-failed .status-text {
	color: #f44336;
}

.failure-reason {
	font-size: 24rpx;
	color: #f44336;
	text-align: center;
}

/* 收货地址 */
.address-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	border-radius: 20rpx;
}

.address-left {
	display: flex;
	align-items: flex-start;
	flex: 1;
}

.location-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 20rpx;
	margin-top: 5rpx;
}

.address-info {
	flex: 1;
}

.address-text {
	font-size: 28rpx;
	color: #333;
	line-height: 40rpx;
	margin-bottom: 10rpx;
	display: block;
}

.recipient-info {
	display: flex;
	gap: 20rpx;
}

.recipient-name, .recipient-phone {
	font-size: 26rpx;
	color: #666;
}

/* 商品详情 */
.product-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
}

.product-detail {
	display: flex;
	align-items: center;
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	background-color: #f0e6d2;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.image-placeholder {
	font-size: 20rpx;
	color: #8b7355;
	text-align: center;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 12rpx;
	display: block;
	font-weight: 500;
}

.product-spec {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 12rpx;
	display: block;
}

.price-quantity-row {
	display: flex;
	align-items: center;
}

.product-price {
	font-size: 32rpx;
	color: #d3a458;
	font-weight: bold;
	margin-right: 20rpx;
}

.product-quantity {
	font-size: 24rpx;
	color: #999;
}

/* 支付汇总 */
.payment-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
}

.payment-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.payment-label {
	font-size: 28rpx;
	color: #333;
}

.payment-value {
	font-size: 28rpx;
	color: #333;
}

.payment-total {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-top: 1rpx solid #e6e6e6;
	padding-top: 20rpx;
}

.total-label {
	font-size: 28rpx;
	color: #333;
	margin-right: 10rpx;
}

.total-value {
	font-size: 32rpx;
	color: #d3a458;
	font-weight: bold;
}

/* 订单信息 */
.order-info-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
}

.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.info-row:last-child {
	margin-bottom: 0;
}

.info-label {
	font-size: 28rpx;
	color: #333;
}

.info-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.info-value {
	font-size: 28rpx;
	color: #666;
}

.copy-btn {
	font-size: 24rpx;
	color: #999;
	padding: 8rpx 16rpx;
	border: 1rpx solid #ddd;
	border-radius: 20rpx;
	background-color: #f5f5f5;
}

/* 物流信息 */
.logistics-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	border-radius: 20rpx;
}

.logistics-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
	width: 100%;
}

.logistics-row:last-child {
	margin-bottom: 0;
}

.logistics-label {
	font-size: 28rpx;
	color: #333;
}

.logistics-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.logistics-value {
	font-size: 28rpx;
	color: #666;
}

.arrow-icon {
	font-size: 32rpx;
	color: #999;
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
}

/* 底部操作按钮 */
.bottom-action {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.action-btn {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
}

.action-btn.btn-refund {
	background-color: #fff;
	color: #333;
	border: 1rpx solid #ddd;
}

.action-btn.btn-use {
	background-color: #d3a458;
	color: #fff;
}

/* 客服按钮 */
.service-btn {
	position: fixed;
	bottom: 200rpx;
	right: 30rpx;
	width: 120rpx;
	height: 120rpx;
	background-color: #d3a458;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

.service-icon {
	width: 100%;
	height: 100%;
}
</style>
