<template>
	<view class="success-container">
		<!-- 支付成功状态和订单信息 -->
		<view class="status-order-card">
			<!-- 支付成功状态 -->
			<view class="status-section">
				<view class="status-icon success"></view>
				<view class="status-text">{{ $t('success.paymentSuccess') }}</view>
				<view class="status-desc">{{ $t('success.paymentSuccessDesc') }}</view>
			</view>

			<!-- 分割线 -->
			<view class="section-divider"></view>

			<!-- 订单信息 -->
			<view class="order-section">
				<view class="card-title">{{ $t('success.orderInfo') }}</view>
				<view class="info-item">
					<text class="label">{{ $t('order.orderNo') }}</text>
					<text class="value">{{ orderInfo.orderNo || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">{{ $t('order.deviceNo') }}</text>
					<text class="value">{{ orderInfo.deviceNo || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">{{ $t('success.paymentAmount') }}</text>
					<text class="value">￥{{ orderInfo.amount || '0.00' }}</text>
				</view>
				<view class="info-item">
					<text class="label">{{ $t('success.paymentTime') }}</text>
					<text class="value">{{ orderInfo.payTime || '-' }}</text>
				</view>
			</view>
		</view>

		<!-- 设备状态 -->
		<view class="device-status">
			<view class="status-message">{{ deviceMessage }}</view>
			<view class="loading-animation" v-if="isLoading">
				<view class="loading-circle"></view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="button-group">
			<view class="secondary-btn" @click="goToHome">{{ $t('success.backToHome') }}</view>
			<view class="primary-btn" @click="goToOrderList">{{ $t('success.viewOrder') }}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		queryById,
		getOrderByOrderNo
	} from '@/config/api/order.js'

	// 获取当前实例以访问 $t 方法
	const {
		proxy
	} = getCurrentInstance()

	// 响应式数据
	const orderId = ref('')
	const orderInfo = ref({})
	const isLoading = ref(true)
	const deviceMessage = ref('')
	const hasTriggeredDevice = ref(false)

	// 页面加载
	onLoad((options) => {
		// 设置页面标题
		uni.setNavigationBarTitle({
			title: proxy.$t('success.paymentSuccess')
		})

		deviceMessage.value = proxy.$t('success.preparingDevice')

		// #ifdef H5
		if (uni.getStorageSync('pendingPaymentNo')) {
			orderId.value = options.orderId
			loadOrderInfo()

			// 添加页面显示监听，防止页面切换后重复触发弹出
			uni.$once('orderSuccess:' + orderId.value, () => {
				console.log('已经触发过弹出逻辑，不再重复触发')
				hasTriggeredDevice.value = true
			})
		} else {
			uni.showToast({
				title: proxy.$t('order.orderNotExist'),
				icon: 'none'
			})
			setTimeout(() => {
				goToHome()
			}, 1500)
		}
		// #endif
		// #ifndef H5
		if (options && options.orderId) {
			orderId.value = options.orderId
			loadOrderInfo()

			// 添加页面显示监听，防止页面切换后重复触发弹出
			uni.$once('orderSuccess:' + orderId.value, () => {
				console.log('已经触发过弹出逻辑，不再重复触发')
				hasTriggeredDevice.value = true
			})
		} else {
			uni.showToast({
				title: proxy.$t('order.orderNotExist'),
				icon: 'none'
			})
			setTimeout(() => {
				goToHome()
			}, 1500)
		}
		// #endif
	})

	// 加载订单信息
	const loadOrderInfo = async () => {
		try {
			uni.showLoading({
				title: proxy.$t('common.loading')
			})

			const res = await queryById(orderId.value)
			if (res.code === 200 && res.data) {
				const orderData = res.data
				orderInfo.value = {
					orderNo: orderData.orderNo || orderData.orderId,
					deviceNo: orderData.deviceNo,
					amount: orderData.payAmount || orderData.amount,
					payTime: orderData.payTime || formatTime(new Date())
				}

				// 检查订单状态
				if (orderData.orderStatus === 'IN_USED') {
					// 如果已经是使用中状态，可能说明开锁已经完成
					deviceMessage.value = '设备已弹出，请取走您的风扇'
					isLoading.value = false

					// 如果是第一次加载页面且设备已弹出，记录状态，避免重复弹出
					if (!hasTriggeredDevice.value) {
						uni.$emit('orderSuccess:' + orderId.value)
						hasTriggeredDevice.value = true
					}
				} else {
					// 在此页面不再触发设备弹出操作，仅更新展示文案和加载状态
					deviceMessage.value = proxy.$t('success.paymentSuccessDesc')
					isLoading.value = false
				}
			} else {
				throw new Error('获取订单信息失败')
			}

			uni.hideLoading()
		} catch (error) {
			uni.hideLoading()
			uni.showToast({
				title: error.message || proxy.$t('order.getOrderFailed'),
				icon: 'none'
			})
		}
	}

	// 格式化时间
	const 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')
		const second = date.getSeconds().toString().padStart(2, '0')
		return `${year}-${month}-${day} ${hour}:${minute}:${second}`
	}

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

	// 查看订单列表
	const goToOrderList = () => {
		uni.redirectTo({
			url: '/pages/order/index'
		})
	}
</script>

<style lang="scss" scoped>
	.success-container {
		padding: 20px;
		padding-bottom: 180rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.status-order-card {
		background-color: #fff;
		border-radius: 12px;
		margin-bottom: 20px;
		overflow: hidden;

		.status-section {
			padding: 30px;
			text-align: center;

			.status-icon {
				width: 60px;
				height: 60px;
				margin: 0 auto 16px;
				background-color: #07c160;
				border-radius: 50%;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 30px;
					height: 20px;
					border: 3px solid #fff;
					border-top: none;
					border-right: none;
					transform-origin: center;
					transform: translate(-50%, -70%) rotate(-45deg);
				}
			}

			.status-text {
				font-size: 24px;
				font-weight: bold;
				color: #07c160;
				margin-bottom: 8px;
			}

			.status-desc {
				font-size: 14px;
				color: #666;
			}
		}

		.section-divider {
			height: 1px;
			background-color: #f0f0f0;
			margin: 0 20px;
		}

		.order-section {
			padding: 20px;

			.card-title {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 16px;
				color: #333;
				padding-left: 12px;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 4px;
					height: 16px;
					background-color: #07c160;
					border-radius: 2px;
				}
			}

			.info-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12px;

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

				.label {
					color: #666;
					font-size: 14px;
				}

				.value {
					color: #333;
					font-size: 14px;
					font-weight: 500;
				}
			}
		}
	}

	.device-status {
		background-color: #fff;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 20px;
		text-align: center;

		.status-message {
			font-size: 16px;
			color: #333;
			margin-bottom: 12px;
		}

		.loading-animation {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 40px;

			.loading-circle {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				border: 3px solid #f0f0f0;
				border-top-color: #07c160;
				animation: spin 1s linear infinite;
			}

			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}
		}
	}

	.button-group {
		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: flex-end;
		align-items: center;
		gap: 20rpx;

		.primary-btn {
			background-color: #07c160;
			color: #fff;
			border: none;
			border-radius: 32rpx;
			padding: 0 32rpx;
			font-size: 24rpx;
			height: 64rpx;
			line-height: 64rpx;
			white-space: nowrap;

			&:active {
				opacity: 0.8;
			}
		}

		.secondary-btn {
			background-color: #fff;
			color: #07c160;
			border: 2rpx solid #07c160;
			border-radius: 32rpx;
			padding: 0 32rpx;
			font-size: 24rpx;
			height: 64rpx;
			line-height: 64rpx;
			white-space: nowrap;

			&:active {
				background-color: #f5f5f5;
			}
		}
	}
</style>