<template>
	<view class="waiting-container">
		<view class="title">{{ $t('waiting.title') }}</view>
		<view class="progress-wrapper">
			<view class="progress-circle">
				<view class="progress-left">
					<view class="progress-bar" :style="{ transform: 'rotate(' + leftRotateDeg + 'deg)' }"></view>
				</view>
				<view class="progress-right">
					<view class="progress-bar" :style="{ transform: 'rotate(' + rightRotateDeg + 'deg)' }"></view>
				</view>
				<view class="progress-inner">
					<text class="percent">{{ progress }}%</text>
					<text class="hint">{{ $t('waiting.preparing') }}</text>
				</view>
			</view>
		</view>

		<view class="desc">{{ $t('waiting.longTimeNotice') }}</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, onUnmounted } from 'vue'
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import { getOrderByOrderNoScorePayStatus, cancelOrder } from '@/config/api/order.js'
	import { useI18n } from '@/utils/i18n.js'

	const { t: $t } = useI18n()

	const progress = ref(0)
	const leftRotateDeg = ref(0)
	const rightRotateDeg = ref(0)
	const orderNo = ref('')
	const orderId = ref('')
	const deviceId = ref('')
	let progressTimer = null
	let pollTimer = null
	let timeoutTimer = null

	const updateRotate = (val) => {
		const safeVal = Math.max(0, Math.min(100, val))
		if (safeVal <= 50) {
			rightRotateDeg.value = safeVal * 3.6
			leftRotateDeg.value = 0
		} else {
			rightRotateDeg.value = 180
			leftRotateDeg.value = (safeVal - 50) * 3.6
		}
	}

	const startProgress = () => {
		// 视觉进度：平滑增长到 97%，等待真实状态成功后拉到 100%
		progressTimer = setInterval(() => {
			if (progress.value < 97) {
				progress.value += 1
				updateRotate(progress.value)
			}
		}, 120)
	}

	const stopAllTimers = () => {
		if (progressTimer) {
			clearInterval(progressTimer)
			progressTimer = null
		}
		if (pollTimer) {
			clearInterval(pollTimer)
			pollTimer = null
		}
		if (timeoutTimer) {
			clearTimeout(timeoutTimer)
			timeoutTimer = null
		}
	}

	const handleSuccess = () => {
		progress.value = 100
		updateRotate(progress.value)
		setTimeout(() => {
			// 跳转到订单详情页面，传递 orderId 和 deviceId
			const url = `/pages/order/detail?orderId=${orderId.value || orderNo.value}&deviceId=${deviceId.value}`
			console.log('等待完成，跳转到订单详情:', url)
			uni.redirectTo({ url })
		}, 400)
	}

	const handleFailure = async () => {
		try {
			if (orderNo.value) {
				await cancelOrder({ orderId: orderNo.value })
			}
		} catch (e) {}
		uni.showToast({ title: $t('waiting.rentFailed'), icon: 'none' })
		setTimeout(() => {
			uni.reLaunch({ url: '/pages/index/index' })
		}, 800)
	}

	const startPolling = () => {
		pollTimer = setInterval(async () => {
			try {
				if (!orderNo.value) return
				const res = await getOrderByOrderNoScorePayStatus(orderNo.value)
				if (res && res.data) {
					// 如果还没有 orderId，从返回数据中获取
					if (!orderId.value && res.data.orderId) {
						orderId.value = res.data.orderId
						console.log('从订单状态中获取 orderId:', orderId.value)
					}
					if (!deviceId.value && res.data.deviceNo) {
						deviceId.value = res.data.deviceNo
						console.log('从订单状态中获取 deviceId:', deviceId.value)
					}
					
					if (res.data.orderStatus == 'in_used') {
						stopAllTimers()
						handleSuccess()
					} else if (res.data.orderStatus == 'waiting_for_payment') {
						stopAllTimers()
						handleFailure()
					}
				}
			} catch (e) {
				// 网络错误不立即失败，继续轮询
			}
		}, 1200)

		// 超时保护：例如 60 秒
		timeoutTimer = setTimeout(() => {
			stopAllTimers()
			uni.showToast({ title: $t('waiting.timeout'), icon: 'none' })
			setTimeout(() => {
				uni.reLaunch({ url: '/pages/index/index' })
			}, 800)
		}, 60000)
	}

	onLoad((query) => {
		uni.setNavigationBarTitle({
			title: $t('waiting.title')
		})
		if (query) {
			if (query.orderNo) {
				orderNo.value = query.orderNo
			}
			if (query.orderId) {
				orderId.value = query.orderId
			}
			if (query.deviceId) {
				deviceId.value = query.deviceId
			}
			console.log('等待页面参数:', { orderNo: orderNo.value, orderId: orderId.value, deviceId: deviceId.value })
		}
		startProgress()
		startPolling()
	})

	onUnload(() => {
		stopAllTimers()
	})

	onMounted(() => {
		// 进入页面时初始化进度显示
		updateRotate(progress.value)
	})

	onUnmounted(() => {
		stopAllTimers()
	})
</script>

<style lang="scss" scoped>
	.waiting-container {
		min-height: 100vh;
		padding: 60rpx 40rpx;
		background: #f5f7fa;
		display: flex;
		flex-direction: column;
		align-items: center;
		animation: fade-in 0.25s ease;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 40rpx;
	}

	.progress-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0;
	}

	.progress-circle {
		position: relative;
		width: 240rpx;
		height: 240rpx;
	}

	/* 外层灰色轨道 */
	.progress-circle::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 16rpx solid #eaecef;
		box-sizing: border-box;
	}

	/* 两个半圆容器，分别裁剪一半区域 */
	.progress-left,
	.progress-right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.progress-right {
		clip: rect(0, 240rpx, 240rpx, 120rpx);
	}

	.progress-left {
		clip: rect(0, 120rpx, 240rpx, 0);
	}

	/* 进度条（整圆），通过旋转配合父容器裁剪形成半圈填充 */
	.progress-bar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 16rpx solid #07c160;
		clip: rect(0, 120rpx, 240rpx, 0);
		box-sizing: border-box;
		transform: rotate(0deg);
		transition: transform 0.12s linear;
	}

	/* 内层文案区域 */
	.progress-inner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
	}

	.percent {
		font-size: 44rpx;
		font-weight: 700;
		color: #07c160;
	}

	.hint {
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #999;
	}

	.desc {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #666;
		text-align: center;
		line-height: 1.6;
	}

	@keyframes fade-in {
		from { opacity: 0; transform: translateY(10rpx); }
		to { opacity: 1; transform: translateY(0); }
	}
</style>

