<template>
	<view>
		<view class="swiper-css zqui-rel" :style="{ height: hpx }">
			<swiper class="swiper" :style="{ height: hpx }" :indicator-dots="indicatorDots" :autoplay="autoplay"
				disable-touch='true' :interval="interval" :duration="duration" @change="guideAction">
				<swiper-item v-for="(item, index) in imageList" :key="index" catchtouchmove="stopChange">
					<image class="image-size" mode="widthFix" :src="item.src" />
				</swiper-item>
			</swiper>

			<!-- 按钮样式切换 -->
			<template v-if="cur != 2">
				<view class=" flex-column dots">
					<block v-for="(item,index) in imageList" :key="index">
						<view class="dot" :class="{'active':  index == cur}"></view>
					</block>
				</view>
			</template>

			<!-- 第三张图使用按钮《立即进入》 -->
			<template v-if="cur == 1">
				<button class="flex-column cu-btn footer" @click="launchApp">立即体验</button>
			</template>
			<!-- 右上角跳过按钮 -->
			<view class="btn-box" @click="launchApp"><text class="passbtn">{{num}}跳过</text></view>
		</view>


	</view>
</template>

<script>
	const animation = weex.requireModule('animation');
	export default {
		data() {
			return {
				//修改图片,文字描述
				imageList: [{

						src: '/static/images/guide.png'
					}

				],
				indicatorDots: false,
				autoplay: false,
				interval: 10000,
				duration: 500,
				iStatusBarHeight: '0px',
				hpx: '100%',
				cur: 0,
				dotsStyles: '',
				num: 3
			};
		},
		onLoad() {
			let that = this;
			plus.navigator.closeSplashscreen();
			uni.getSystemInfo({
				success: function(res) {
					that.hpx = res.windowHeight + 'px';
				}
			});
		},
		onReady() {
			// this.move(0, 1);
		},
		mounted() {

			this.countDown()

		},
		methods: {
			countDown() {
				let {
					num
				} = this;
				// if (num === 3) this.nums = true;
				num = num > 0 ? num - 1 : "GO";
				setTimeout(() => {
					this.num = num;
					if (num == 'GO') {
						this.launchApp()
						return
					}
					this.countDown();
				}, 1000);


			},

			stopTouchMove: function() {
				return false;
			},

			launchApp() {

				//跳过引导页,储存本地值,下次进入直接跳过
				uni.setStorage({
					key: 'launchFlag',
					data: true,
					success() {

						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				});
			},
			guideAction(event) {
				let that = this,
					index = event.detail.current;
				that.cur = index;
				// if (index == 0) {
				// 	that.move(0, 1);
				// 	that.moveTwo(150, 0.1);
				// 	that.moveThree(150, 0.1);
				// 	that.lefMainAction(0);
				// }
				// if (index == 1) {
				// 	that.moveTwo(0, 1);
				// 	that.move(150, 0.1);
				// 	that.moveThree(150, 0.1);
				// 	that.lefMainAction(uni.upx2px(80) + 'px');
				// }
				// if (index == 2) {
				// 	that.moveThree(0, 1);
				// 	that.moveTwo(150, 0.1);
				// 	that.move(150, 0.1);
				// 	that.lefMainAction(uni.upx2px(160) + 'px');
				// }
			},
			lefMainAction(mum) {
				var testLM = this.$refs.lefMain;
				animation.transition(
					testLM, {
						styles: {
							transform: 'translate(' + mum + ',0px)'
						},
						duration: 400, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
			},
			move(tran, opa) {
				var testEl = this.$refs.box1;
				animation.transition(
					testEl, {
						styles: {
							transform: 'translate(' + tran + 'px,0px)',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
				var textE2 = this.$refs.box2;
				animation.transition(
					textE2, {
						styles: {
							transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
			},
			moveTwo(tran, opa) {
				var testEl = this.$refs.box3;
				animation.transition(
					testEl, {
						styles: {
							transform: 'translate(' + tran + 'px,0px)',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
				var textE2 = this.$refs.box4;
				animation.transition(
					textE2, {
						styles: {
							transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
			},
			moveThree(tran, opa) {
				var testEl = this.$refs.box5;
				animation.transition(
					testEl, {
						styles: {
							transform: 'translate(' + tran + 'px,0px)',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
				var textE2 = this.$refs.box6;
				animation.transition(
					textE2, {
						styles: {
							transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
			}
		}
	};
</script>

<style lang="scss">
	page {

		min-height: 100%;
		height: 100%;
	}

	.guide {
		width: 100%;
		height: 100%;
	}



	.image-size {
		width: 750rpx;
		height: 100%;
		border: 1px solid red;
	}

	.title-box {
		padding: 250rpx 0 120rpx 64rpx;
	}

	.guide-title {
		font-size: 48rpx;
		font-weight: bold;
		color: rgba(58, 61, 68, 1);
	}

	.guide-subtitle {
		margin-top: 20rpx;
		font-size: 35rpx;
		color: rgba(131, 136, 146, 1);
		line-height: 50rpx;
	}

	.footer {
		width: 231rpx;
		height: 80rpx;
		text-align: center;
		position: fixed;
		bottom: 116rpx;
		left: 37%;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: #2B9939;
	}

	.btn-box {
		position: absolute;
		z-index: 999;
		right: 40rpx;
		top: 120rpx;
	}

	.dots {
		display: flex;
		justify-content: center;
		position: absolute;
		z-index: 999;
		height: 151rpx;
		left: 0;
		right: 0;
		bottom: 20rpx;
	}

	.passbtn {
		color: #ffffff;
		text-align: center;
		border-width: 1rpx;
		border-color: rgba(255, 255, 255, 0.5);
		border-style: solid;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
	}

	.dot {
		margin: 0 4rpx;
		width: 15rpx;
		height: 15rpx;
		background: #CDD2DD;
		border-radius: 8rpx;
		transition: all .6s;
	}

	.dot.active {
		width: 40rpx;
		background: #838892 !important;
	}

	/* 相对定位 */
	.zqui-rel {
		position: relative;
	}

	.swiper-css {
		width: 750rpx;
	}

	.swiper-item {
		width: 750rpx;
	}
</style>