<!--学员订单详情页面-->
<template>
	<view class="main_box">
		<!-- 自定义导航栏 -->
		<view class="navbar_section">
			<view class="navbar_back" @click="goBack">
				<text class="back_icon">‹</text>
			</view>
			<view class="navbar_title">订单详情</view>
			<view class="navbar_action"></view>
		</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading_section">
			<view class="loading_text">加载中...</view>
		</view>
		
		<!-- 订单详情内容 -->
		<view v-else-if="orderDetail" class="detail_content">
			<!-- 订单状态 -->
			<view class="status_section">
				<view class="status_icon" :class="orderDetail.status">
					<text class="icon_text">{{ getStatusIcon(orderDetail.status) }}</text>
				</view>
				<view class="status_info">
					<view class="status_text">{{ getStatusText(orderDetail.status) }}</view>
					<view class="status_desc">{{ getStatusDesc(orderDetail.status) }}</view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="order_info_section">
				<view class="section_title">订单信息</view>
				<view class="info_list">
					<view class="info_item">
						<text class="label">订单号：</text>
						<text class="value">{{ orderDetail.order_no }}</text>
					</view>
					<view class="info_item">
						<text class="label">下单时间：</text>
						<text class="value">{{ formatDateTime(orderDetail.create_time) }}</text>
					</view>
					<view class="info_item" v-if="orderDetail.payment_time">
						<text class="label">支付时间：</text>
						<text class="value">{{ formatDateTime(orderDetail.payment_time) }}</text>
					</view>
					<view class="info_item">
						<text class="label">订单金额：</text>
						<text class="value amount">¥{{ orderDetail.total_amount }}</text>
					</view>
					<view class="info_item" v-if="orderDetail.payment_method">
						<text class="label">支付方式：</text>
						<text class="value">{{ orderDetail.payment_method }}</text>
					</view>
				</view>
			</view>
			
			<!-- 课程信息 -->
			<view class="course_info_section">
				<view class="section_title">课程信息</view>
				<view class="course_card">
					<view class="course_header">
						<view class="course_name">{{ orderDetail.product_name }}</view>
						<view class="course_amount">¥{{ orderDetail.total_amount }}</view>
					</view>
					<view class="course_details">
						<view class="detail_item" v-if="orderDetail.product_specs">
							<text class="detail_label">课程规格：</text>
							<text class="detail_value">{{ orderDetail.product_specs }}</text>
						</view>
						<view class="detail_item">
							<text class="detail_label">购买数量：</text>
							<text class="detail_value">{{ orderDetail.quantity }}节</text>
						</view>
						<view class="detail_item" v-if="orderDetail.course_count">
							<text class="detail_label">总课时：</text>
							<text class="detail_value">{{ orderDetail.course_count }}节</text>
						</view>
						<view class="detail_item" v-if="orderDetail.used_count !== undefined">
							<text class="detail_label">已使用：</text>
							<text class="detail_value">{{ orderDetail.used_count }}节</text>
						</view>
						<view class="detail_item" v-if="orderDetail.remaining_count !== undefined">
							<text class="detail_label">剩余课时：</text>
							<text class="detail_value">{{ orderDetail.remaining_count }}节</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 备注信息 -->
			<view class="remark_section" v-if="orderDetail.remark">
				<view class="section_title">备注信息</view>
				<view class="remark_text">{{ orderDetail.remark }}</view>
			</view>
			
			<!-- 退款信息 -->
			<view class="refund_section" v-if="showRefundInfo">
				<view class="section_title">退款信息</view>
				<view class="refund_info">
					<view class="info_item">
						<text class="label">退款金额：</text>
						<text class="value amount">¥{{ orderDetail.refund_amount || orderDetail.total_amount }}</text>
					</view>
					<view class="info_item" v-if="orderDetail.refund_time">
						<text class="label">退款时间：</text>
						<text class="value">{{ formatDateTime(orderDetail.refund_time) }}</text>
					</view>
					<view class="info_item" v-if="orderDetail.cancel_reason">
						<text class="label">退款原因：</text>
						<text class="value">{{ orderDetail.cancel_reason }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 订单不存在 -->
		<view v-else class="empty_section">
			<view class="empty_icon">📋</view>
			<view class="empty_text">订单不存在</view>
			<view class="empty_hint">请检查订单信息或联系客服</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action_section" v-if="orderDetail">
			<fui-button 
				v-if="orderDetail.status === 'pending_payment'"
				background="#29d3b4" 
				@click="payOrder"
			>
				立即付款
			</fui-button>
			
			<fui-button 
				v-if="orderDetail.status === 'pending_payment'"
				background="transparent" 
				color="#999"
				@click="cancelOrder"
			>
				取消订单
			</fui-button>
			
			<fui-button 
				v-if="canViewContract"
				background="#f39c12" 
				@click="viewContract"
			>
				查看合同
			</fui-button>
			
			<fui-button 
				v-if="orderDetail.status === 'refunding' || orderDetail.status === 'refunded'"
				background="transparent" 
				color="#f39c12"
				@click="viewRefundDetail"
			>
				查看退款
			</fui-button>
		</view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js'
	
	export default {
		data() {
			return {
				orderId: 0,
				studentId: 0,
				orderDetail: null,
				loading: false,
				// 状态文本映射
				STATUS_TEXT_MAP: {
					'pending_payment': '待付款',
					'paid': '已付款',
					'completed': '已完成',
					'cancelled': '已取消',
					'refunding': '退款中',
					'refunded': '已退款'
				},
				// 状态描述映射
				STATUS_DESC_MAP: {
					'pending_payment': '请在规定时间内完成支付',
					'paid': '订单已支付成功',
					'completed': '订单已完成，感谢您的使用',
					'cancelled': '订单已取消',
					'refunding': '退款处理中，请耐心等待',
					'refunded': '退款已完成'
				}
			}
		},
		
		computed: {
			showRefundInfo() {
				return this.orderDetail && (this.orderDetail.status === 'refunding' || this.orderDetail.status === 'refunded')
			},
			
			canViewContract() {
				// 已支付的订单可以查看合同
				return this.orderDetail && (this.orderDetail.status === 'paid' || this.orderDetail.status === 'completed')
			}
		},
		
		onLoad(options) {
			console.log('订单详情页面接收参数:', options)
			
			this.orderId = parseInt(options.id) || 0
			this.studentId = parseInt(options.student_id) || 0
			
			// 如果没有学员ID，从本地存储获取
			if (!this.studentId) {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && userInfo.id) {
					this.studentId = userInfo.id
				}
			}
			
			console.log('订单详情页面参数确认:', {
				orderId: this.orderId,
				studentId: this.studentId
			})
			
			if (this.orderId && this.studentId) {
				// 延迟加载确保页面完全显示
				setTimeout(() => {
					this.loadOrderDetail()
				}, 100)
			} else {
				console.error('订单详情页面参数错误:', {
					orderId: this.orderId,
					studentId: this.studentId
				})
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},

		onShow() {
			console.log('订单详情页面显示')
		},

		onReady() {
			console.log('订单详情页面准备完成')
		},
		
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			async loadOrderDetail() {
				this.loading = true
				try {
					console.log('获取订单详情，参数:', {
						id: this.orderId,
						student_id: this.studentId
					});
					
					const response = await apiRoute.xy_getStudentOrderDetail({
						id: this.orderId,
						student_id: this.studentId
					})
					
					if (response.code === 1 && response.data) {
						this.orderDetail = this.processOrderData(response.data)
					} else {
						// 如果接口返回失败，尝试从订单列表接口获取数据
						console.warn('订单详情接口失败，尝试从列表接口获取:', response.msg)
						await this.loadOrderFromList()
					}
				} catch (error) {
					console.error('获取订单详情失败:', error)
					// 接口调用失败，尝试从订单列表接口获取数据
					await this.loadOrderFromList()
				} finally {
					this.loading = false
				}
			},
			
			// 从订单列表接口获取订单数据作为备用
			async loadOrderFromList() {
				try {
					const response = await apiRoute.xy_getStudentOrders({
						student_id: this.studentId,
						page: 1,
						limit: 100
					})
					
					if (response.code === 1 && response.data && response.data.data) {
						const orders = response.data.data
						const targetOrder = orders.find(order => order.id == this.orderId)
						
						if (targetOrder) {
							this.orderDetail = this.processOrderData(targetOrder)
						} else {
							this.showError('订单不存在')
						}
					} else {
						this.showError('获取订单信息失败')
					}
				} catch (error) {
					console.error('从列表获取订单详情失败:', error)
					this.showError('获取订单信息失败')
				}
			},
			
			// 处理订单数据，将后端数据转换为前端需要的格式
			processOrderData(rawData) {
				return {
					id: rawData.id,
					order_no: rawData.order_no || rawData.order_number || rawData.payment_id,
					product_name: rawData.course_id_name || rawData.course_name || rawData.product_name || '课程订单',
					product_specs: rawData.course_specs || rawData.product_specs || '',
					quantity: rawData.quantity || 1,
					total_amount: rawData.order_amount || rawData.total_amount || rawData.amount || '0.00',
					status: this.mapOrderStatus(rawData.order_status || rawData.status),
					create_time: rawData.created_at || rawData.create_time,
					payment_method: rawData.payment_type ? this.mapPaymentMethod(rawData.payment_type) : '',
					payment_time: rawData.payment_time || rawData.paid_at,
					refund_time: rawData.refund_time,
					refund_amount: rawData.refund_amount,
					// 课程相关字段
					course_count: rawData.course_count || 0,
					used_count: rawData.use_total_hours || rawData.used_count || 0,
					remaining_count: rawData.remaining_count || 0,
					cancel_reason: rawData.after_sales_reason || rawData.cancel_reason || '',
					remark: rawData.remark || ''
				}
			},
			
			// 映射订单状态
			mapOrderStatus(status) {
				const statusMap = {
					'pending': 'pending_payment',
					'paid': 'paid',
					'signed': 'completed',
					'completed': 'completed',
					'transfer': 'cancelled',
					'cancelled': 'cancelled',
					'refunded': 'refunded',
					'refunding': 'refunding'
				}
				return statusMap[status] || 'pending_payment'
			},
			
			// 映射支付方式
			mapPaymentMethod(method) {
				const methodMap = {
					'cash': '现金支付',
					'scan_code': '扫码支付',
					'subscription': '预约支付',
					'wxpay_online': '微信支付',
					'wxpay': '微信支付',
					'alipay': '支付宝',
					'bank': '银行转账'
				}
				return methodMap[method] || method || ''
			},
			
			getStatusText(status) {
				return this.STATUS_TEXT_MAP[status] || status
			},
			
			getStatusDesc(status) {
				return this.STATUS_DESC_MAP[status] || ''
			},
			
			getStatusIcon(status) {
				const iconMap = {
					'pending_payment': '💰',
					'paid': '✅',
					'completed': '🎉',
					'cancelled': '❌',
					'refunding': '⏳',
					'refunded': '↩️'
				}
				return iconMap[status] || '📋'
			},
			
			formatDateTime(dateString) {
				if (!dateString) return ''
				const date = new Date(dateString)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}`
			},
			
			showError(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				})
			},
			
			// 支付订单
			payOrder() {
				// 跳转回订单列表页面进行支付
				uni.navigateBack()
			},
			
			// 取消订单
			cancelOrder() {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消此订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.performCancelOrder()
						}
					}
				})
			},
			
			async performCancelOrder() {
				try {
					uni.showLoading({ title: '处理中...' })
					
					// 这里应该调用取消订单的API
					// 暂时模拟处理
					await new Promise(resolve => setTimeout(resolve, 1000))
					
					uni.hideLoading()
					uni.showToast({
						title: '取消成功',
						icon: 'success'
					})
					
					// 刷新订单详情
					this.loadOrderDetail()
				} catch (error) {
					uni.hideLoading()
					console.error('取消订单失败:', error)
					uni.showToast({
						title: '取消失败',
						icon: 'none'
					})
				}
			},
			
			// 查看合同
			async viewContract() {
				try {
					uni.showLoading({ title: '获取合同信息...' })
					
					// 查询合同签署记录
					const contractResponse = await this.getContractInfo()
					
					uni.hideLoading()
					
					if (contractResponse && contractResponse.contract_id) {
						// 跳转到合同详情页面
						uni.navigateTo({
							url: `/pages-student/contract/detail?contract_id=${contractResponse.contract_id}&student_id=${this.studentId}`
						})
					} else {
						uni.showModal({
							title: '提示',
							content: '该订单暂无关联合同，请联系客服处理',
							showCancel: false
						})
					}
				} catch (error) {
					uni.hideLoading()
					console.error('获取合同信息失败:', error)
					uni.showToast({
						title: '获取合同信息失败',
						icon: 'none'
					})
				}
			},
			
			// 获取合同信息
			async getContractInfo() {
				try {
					// 调用获取学员合同列表接口
					const response = await apiRoute.getStudentContracts({
						student_id: this.studentId,
						order_id: this.orderId // 如果接口支持按订单筛选
					})
					
					if (response.code === 1 && response.data && response.data.length > 0) {
						// 返回第一个合同记录
						return response.data[0]
					}
					
					return null
				} catch (error) {
					console.error('获取合同信息失败:', error)
					return null
				}
			},
			
			// 查看退款详情
			viewRefundDetail() {
				const refundInfo = `订单号：${this.orderDetail.order_no}\n退款金额：¥${this.orderDetail.refund_amount || this.orderDetail.total_amount}\n退款时间：${this.orderDetail.refund_time ? this.formatDateTime(this.orderDetail.refund_time) : '处理中'}`
				
				uni.showModal({
					title: '退款详情',
					content: refundInfo,
					showCancel: false
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.main_box {
	background: #f8f9fa;
	min-height: 100vh;
	position: relative;
	z-index: 1;
}

// 自定义导航栏
.navbar_section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #29D3B4;
	padding: 40rpx 32rpx 20rpx;
	
	// 小程序端适配状态栏
	// #ifdef MP-WEIXIN
	padding-top: 80rpx;
	// #endif
	
	.navbar_back {
		width: 60rpx;
		
		.back_icon {
			color: #fff;
			font-size: 40rpx;
			font-weight: 600;
		}
	}
	
	.navbar_title {
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.navbar_action {
		width: 60rpx;
	}
}

// 加载状态
.loading_section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 80rpx 32rpx;
	text-align: center;
	
	.loading_text {
		font-size: 28rpx;
		color: #666;
	}
}

// 订单详情内容
.detail_content {
	padding: 0 20rpx 120rpx;
}

// 订单状态
.status_section {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx 32rpx;
	margin: 20rpx 0;
	display: flex;
	align-items: center;
	
	.status_icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		
		.icon_text {
			font-size: 32rpx;
		}
		
		&.pending_payment {
			background: rgba(243, 156, 18, 0.1);
		}
		
		&.paid {
			background: rgba(52, 152, 219, 0.1);
		}
		
		&.completed {
			background: rgba(39, 174, 96, 0.1);
		}
		
		&.cancelled {
			background: rgba(149, 165, 166, 0.1);
		}
		
		&.refunded, &.refunding {
			background: rgba(231, 76, 60, 0.1);
		}
	}
	
	.status_info {
		flex: 1;
		
		.status_text {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.status_desc {
			font-size: 24rpx;
			color: #666;
		}
	}
}

// 通用区块样式
.order_info_section, .course_info_section, .remark_section, .refund_section {
	background: #fff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin: 20rpx 0;
	
	.section_title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
	}
}

// 信息列表
.info_list {
	.info_item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.label {
			font-size: 26rpx;
			color: #666;
			min-width: 160rpx;
		}
		
		.value {
			font-size: 26rpx;
			color: #333;
			flex: 1;
			
			&.amount {
				color: #e74c3c;
				font-weight: 600;
			}
		}
	}
}

// 课程卡片
.course_card {
	.course_header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
		
		.course_name {
			flex: 1;
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			margin-right: 20rpx;
		}
		
		.course_amount {
			font-size: 32rpx;
			font-weight: 600;
			color: #e74c3c;
		}
	}
	
	.course_details {
		.detail_item {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.detail_label {
				font-size: 24rpx;
				color: #666;
				min-width: 140rpx;
			}
			
			.detail_value {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
}

// 备注文本
.remark_text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

// 退款信息
.refund_info {
	.info_item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.label {
			font-size: 26rpx;
			color: #666;
			min-width: 160rpx;
		}
		
		.value {
			font-size: 26rpx;
			color: #333;
			flex: 1;
			
			&.amount {
				color: #e74c3c;
				font-weight: 600;
			}
		}
	}
}

// 空状态
.empty_section {
	background: #fff;
	border-radius: 16rpx;
	padding: 80rpx 32rpx;
	text-align: center;
	margin: 20rpx;
	
	.empty_icon {
		font-size: 80rpx;
		margin-bottom: 24rpx;
	}
	
	.empty_text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 12rpx;
	}
	
	.empty_hint {
		font-size: 24rpx;
		color: #999;
	}
}

// 操作按钮
.action_section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 20rpx 32rpx;
	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 16rpx;
	
	fui-button {
		flex: 1;
	}
}
</style>