<template>
	<view class="third-jump-page">
		<image class="bg-img" :src="`${$baseUrl}thirdJumpMiddlePage/v1/syJumpPageBg.jpg`" mode="widthFix"
			@click="retryJump"></image>
	</view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl

// 响应式数据
const jumpFailed = ref(false)
const errorMessage = ref('')
const jumpParams = ref({})
const bgImg = ref('')

const bgImgObj = {
	'sy': 'thirdJumpMiddlePage/v1/syJumpPageBg.jpg'

}

// 页面加载时获取参数
onMounted(() => {
	// 获取页面参数
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options || {}

	console.log('页面参数 options:', options)

	const key = options.key || 'sy'

	bgImg.value = bgImgObj[key]

	// 解析跳转参数
	jumpParams.value = {
		appId: options.appId || '',
		path: decodeURIComponent(options.path) || '',
		extraData: options.extraData ? JSON.parse(decodeURIComponent(options.extraData)) : {},
		envVersion: options.envVersion || 'release',
	}

	// 执行跳转
	executeJump()
})

// 执行跳转
const executeJump = () => {
	if (!jumpParams.value.appId) {
		showError('缺少必要参数：appId')
		return
	}

	console.log('开始跳转，参数:', jumpParams.value)

	// 调用跳转方法
	uni.navigateToMiniProgram({
		appId: jumpParams.value.appId,
		path: jumpParams.value.path,
		extraData: jumpParams.value.extraData,
		envVersion: jumpParams.value.envVersion,
		success: (res) => {
			console.log('跳转成功:', res)
			// 跳转成功后可以做一些清理工作
		},
		fail: (err) => {
			console.error('跳转失败:', err)
			showError(`跳转失败：${err.errMsg || '未知错误'}`)
		}
	})
}

// 显示错误信息
const showError = (message) => {
	errorMessage.value = message
	jumpFailed.value = true
}

// 重试跳转
const retryJump = () => {
	jumpFailed.value = false
	errorMessage.value = ''
	executeJump()
}

// 返回上一页
const goBack = () => {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="less" scoped>
.third-jump-page {
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.bg-img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
</style>
