<template>
	<view style="width: 100vw;">
		<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 === 0">
						<view class="box">
							<!-- <view class="title">我的星槎</view> -->
							<view class="subtitle subtitle1">{{info.text1}}</view>
							<!-- <view class="title">我的目的地</view> -->
							<view class="subtitle subtitle2">{{info.text2}}</view>
							<!-- <view class="title">我的航行BGM</view> -->
							<view class="subtitle subtitle3">{{info.imgTitle}}</view>
						</view>
					</template>
					
					<template v-if="index === 1">
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/img5-text.png" mode="widthFix" class="img5-text.png"></image>
					</template>
					
					<!-- 二维码 -->
					<template v-if="index === 2">
						<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/qrcode.png" mode="widthFix" class="qrcode" :show-menu-by-longpress="true"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>

		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/05/7d970645-f026-4ae0-8d60-a8b5c47bebfc.MP3" />
		<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: 5,
				swiperImages: [
					'',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/img5.png',
					'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img7.png'
				],
				info: {}
			}
		},
		onLoad(option) {
			if(option) {
				let data = JSON.parse(option.data)
				this.info = data
				console.log(data)
				this.swiperImages[0] = data.imgSrc
			}
		},
		methods: {
			handleJumpToPage(idx) {
				this.navIndex = idx
			},
			handleSwiperChange(e) {
			    this.currentIndex = e.detail.current;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100vw;
		height: 100vh;
	}

	.swiper-item {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		background-color: #000;
		background-repeat: no-repeat;
		position: relative;
		
		.box {
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			top: 300rpx;
			text-align: center;
			width: 100%;
			color: rgba(220, 221, 221, 1);
			
			.title {
				font-size: 25rpx;
				margin-top: 50rpx;
			}
			.subtitle {
				position: absolute;
				font-size: 40rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
			.subtitle1 {
				top: 150rpx;
			}
			.subtitle2 {
				top: 280rpx;
			}
			.subtitle3 {
				top: 410rpx;
			}
		}
		
		.img5-text.png {
			width: 312.58rpx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: 492rpx;
		}
	}

	.swiper-img {
		width: 100vw;
		height: 100vh;
	}
	
	.qrcode {
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 25vw;
		bottom: 28vh;
	}
</style>