<template>
	<view>
		<swiper class="swiper-guide" :indicator-dots="true" indicator-color="rgba(255,255,255,.3)" indicator-active-color="#FFF" @change="swiperChange">
			<swiper-item v-for="(item, index) in urls" :key="index">
				<view class="swiper-item">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<button class="guide-btn" v-if="current === (urls.length - 1)" type="default" @click="$Router.replaceAll({name: 'Index'})">立即开启</button>
	</view>
</template>

<script>
	import { guide } from '@/apis/interfaces/guide'
	export default {
		data() {
			return {
				urls	: [],
				current	: 0
			};
		},
		created() {
			guide().then(res=> {
				this.urls = res
			})
		},
		methods:{
			swiperChange(e){
				this.current = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-guide{
		width: 100vw;
		height: 100vh;
		background: #1f1922;
		.swiper-item{
			image{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
	.guide-btn{
		position: fixed;
		bottom: 10vh;
		left: 10vw;
		right: 10vw;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #774ffd;
		color: white;
		border: none;
	}
</style>
