<template>
	<view class="wrap">
		<view class="swiperWrap">
			<!--swiper-->
			<z-swiper v-model="partList" ref="partListSwiper" class="partBox" :options="optionsBox">
				<z-swiper-item class="partBox"><view class="swiperPart">part 1</view></z-swiper-item>
				<z-swiper-item class="partBox">
					<!--swiper-->
					<z-swiper v-model="part3List" ref="part3ListSwiper" class="partBox" :options="optionsPart">
						<z-swiper-item class="partBox"><view class="swiperPart">partt 1</view></z-swiper-item>
						<z-swiper-item class="partBox"><view class="swiperPart">partt 2</view></z-swiper-item>
					</z-swiper>
					<!--swiper end-->
				</z-swiper-item>
				<z-swiper-item class="partBox"><view class="swiperPart">part 3</view></z-swiper-item>
			</z-swiper>
			<!--swiper end-->
		</view>
		
		<!--menu box-->
		<view class="menuBox" v-show="isMenuShow">
			<view class="menuTitle"><image mode="widthFix" class="w100" :src='commonUrl+"images/menuTitle.png?v="'></image></view>
			<view class="menuTabBox">
				<view class="menuTabPart" @click="gotoPart" data-id="0"><image mode="widthFix" class="w100" :src='commonUrl+"images/m_1.png?v="'></image></view>
				<view class="menuTabPart" @click="gotoPart" data-id="1"><image mode="widthFix" class="w100" :src='commonUrl+"images/m_2.png?v="'></image></view>
				<view class="menuTabPart" @click="gotoPart" data-id="2"><image mode="widthFix" class="w100" :src='commonUrl+"images/m_3.png?v="'></image></view>
				<view class="menuTabPart" @click="gotoPart" data-id="3"><image mode="widthFix" class="w100" :src='commonUrl+"images/m_4.png?v="'></image></view>
			</view>
		</view>
		<!--menu box end-->
		
		
		<!--logo loading-->
		<view class="logoLoadingBox" v-show="isLoadingShow"><view class="logoN">BOSE</view></view>
		<!--logo loading end-->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commonUrl: '/static/',
				vjs:'1.0',
				isLoadingShow:true,
				isMenuShow:true,
				optionsBox:{
					direction: 'vertical',
					enabled: true
				},
				optionsPart:{
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							translate: [0, 0, -400],
						},
						next: {
							translate: ['100%', 0, 0]
						}
					}
				},
				partList:[
					{text:'part1'},
					{text:'part2'},
					{text:'part3'}
				],
				part3List:[
					{text:'partt1'},
					{text:'partt2'}
				]
			}
		},
		onLoad() {

		},
		onShow(){
			let that = this
			//hide loading logo event
			setTimeout(function(){
				that.logoLoading()
			},2000)
		},
		methods: {
			//hide loading logo fun
			logoLoading(e){
				this.isLoadingShow = false
			},
			//go to part
			gotoPart(e){
				let that = this
				let id = e.currentTarget.dataset.id
				that.isMenuShow = false
				//that.$refs.partListSwiper.swiper.enable();
				that.$refs.partListSwiper.swiper.slideTo(id, 500, true);
				//that.$refs.partListSwiper.swiper.disable();
			}
		}
	}
</script>
