<template>
	<view class="return-container">
		<!-- 订单信息卡片 -->
		<view class="order-card">
			<view class="order-header">
				<text class="title">{{ getOrderStatusText() }}</text>
				<text class="order-no">订单号：{{ orderInfo.orderNo }}</text>
			</view>

			<view class="device-info">
				<view class="device-left">
					<view class="device-name">共享风扇</view>
					<view class="device-id">设备号：{{ deviceId }}</view>
				</view>

				<!-- 支付方式标识 -->
				<view class="device-right">
					<!-- 微信支付分标识 -->
					<view class="payment-badge wx-score" v-if="orderInfo.payWay == 'wx_score_pay'">
						<image src="/static/images/wxpayflag.png" mode="aspectFit" class="badge-icon"></image>
						<view class="badge-text">
							<text>微信支付分</text>
							<text class="divider">|</text>
							<text class="highlight">免押租借</text>
						</view>
					</view>
					<!-- 押金租借标识 -->
					<view class="payment-badge deposit" v-else>
						<text class="badge-text">押金租借</text>
					</view>
				</view>
			</view>

			<view class="time-info">
				<view class="time-item">
					<text class="label">开始时间</text>
					<text class="value">{{ orderInfo.startTime }}</text>
				</view>
				<view class="time-item">
					<text class="label">已使用时长</text>
					<text class="value highlight">{{ orderInfo.usedTime }}</text>
				</view>
				<view class="time-item">
					<text class="label">当前费用</text>
					<text class="value">￥{{ orderInfo.currentFee }}</text>
				</view>
			</view>

			<!-- 调试信息(仅在开发环境显示) -->
			<view class="debug-info" v-if="false">
				<view class="debug-title">调试信息</view>
				<view class="debug-item">原始开始时间: {{ this.orderInfo._rawStartTime }}</view>
				<view class="debug-item">处理后开始时间: {{ this.orderInfo.startTime }}</view>
				<view class="debug-item">订单状态: {{ this.orderInfo.orderStatus }}</view>
			</view>
		</view>

		<!-- 归还说明 -->
		<view class="notice-card">
			<view class="notice-title">归还说明</view>
			<view class="notice-list">
				<view class="notice-item">
					<view class="dot"></view>
					<text>请确保设备完好无损</text>
				</view>
				<view class="notice-item">
					<view class="dot"></view>
					<text>将风扇插入原位置或空闲插口</text>
				</view>
				<view class="notice-item">
					<view class="dot"></view>
					<text>系统将自动检测归还并处理退款</text>
				</view>
				<view class="notice-item">
					<view class="dot"></view>
					<text>归还成功后将自动跳转到成功页面</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="action-item secondary" @click="checkReturnStatus">刷新状态</view>
			<view class="action-item primary" @click="goToHome">返回首页</view>
		</view>
	</view>
</template>

<script>
	import {
		queryById
	} from '@/config/user.js'
	import {
		URL
	} from "@/config/url.js"

	export default {
		data() {
			return {
				deviceId: '',
				orderInfo: {
					orderId: '',
					startTime: '',
					_rawStartTime: '', // 用于调试
					usedTime: '0分钟',
					currentFee: '0.00',
					orderStatus: 'in_used', // 默认状态为使用中
					payWay: '' ,// 新增支付方式字段
					orderNo:''
				},
				timer: null,
				statusCheckTimer: null,
				maxStatusChecks: 30, // 最多检查30次
				currentStatusChecks: 0,
				statusCheckInterval: 5000, // 5秒检查一次
				isPageActive: false // 跟踪页面是否活跃
			}
		},
		onLoad(options) {
			console.log('Return page loaded with options:', JSON.stringify(options))

			// 标记页面为活跃状态
			this.isPageActive = true

			// 获取传递的参数
			this.orderInfo.orderId = options.orderId || ''
			this.deviceId = options.deviceNo || options.deviceId || ''
			

			console.log(`初始化参数: orderId=${this.orderInfo.orderId}, deviceId=${this.deviceId}`)

			// 如果没有orderId但有deviceId, 尝试通过设备号查询订单
			if (!this.orderInfo.orderId && this.deviceId) {
				this.getOrderByDevice()
			} else if (this.orderInfo.orderId) {
				// 获取订单详情
				this.getOrderDetails()
				// 启动定时器更新使用时长
				this.startTimer()
				// 启动状态检查定时器
				this.startStatusCheckTimer()

				// 记录当前活跃订单ID
				uni.setStorageSync('activeOrderId', this.orderInfo.orderId)

				// 如果订单ID有效，将订单添加到全局监控服务
				try {
					if (this.$orderMonitor) {
						// 先确保移除之前的监控（防止重复添加）
						this.$orderMonitor.removeOrder({
							orderId: this.orderInfo.orderId
						})
						// 添加到监控队列，明确指定为归还页面
						this.$orderMonitor.addOrder({
							orderId: this.orderInfo.orderId
						}, 'return')
						console.log('订单已添加到监控队列:', this.orderInfo.orderId)
					} else {
						console.warn('$orderMonitor 未定义，无法添加订单到监控队列')
					}
				} catch (error) {
					console.error('添加订单到监控队列失败:', error)
				}
			} else {
				// 缺少必要参数
				uni.showToast({
					title: '缺少订单信息',
					icon: 'none'
				})

				// 返回首页
				setTimeout(() => {
					this.goToHome()
				}, 1500)
			}

			// 注册全局订单完成事件监听器
			uni.$on('orderCompleted', this.handleOrderCompleted)
		},
		// 添加onHide生命周期，处理页面隐藏时的清理工作
		onHide() {
			console.log('归还页面隐藏，清理计时器资源和监控服务')
			// 标记页面为非活跃状态
			this.isPageActive = false

			// 清理所有计时器
			this.clearTimer()
			this.clearStatusCheckTimer()

			// 从全局订单监控服务中移除当前订单
			this.removeFromOrderMonitor()
		},
		onUnload() {
			console.log('归还页面卸载，清理所有资源')
			// 标记页面为非活跃状态
			this.isPageActive = false

			// 页面卸载时清除定时器
			this.clearTimer()
			this.clearStatusCheckTimer()

			// 从全局订单监控服务中移除当前订单
			this.removeFromOrderMonitor()

			// 注销全局事件监听
			uni.$off('orderCompleted', this.handleOrderCompleted)
		},
		methods: {
			// 从订单监控服务中移除当前订单
			removeFromOrderMonitor() {
				if (this.orderInfo.orderId && this.$orderMonitor) {
					try {
						this.$orderMonitor.removeOrder({
							orderId: this.orderInfo.orderId
						})
						console.log('订单已从监控队列移除:', this.orderInfo.orderId)
					} catch (error) {
						console.error('从监控队列移除订单失败:', error)
					}
				}
			},
			// 处理订单完成事件（可由任何地方触发）
			handleOrderCompleted(orderData) {
				console.log('收到订单完成事件:', orderData)

				// 检查是否为当前订单
				if (orderData.orderId === this.orderInfo.orderId || orderData.orderNo === this.orderInfo.orderNo) {
					// 显示归还成功弹窗
					this.showReturnSuccessModal(orderData)
				}
			},

			// 显示归还成功弹窗
			showReturnSuccessModal(orderData) {
				// 清理定时器
				this.clearTimer()
				this.clearStatusCheckTimer()

				// 显示归还成功弹窗
				uni.showModal({
					title: '归还成功',
					content: '风扇已归还成功，剩余押金将退还到您的账户',
					confirmText: '查看详情',
					success: (res) => {
						if (res.confirm) {
							// 跳转到归还成功页面查看详情
							uni.redirectTo({
								url: `/pages/order/return-success?orderId=${orderData.orderId || this.orderInfo.orderId}`
							})
						} else {
							// 跳转到首页
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
				})
			},

			// 根据订单状态获取对应的文字显示
			getOrderStatusText() {
				const statusMap = {
					'waiting_for_payment': '待支付',
					'payment_in_progress': '支付中',
					'payment_successful': '支付成功',
					'in_used': '使用中',
					'payment_failed': '支付失败',
					'order_cancelled': '订单取消',
					'used_done': '订单完成',
					'used_down': '订单完成'
				}

				return statusMap[this.orderInfo.orderStatus] || '使用中'
			},

			// 获取订单详情
			async getOrderDetails() {
				// 如果页面不再活跃，不执行API请求
				if (!this.isPageActive) {
					console.log('页面已不活跃，跳过订单详情请求')
					return
				}

				try {
					// uni.showLoading({ title: '加载中' })

					if (!this.orderInfo.orderId) {
						throw new Error('订单ID不能为空')
					}

					const result = await queryById(this.orderInfo.orderId)

					if (result.code === 200 && result.data) {
						const orderData = result.data
						console.log('订单原始数据:', orderData)
						console.log('开始时间字段:', orderData.startTime, typeof orderData.startTime)

						// 更新订单状态
						if (orderData.orderStatus) {
							this.orderInfo.orderStatus = orderData.orderStatus
						}

						// 更新支付方式
						if (orderData.payWay) {
							this.orderInfo.payWay = orderData.payWay
						}

						// 检查订单状态，如果已完成，显示归还成功弹窗
						if (orderData.orderStatus &&
							(orderData.orderStatus === 'used_done' || orderData.orderStatus === 'used_down')) {
							// 触发全局订单完成事件
							uni.$emit('orderCompleted', orderData)

							// 显示归还成功弹窗
							this.showReturnSuccessModal(orderData)
							return
						}

						// 更新订单信息 (包括开始时间)
						this.updateOrderInfo(orderData)

						// 更新后检查是否成功设置了startTime
						console.log('更新后的开始时间:', this.orderInfo.startTime)
					} else {
						throw new Error(result.msg || '获取订单详情失败')
					}
				} catch (error) {
					console.error('获取订单详情错误:', error)
					uni.showToast({
						title: error.message || '获取订单信息失败',
						icon: 'none'
					})

					// 如果获取订单失败，返回首页
					setTimeout(() => {
						this.goToHome()
					}, 1500)
				} finally {
					uni.hideLoading()
				}
			},

			// 格式化时间
			formatTime(date) {
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				const hour = date.getHours().toString().padStart(2, '0')
				const minute = date.getMinutes().toString().padStart(2, '0')

				return `${year}-${month}-${day} ${hour}:${minute}`
			},

			// 使用后端返回的使用时长和费用数据
			updateOrderInfo(orderData) {
				// 处理使用时长
				this.orderInfo.usedTime = orderData.usedTime || '0分钟';

				// 处理当前费用
				this.orderInfo.currentFee = orderData.currentFee || orderData.actualDeviceAmount || orderData.payAmount ||
					'0.00';

				// 更新订单状态
				if (orderData.orderStatus) {
					this.orderInfo.orderStatus = orderData.orderStatus;
				}

				// 更新支付方式
				if (orderData.payWay) {
					this.orderInfo.payWay = orderData.payWay;
				}

				// 保存原始开始时间用于调试
				this.orderInfo._rawStartTime = orderData.startTime;

				// 处理开始时间
				if (orderData.startTime) {
					try {
						console.log('API返回的开始时间:', orderData.startTime);
						// 尝试直接显示API返回的时间字符串
						this.orderInfo.startTime = orderData.startTime;
					} catch (e) {
						console.error('更新开始时间错误:', e);
						this.orderInfo.startTime = '未知';
					}
				} else {
					console.warn('API返回的订单数据中没有startTime字段');
					// 尝试使用createTime作为备选
					if (orderData.createTime) {
						console.log('使用createTime作为备选:', orderData.createTime);
						this.orderInfo.startTime = orderData.createTime;
					} else {
						this.orderInfo.startTime = '未知';
					}
				}
				if(orderData.orderNo){
					this.orderInfo.orderNo = orderData.orderNo;
				}

				// 如果有设备号，更新设备号
				if (orderData.deviceNo && !this.deviceId) {
					this.deviceId = orderData.deviceNo;
				}
			},

			// 更新使用时长的定时器
			startTimer() {
				// 清除现有计时器，确保不重复
				this.clearTimer()

				// 每分钟更新一次使用时长
				this.timer = setInterval(() => {
					// 只有当页面活跃时才执行更新
					if (this.isPageActive) {
						console.log('执行定时更新订单信息')
						this.getOrderDetails()
					} else {
						console.log('页面已不活跃，停止计时器')
						this.clearTimer()
					}
				}, 60000)

				console.log('已启动使用时长更新计时器')
			},

			// 清除定时器
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
					console.log('已清除使用时长更新计时器')
				}
			},

			// 清除状态检查定时器
			clearStatusCheckTimer() {
				if (this.statusCheckTimer) {
					clearInterval(this.statusCheckTimer)
					this.statusCheckTimer = null
					console.log('已清除归还状态检查计时器')
				}
			},

			// 开始状态检查定时器
			startStatusCheckTimer() {
				this.currentStatusChecks = 0
				// 确保之前的计时器被清除
				this.clearStatusCheckTimer()

				this.statusCheckTimer = setInterval(() => {
					// 只有当页面活跃时才执行检查
					if (this.isPageActive) {
						this.currentStatusChecks++
						console.log(`执行归还状态检查 (${this.currentStatusChecks}/${this.maxStatusChecks})`)
						this.checkReturnStatus()

						// 如果超过最大检查次数，停止定时器
						if (this.currentStatusChecks >= this.maxStatusChecks) {
							this.clearStatusCheckTimer()

							// 提示用户手动刷新
							uni.showToast({
								title: '请手动刷新查看归还状态',
								icon: 'none',
								duration: 3000
							})
						}
					} else {
						console.log('页面已不活跃，停止状态检查计时器')
						this.clearStatusCheckTimer()
					}
				}, this.statusCheckInterval)

				console.log('已启动归还状态检查计时器')
			},

			// 通过设备号查询使用中的订单
			async getOrderByDevice() {
				try {
					// uni.showLoading({ title: '加载中' })

					if (!this.deviceId) {
						throw new Error('设备号不能为空')
					}

					// 这里调用API查询该设备的使用中订单
					const inUseRes = await uni.request({
						url: `${URL || 'http://127.0.0.1:8080'}/app/order/inUse`,
						method: 'GET',
						header: {
							'Authorization': "Bearer " + uni.getStorageSync('token'),
							'Clientid': uni.getStorageSync('client_id')
						}
					})

					console.log('通过设备号查询订单结果:', JSON.stringify(inUseRes))

					if (inUseRes.statusCode === 200 && inUseRes.data.code === 200 && inUseRes.data.data) {
						const inUseOrder = inUseRes.data.data
						console.log('使用中的订单:', inUseOrder)

						// 更新订单ID
						this.orderInfo.orderId = inUseOrder.orderId

						// 如果有订单状态，更新订单状态
						if (inUseOrder.orderStatus) {
							this.orderInfo.orderStatus = inUseOrder.orderStatus
						}

						// 如果有支付方式，更新支付方式
						if (inUseOrder.payWay) {
							this.orderInfo.payWay = inUseOrder.payWay
						}

						// 如果有开始时间，直接更新
						if (inUseOrder.startTime) {
							console.log('inUse API返回的开始时间:', inUseOrder.startTime)
							this.orderInfo.startTime = inUseOrder.startTime
						}

						// 获取详细订单信息
						this.getOrderDetails()
						// 启动定时器
						this.startTimer()
						// 启动状态检查定时器
						this.startStatusCheckTimer()
					} else {
						throw new Error('未找到使用中的订单')
					}
				} catch (error) {
					console.error('通过设备号查询订单失败:', error)
					uni.showToast({
						title: error.message || '获取订单信息失败',
						icon: 'none'
					})

					// 如果获取订单失败，返回首页
					setTimeout(() => {
						this.goToHome()
					}, 1500)
				} finally {
					uni.hideLoading()
				}
			},

			// 检查归还状态
			async checkReturnStatus() {
				try {
					// 只有页面活跃时才执行检查
					if (this.isPageActive) {
						await this.getOrderDetails()
					}
				} catch (error) {
					console.error('检查归还状态失败:', error)
				}
			},

			// 返回首页
			goToHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.return-container {
		min-height: 100vh;
		background: #f7f8fa;
		padding: 30rpx;
		padding-bottom: 180rpx;
		box-sizing: border-box;

		.order-card {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				padding-bottom: 16rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}

				.order-no {
					font-size: 24rpx;
					color: #999;
				}
			}

			.device-info {
				margin-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.device-left {
					flex: 1;
					margin-right: 20rpx;

					.device-name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						margin-bottom: 8rpx;
					}

					.device-id {
						font-size: 26rpx;
						color: #999;
						margin-bottom: 0;
					}
				}

				.device-right {

					// 支付分标识
					.payment-badge {
						display: inline-flex;
						align-items: center;
						padding: 6rpx 12rpx;
						border-radius: 8rpx;
						white-space: nowrap;

						&.wx-score {
							background: rgba(7, 193, 96, 0.08);

							.badge-icon {
								width: 32rpx;
								height: 26rpx;
								margin-right: 8rpx;
							}

							.badge-text {
								font-size: 22rpx;
								color: #07c160;
								display: flex;
								align-items: center;

								.divider {
									margin: 0 6rpx;
								}

								.highlight {
									font-weight: 500;
								}
							}
						}

						&.deposit {
							background: #f5f5f5;

							.badge-text {
								font-size: 22rpx;
								color: #666;
								font-weight: 500;
							}
						}
					}
				}
			}

			.time-info {
				background: #f9f9f9;
				border-radius: 16rpx;
				padding: 20rpx;

				.time-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						font-size: 26rpx;
						color: #666;
					}

					.value {
						font-size: 26rpx;
						color: #333;

						&.highlight {
							color: #ff6b6b;
							font-weight: bold;
						}
					}
				}
			}
		}

		.notice-card {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

			.notice-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}

			.notice-list {
				.notice-item {
					display: flex;
					align-items: flex-start;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.dot {
						width: 12rpx;
						height: 12rpx;
						background: #07c160;
						border-radius: 50%;
						margin-top: 10rpx;
						margin-right: 16rpx;
						flex-shrink: 0;
					}

					text {
						font-size: 26rpx;
						color: #666;
						line-height: 1.5;
					}
				}
			}
		}

		.bottom-bar {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx 30rpx;
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
			background: #fff;
			box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
			z-index: 10;
			display: flex;
			justify-content: space-between;
			gap: 20rpx;

			.action-item {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				border-radius: 44rpx;
				flex: 1;

				&.primary {
					background: #07c160;
					color: #fff;

					&:active {
						opacity: 0.8;
					}
				}

				&.secondary {
					background: #f5f5f5;
					color: #333;
					border: 1rpx solid #e0e0e0;

					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>