<template>
	<view>
		<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
			<swiper-item>
			    <view class="swiper-item" :style="{backgroundImage: `url(https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter2/img${initialIndex}.png)`}">
			    </view>
			</swiper-item>
			<swiper-item>
			    <view class="swiper-item" :style="{backgroundImage: 'url(https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter2/img15.png)'}">
			    </view>
			</swiper-item>
			
			<!-- 第三章 -->
			<swiper-item>
			    <view class="swiper-item" :style="{backgroundImage: 'url(https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter3/img1.png)'}"
				@click="gotoPath('/bmzm/chapter5/index')">
			    </view>
			</swiper-item>
		</swiper>
		<MusicControl />
		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
	</view>
</template>

<script>
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	export default {
		components: {
		    MusicControl,
			NavMenu
		},
		data() {
			return {
				currentIndex: 0,
				initialIndex: 1,
			}
		},
		onLoad(option) {
			this.initialIndex = option.index
		},
		methods: {
		    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%;
	}
</style>