<!-- 引导页组件 -->
<template>
	<view class="codeElfGuide">
		<swiper
			class="swiperView"
			indicator-color="rgba(255, 255, 255, .5)"
			indicator-active-color="#fff"
			:indicator-dots="dotsShow"
			:autoplay="autoplay"
			:duration="duration"
			@change="swiperChange">
			<template v-for="item in guideList">
				<swiper-item :key="item.id">
					<view class="swiperItemView" :style="{ 'background-color': item.bg }">
						<image class="imgView" :src="item.img" mode="aspectFit"></image>
						<view class="titleView">
							<view class="title">{{ item.title }}</view>
							<view class="dec">{{ item.dec }}</view>
						</view>
						<view v-if="(item.id + 1) === guideList.length" class="actBtnView">
							<virtual-button style="width: 300rpx;" btnHeight="80" type="376AF5" shape="round" @click="launchFlag">
								<view style="font-size: 28rpx;">{{ experience }}</view>
							</virtual-button>
						</view>
					</view>
				</swiper-item>
			</template>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'CodeElfGuide',
		data() {
			return {
				autoplay: false,
				duration: 500,
				dotsShow: true, // 指示点是否显示
				experience: '立即体验',
				guideList: [
					{ id: 0, img: '/static/components/guidePages/2.png', bg: '#00022D', title: '专业行情机制', dec: '实时更新行业动态数据 及时把握行情趋势' },
					{ id: 1, img: '/static/components/guidePages/3.1.png', bg: '#171C30', title: '账户安全模式', dec: '实时更新行业动态数据 及时把握行情趋势' },
					{ id: 2, img: '/static/components/guidePages/1.png', bg: '#000000', title: '去中心化交易', dec: '实时更新行业动态数据 及时把握行情趋势' }
				]
			}
		},
		methods: {
			launchFlag: function(){
				/**
				 * 向本地存储中设置launchFlag的值，即启动标识；
				 */
				uni.setStorage({
					key: 'launchFlag',
					data: true,
				});
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			swiperChange (e) {
				const _current = e.detail.current
				if (_current === 2) {
					this.dotsShow = false
				} else {
					this.dotsShow = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.codeElfGuide,
.swiperView {
	width: 100%;
	height: 100%;
}
.swiperView {
	// 覆盖样式
	/deep/ .uni-swiper-dots.uni-swiper-dots-horizontal {
		bottom: 90rpx;
	}
	
	.swiperItemView {
		position: relative;
		width: 100%;
		height: 100%;
		
		.imgView {
			width: 100%;
			height: 100%;
		}
		.titleView {
			width: 100%;
			position: absolute;
			bottom: 360rpx;
			left: 0;
			text-align: center;
			.title {
				font-size: 48rpx;
				color: #FFFFFF;
			}
			.dec {
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #CECECE;
			}
		}
		
		.actBtnView {
			width: 100%;
			position: absolute;
			bottom: 90rpx;
			left: 0;
			text-align: center;
		}
	}
}
</style>
