/*
 * @Description: 引导页组件
 * @Author: fengal
 * @Date: 2023-12-19 15:43:52
 * @LastEditTime: 2023-01-06 17:43:52
 */
<template>
	<view class="view-guide" :style="{height: windowHeight + 'px'}">
		<swiper class="swiper" :indicator-dots="false" @change="swiperChange">
			<swiper-item v-for="(item, index) in swiperList" :key="index" 
				style="touch-action: none;">
				<view class="swiper-item">
					<view class="guide-title-one">{{item.title1}}</view>
					<view class="guide-title-two">{{item.title2}}</view>
					<image class="guide-img" :src="item.src" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="swiper-active-guide" v-if="currentIndex != swiperList.length-1">
			<view :class="currentIndex == idx ? 'active-item' : 'not-active'" 
			    v-for="(items, idx) in swiperList" :key="idx" >
			</view>
		</view>
		<view class="swiper-active-guide" v-else>
			<button type="primary" class="button" @click.stop="handleClick">立即体验</button>
		</view>
	</view>
</template>

<script>
export default {
	props : {
		swiperList: {type: Array, default: () => []}
	},
	
	data() {
		return {
			windowHeight: '',
			currentIndex: 0,	//轮播位置
		}
	},
	
	methods: {
		swiperChange(e) {
			this.currentIndex = e.detail.current;
		},
		
		handleClick() {
			uni.setStorageSync('guideLoaded', 'yes');
			this.$emit("handle-experience");
		}
	},
	
	created() {
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
	}
}
</script>

<style scoped lang="scss">
.view-guide {
	width: 100%;
	position: relative;
	background: linear-gradient(180deg, #B9D5E8 0%, #FBFCFD 100%);
	touch-action: none;
}

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

.guide-title-one {
	position: fixed;
	top: 81px;
	left: 37px;
	width: 42rpx;
	margin: 0 auto;  
	line-height: 50rpx;  
	font-size: 18px; 
	font-weight: 600;
	color: #171D67;
	z-index: 9;
}

.guide-title-two {
	position: fixed;
	top: 126px;
	left: 80px;
	width: 42rpx;
	margin: 0 auto;  
	line-height: 50rpx;  
	font-size: 18px; 
	font-weight: 600;
	color: #171D67;
	z-index: 9;
}

.guide-img {
	position: fixed;
	top: 230px;
	width: 100%;
	height: auto;
	z-index: 1;
}

.swiper-active-guide {
	width: 100%;
	position: fixed;
	bottom: 57px;
	display: flex;
	align-items: center;
	justify-content: center;
	view {
		margin: 0 18rpx;
	}
	.active-item {
		width: 56rpx;
		height: 20rpx;
		background: #0081FF;
		border-radius: 10rpx;
	}
	.not-active {
		width: 28rpx;
		height: 28rpx;
		background: #B6DBFD;
		border-radius: 50%;
	}
	.button {
		width: 314rpx;
		border-radius: 46rpx;
	}
}
</style>