<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})` }">
					
				</view>
			</swiper-item>
		</swiper>

		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />

		<MusicControl />
	</view>
</template>

<script>
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	export default {
		components: {
			MusicControl,
			NavMenu
		},
		data() {
			return {
				currentIndex: 0,
				navIndex: 3,
				swiperImages: [
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif',
				]
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
		},
		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% auto;
		background-color: #000;
		background-repeat: no-repeat;
		position: relative;
		
		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 84rpx;
		}
	}

	.swiper-img {
		width: 100vw;
		height: 100vh;
	}
</style>