<template>
	<view style="width: 100vw;position: relative;">
		<BackButton/>
		<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
			<swiper-item v-for="(image, index) in swiperImages" :key="index">
				<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
					<template v-if="index == 2">
						<video :src="showImg('/uploads/20250905/c47451404cc87d89205b1003e3a0b589.mp4')"
							style="width: 100vw;height: 30vh;" objectFit="cover" @play="handleVideoPlay"
							@pause="handleVideoPause" @ended="handleVideoEnded"></video>
						<image @click="gotoPath('/xqk/chapter2/index')" v-if="currentIndex == swiperImages.length-1"
							:src="showImg('/uploads/20250905/692abbf32b38257ffb2153651f468a63.png')" class="imgJump"
							mode=""></image>
					</template>

				</view>
			</swiper-item>
		</swiper>
		<AudioControl audioSrc="https://des.dayunyuanjian.cn/data/2025/09/04/fbc13519-cfe5-4088-89b2-59f138bc23cb.MP3" />
		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<MusicControl />
	</view>
</template>

<script>
	import AudioControl from '@/components/AudioControl.vue';
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	export default {
		components: {
			MusicControl,
			NavMenu,
			AudioControl
		},
		data() {
			return {
				currentIndex: 0,
				navIndex: 1,
				// 视频播放前的状态记录
				beforeVideoState: {
					audioWasPlaying: false,
					bgMusicWasPlaying: false
				},
				swiperImages: [
					this.showImg('/uploads/20250903/24303e4b7218eaf3d857c846417eb490.png'),
					this.showImg('/uploads/20250903/17495ef65648c64c31920d312301e991.png'),
					this.showImg('/uploads/20250903/92d6f1c6f8f7de040f3c31c8faf98927.png'),
				],
				animationConfig: {
					delay: 0.5,
					duration: 3,
					keyframes: {
						start: 1,
						first: 0.8,
						second: 1.2,
						third: 0.9,
						end: 1.1
					}
				},
				popupIndex: 1,
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
		},
		onHide() {
			// 页面隐藏时不做任何音频处理（保持xqk分包内音频播放）
			console.log('xqk chapter1: 页面隐藏，保持音频状态');
		},
		onUnload() {
			// 页面销毁时检查是否需要暂停xqk音频
			this.handleXqkAudioOnLeave();
		},
		methods: {
			handleJumpToPage(idx) {
			},
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			// 第二页气泡弹框
			openPopup(i) {
				this.popupIndex = i
				this.$refs.chapterPopup.open();
			},
			// 视频开始播放
			handleVideoPlay() {
				console.log('视频开始播放');

				// 记录当前状态
				this.recordCurrentState();

				// 暂停音频和背景音乐
				this.pauseAllAudio();
			},

			// 视频暂停
			handleVideoPause() {
				console.log('视频暂停');
				// 恢复之前的状态
				this.restorePreviousState();
			},

			// 视频播放结束
			handleVideoEnded() {
				console.log('视频播放结束');
				// 恢复之前的状态
				this.restorePreviousState();
			},

			// 记录当前音频和背景音乐状态
			recordCurrentState() {
				try {
					// 检查音频状态
					if (uni.$globalAudio && uni.$globalAudio.isAudioPlaying()) {
						this.beforeVideoState.audioWasPlaying = true;
						console.log('记录：音频正在播放');
					} else {
						this.beforeVideoState.audioWasPlaying = false;
					}

					// 检查背景音乐状态
					const app = getApp();
					if (app && app.globalData && app.globalData.isMusicPlaying) {
						this.beforeVideoState.bgMusicWasPlaying = true;
						console.log('记录：背景音乐正在播放');
					} else {
						this.beforeVideoState.bgMusicWasPlaying = false;
					}
				} catch (error) {
					console.error('记录状态失败:', error);
				}
			},

			// 暂停所有音频
			pauseAllAudio() {
				try {
					// 暂停音频
					if (this.beforeVideoState.audioWasPlaying && uni.$globalAudio) {
						uni.$globalAudio.pauseCurrentAudio();
						console.log('暂停音频');
					}

					// 暂停背景音乐
					if (this.beforeVideoState.bgMusicWasPlaying) {
						const app = getApp();
						if (app && app.globalData && app.globalData.bgMusic) {
							app.globalData.bgMusic.pause();
							console.log('暂停背景音乐');
						}
					}
				} catch (error) {
					console.error('暂停音频失败:', error);
				}
			},

			// 恢复之前的状态
			restorePreviousState() {
				try {
					// 恢复音频
					if (this.beforeVideoState.audioWasPlaying && uni.$globalAudio) {
						uni.$globalAudio.playCurrentAudio();
						console.log('恢复音频播放');
					}

					// 恢复背景音乐
					if (this.beforeVideoState.bgMusicWasPlaying) {
						const app = getApp();
						if (app && app.globalData && app.globalData.bgMusic) {
							app.globalData.bgMusic.play();
							console.log('恢复背景音乐播放');
						}
					}

					// 重置状态记录
					this.beforeVideoState.audioWasPlaying = false;
					this.beforeVideoState.bgMusicWasPlaying = false;
				} catch (error) {
					console.error('恢复状态失败:', error);
				}
			},
			// 生成图片完整 URL
			getImageUrl(path) {
				if (typeof path === 'object') {
					path = path.url;
				}
				return `https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter1/${path}`;
			},
			// 处理xqk音频管理（页面离开时）
			handleXqkAudioOnLeave() {
				try {
					// 获取当前路径
					const currentPath = uni.$xqkAudio.getCurrentPath();
					
					// 检查下一个页面的路径（通过页面栈获取）
					const pages = getCurrentPages();
					let shouldPause = true; // 默认暂停
					
					// 如果页面栈还有其他页面，检查上一个页面是否在xqk分包内
					if (pages.length > 1) {
						const previousPage = pages[pages.length - 2];
						if (previousPage && previousPage.route) {
							// 如果返回到的页面仍在xqk分包内，不暂停音频
							if (uni.$xqkAudio.isInXqkPackage(previousPage.route)) {
								shouldPause = false;
							}
						}
					}
					
					if (shouldPause) {
						// 离开xqk分包，暂停音频
						uni.$xqkAudio.pauseXqkAudio();
						console.log('xqk chapter1: 离开xqk分包，已暂停音频');
					} else {
						console.log('xqk chapter1: 仍在xqk分包内，保持音频播放');
					}
				} catch (error) {
					console.error('xqk chapter1: 音频管理失败:', error);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100vw;
		height: 100vh;
	}
	.imgJump{
		position: absolute;
		bottom:53rpx;
		right:0;
		width: 273rpx;
		height: 85rpx;
		opacity:0.9;
		z-index: 999999;
	}

	.swiper-item {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		background-color: #000;
		background-repeat: no-repeat;
		position: relative;

		.module1 {
			position: absolute;
			width: 52.1rpx;
			top: 1020rpx;
			left: 235rpx;
			animation: breath1 3s ease-in-out infinite;
		}

		.module2 {
			position: absolute;
			width: 52.1rpx;
			top: 760rpx;
			left: 317rpx;
			animation: breath2 4s ease-in-out infinite;
		}

		.module3 {
			position: absolute;
			width: 52.1rpx;
			top: 700rpx;
			left: 498rpx;
			animation: breath3 5s ease-in-out infinite;
		}

		// 呼吸效果动画 - 不同频率
		@keyframes breath1 {

			0%,
			100% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.2);
			}
		}

		@keyframes breath2 {

			0%,
			100% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.2);
			}
		}

		@keyframes breath3 {

			0%,
			100% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.2);
			}
		}

		.img4-text {
			width: 428.43rpx;
			position: absolute;
			top: 170rpx;
			left: 100rpx;
		}

		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 100rpx;
		}
	}

	.swiper-img {
		width: 100vw;
		height: 100vh;
	}

	.img2-1 {
		width: 267.37rpx;
		position: fixed;
		top: 395rpx;
		left: 70rpx;
	}

	.img2-2 {
		width: 332.24rpx;
		position: fixed;
		top: 210rpx;
		left: 360rpx;
	}

	.img2-3 {
		width: 600.59rpx;
		position: fixed;
		bottom: 215rpx;
		right: 40rpx;
	}
</style>