<template>
	<view>
		<view class="guide-swiper" v-if="show">
			<button class="guide-btn" size="default" @click="openApp">开启我的易货之旅</button>
			<swiper @change="swiperChange">
				<swiper-item v-for="(item, index) in swiperArray" :key="index">
					<view class="swiper-content">
						<view class="title">{{item.title}}</view>
						<view class="sub-title">{{item.subTitle}}</view>
						<view class="cover">
							<image :src="item.coverUrl" mode="aspectFit"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 分页 -->
			<view class="swiper-pages" v-if="swiperArray.length > 1">
				<text
					class="item"
					v-for="(item, index) in swiperArray"
					:key="index"
					:class="{'show': index === swiperCurrent}"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				swiperCurrent: 0,
				swiperArray	 : [{
					title	: "打造B2B2C",
					subTitle: "数字通证商品易货贸易平台",
					coverUrl: "../../static/dev/guide_cover_00.png"
				},{
					title	: "打造为自由创业者",
					subTitle: "提供数字商品供应链云仓平台",
					coverUrl: "../../static/dev/guide_cover_01.png"
				}]
			};
		},
		mounted() {
			// 检查是否直接进入首页
			uni.showLoading()
			let spread = this.$store.getters.getSpread || uni.getStorageSync('spread')
			setTimeout(()=>{
				uni.hideLoading()
				if(!spread){
					this.$Router.pushTab({name: 'Equity'})
					return
				}
				// 此处请求轮播屏数据
				this.show = true
			}, 500)
		},
		methods:{
			swiperChange(e){
				this.swiperCurrent = e.detail.current
			},
			// 进入首页
			openApp(){
				this.$store.commit('setSpread', false)
				this.$Router.pushTab({name: 'Equity'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guide-swiper{
		background: white;
		width: 100vw;
		height: 100vh;
		swiper{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			.swiper-content{
				text-align: center;
				height: 100%;
				padding-bottom: 27%;
				box-sizing: border-box;
				@extend .vertical;
				.title{
					font-weight: bold;
					font-size: 50rpx;
					color: $text-color;
					padding: $padding 0;
				}
				.sub-title{
					font-size: $title-size-m;
					color: $text-gray;
				}
				.cover{
					margin-top: $margin * 3;
					display: inline-block;
					position: relative;
					width: 68%;
					padding-top: 68%;
					image{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		// 分页信息
		.swiper-pages{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 27vh;
			text-align: center;
			.item{
				display: inline-block;
				background: $text-gray-m;
				height: 10rpx;
				width: 10rpx;
				margin: 0 8rpx;
				&.show{
					background: $text-price;
					width: 20rpx;
					transition: all .4s;
				}
			}
		}
		// 按钮
		.guide-btn[size="default"]{
			position: fixed;
			bottom: 12vh;
			left: 10vw;
			width: 80vw;
			background: $text-price;
			border-radius: 0;
			color: white;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0;
			font-size: 32rpx;
			z-index: 9;
			&::after{
				border: none;
			}
		}
	}
</style>
