<template>
	<view class="ad-container" v-if="adData.path">
		<!-- 广告图片 -->
		<image 
			class="ad-image" 
			:src="adData.path" 
			mode="aspectFill"
			@click="handleAdClick"
		></image>
		
		<!-- 右上角倒计时跳过按钮 -->
		<view class="skip-button" @click="skipAd">
			<text class="skip-text">跳过 {{countdown}}s</text>
		</view>
		
		<!-- 底部点击跳转按钮 -->
		<view class="bottom-button" v-if="adData.url" @click="handleAdClick">
			<text class="button-text">点击查看详情</text>
		</view>
	</view>
	
	<!-- 加载状态 -->
	<view class="loading-container" v-else>
		<text class="loading-text">加载中...</text>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, nextTick, computed, onUnmounted } from 'vue';
	import { onShow, onLoad, onPageScroll } from "@dcloudio/uni-app";
	import my_api from '@/api/my_api.js'
    import docUrl from "@/utils/docUrl.js";

	// 广告数据
	const adData = ref({
		path: '',
		url: ''
	});
	
	// 倒计时
	const countdown = ref(5);
	let timer = null;
	
	// 页面加载
	onLoad(() => {
		console.log('开屏广告页面加载');
		getStartpage();
	});
	
	// 获取开屏广告数据
	const getStartpage = () => {
		my_api.startpage().then(res => {
			console.log('开屏广告数据:', res);
			if (res && res.data) {
				adData.value = {
					path: docUrl + res.data.path || '',
					url: res.data.url || ''
				};
				
				// 如果有广告图片，开始倒计时
				if (res.data.path) {
					startCountdown();
				} else {
					// 没有广告，直接跳转到首页
					navigateToHome();
				}
			} else {
				// 接口返回异常，直接跳转到首页
				navigateToHome();
			}
		}).catch(err => {
			console.error('获取开屏广告失败:', err);
			// 接口调用失败，直接跳转到首页
			navigateToHome();
		});
	}
	
	// 开始倒计时
	const startCountdown = () => {
		timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(timer);
				navigateToHome();
			}
		}, 1000);
	}
	
	// 跳过广告
	const skipAd = () => {
		clearInterval(timer);
		navigateToHome();
	}
	
	// 点击广告
	const handleAdClick = () => {
		if (adData.value.url) {
			// 有跳转链接，跳转到指定页面
			uni.navigateTo({
				url: '/pages/webview/webview?url=' + adData.value.url
			});
		} else {
			// 没有跳转链接，直接跳转到首页
			navigateToHome();
		}
	}
	
	// 跳转到首页
	const navigateToHome = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		});
	}
	
	// 页面卸载时清理定时器
	onUnmounted(() => {
		if (timer) {
			clearInterval(timer);
		}
	});
	
</script>

<style scoped>
.ad-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	z-index: 9999;
}

.ad-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.skip-button {
	position: absolute;
	top: 60rpx;
	right: 30rpx;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 40rpx;
	padding: 16rpx 24rpx;
	z-index: 10000;
}

.skip-text {
	color: #fff;
	font-size: 28rpx;
	font-weight: 500;
}

.bottom-button {
	position: absolute;
	bottom: 100rpx;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50rpx;
	padding: 24rpx 60rpx;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
	z-index: 10000;
}

.button-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 600;
}

.loading-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.loading-text {
	color: #666;
	font-size: 32rpx;
}
</style>
