<template>
	<view class="viewpager__-wrapper">
		<u-swiper
			:list="list6"
			@change="e => currentNum = e.current"
			:autoplay="true"
			height="100%"
			indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
			</view>
		</u-swiper>
		<view class="viewpager__-time l-box-pf-t" v-if="countDown!=0">
			{{countDown}}后自动关闭
		</view>
		<view class="viewpager__-button l-box-pf-b" v-if="currentNum == 2">
			<u-button type="success" text="立即体验" @click="handleIndex"></u-button>
		</view>
	</view>
</template>

<script>
	const app = getApp()

	export default {
		name:"viewpager",
		data() {
			return {
				currentNum: 1,
				bannerList:[],
				list6: [],
				countDown: 0,
				timerThree: null,
				_temp:''
			};
		},
		created() {
		},
		onLoad() {
			this.test()
		},
		methods:{
			test(){
                //记录当天时间 存起来 
				const that = this
				if(!uni.getStorageSync('today')){
					that.countDownFunc()
					uni.setStorageSync("today", new Date().toLocaleDateString());
				} else {
					let _time = uni.getStorageSync('today')
					let _today =  new Date().toLocaleDateString()
                    // 第二次进来 如果存起来的时间等于今天的时间  直接进首页
					if(_time == _today) {
						uni.switchTab({
							url: '../index/index'
						})
					} else {
                      // 当天时间不等于存起来的时间。重新存今天的时间，请求广告并且展示
						uni.setStorageSync("today", new Date().toLocaleDateString());
						that.countDownFunc()
					}
				}
			},
			getBanner() {
				let _url =app.globalData.url
			   	const newUrl = _url.substr(0, _url.length - 1);
				自己拿广告图的接口().then((res) => {
					if(res) {
						this.bannerList = res
						let arr = []
						res.forEach(item => {
							let imgUrl = newUrl + item.picUrl
							arr.push(imgUrl)
						});
						this.list6 = arr
					}
				})
			},
			countDownFunc(){
				this.getBanner()
				const TIME_COUNT = 8; 
				if(!this.timerThree){ 
					this.countDown = TIME_COUNT;
					this.timerThree = setInterval(()=>{
					if(this.countDown > 0 && this.countDown <= TIME_COUNT){
						this.countDown--;
					} else {
						clearInterval(this.timerThree);
						this.timerThree = null;
						uni.switchTab({
							url: '../index/index'
						})
					}
					},1000)
				}
			},
			handleIndex(){
				if(this.timerThree){
					clearInterval(this.timerThree);
					this.timerThree = null;
					uni.switchTab({
						url: '../index/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.viewpager__{
		&-wrapper{
			height: 100vh;
		}
		&-time{top:40px;color: #C4C6C9;left: 20rpx;font-size: 24rpx;}
		&-button{bottom: 45px;width: 50%;left: 25%;}
	}
.indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
</style>