<template>
    <view>
        <swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
            <swiper-item v-for="(imageUrl, index) in swiperImages" :key="index">
                <view class="swiper-item" :style="{ backgroundImage: `url(${imageUrl})` }"
				@click="index == 6 ? gotoPath('/bmzm/chapter6/index') : null"></view>
            </swiper-item>
        </swiper>
		<MusicControl />
		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
		<AudioControl audioSrc="https://des.dayunyuanjian.cn/data/2025/09/05/9875a62d-14ef-481e-b88f-19c061478ce6.MP3" />
    </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,
            popupIndex: 1,
            swiperImages: [
                'https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter3/img2.png',
                'https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter3/img3.png',
                'https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter3/img4.png',
                'https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter3/img5.png',
                'https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter3/img6.png',
                'https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter3/img7.png',
                'https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter4/img1.png'
            ]
        };
    },
    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>