<template>
    <!-- 直接使用做好的开屏广告组件 -->
    <!-- <m-start-ad :list="kaipingAds" /> -->
    <view class="midTop">
        <uni-badge class="rbt uni-badge-right-margin" :text="leftSecond" type="info" size="normal" absolute="rightTop"
            :offset="[-3, -3]">
            <view class="box" @click="timeup"><text class="box-text">点击<br>跳过</text></view>
        </uni-badge>
    </view>

    <view class="uni-margin-wrap">
        <swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
            <swiper-item v-for="item in kaipingAds">
                <view class="swiper-item">
                    <image :src="item"></image>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    import ctms from '@/apis/ctms/index.js';
    import config from '@/app.config.js';
    export default {
        data() {
            return {
                timer: null,
                second: 6,
                leftSecond: 0,
                kaipingAds: {
                    0: "/static/img/kp/kp1.png"
                },
                ls: "splashShowed"
            }
        },
        watch: {
            // leftSecond(val) {
            //     if (val <= 0) {
            //         this.timeup()
            //         clearInterval(this.timer)
            //     }
            // }
        },
        mounted() {
            // let splashShowed = uni.getStorageSync(this.ls);
            // if (splashShowed) {
            //     return this.timeup();
            // }
            // if (this.hasTabbar) {
            //     uni.hideTabBar()
            // }
            // const timer = setInterval(() => {
            //     if (this.leftSecond == 0) {
            //         clearInterval(this.timer)
            //         this.leftSecond = this.second;
            //         return this.timeup();
            //     }
            //     this.leftSecond--;
            // }, 1000);
            // this.timer = timer;
        },
        methods: {
            timeup() {
                //开屏倒计时结束，清除计时器
                this.leftSecond = 0;
                uni.setStorageSync(this.ls, true)
                clearTimeout(this.timer)
                var url = config.mainPage || "/pages/uni-starter/ucenter/ucenter"
                uni.reLaunch({
                    url: url
                })
            },
            getAds: function() {
                ctms.ads.splash().then((res) => {
                    var _data = res;
                    if (_data) {
                        this.kaipingAds = _data;
                    }
                });
            }
        },
        onLoad: function() {
            this.getAds();
            if (config.isDebug) {
                this.second = 60; //调试期间将时长设置为60秒
            }
            this.leftSecond = this.second;

            let splashShowed = uni.getStorageSync(this.ls); //查看是否显示过开屏
            if (splashShowed) {
                return this.timeup();
            }
            if (this.hasTabbar) {
                uni.hideTabBar()
            }
            const timer = setInterval(() => {
                if (this.leftSecond == 0) {
                    clearInterval(this.timer)
                    this.leftSecond = this.second;
                    return this.timeup();
                }
                this.leftSecond--;
            }, 1000);
            this.timer = timer;
        },
        onUnload() {
            clearInterval(this.timer)
        }
    }
</script>

<style>
    .midTop {
        position: fixed;
        flex-direction: row;
        text-align: center;
        align-items: right;
        justify-content: center;
        z-index: 99;
    }

    .midTop .rbt {
        position: fixed;
        right: 100rpx;
        top: 164rpx;
    }

    .box {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #00000050;
        color: #fff;
        font-size: 12px;
    }

    .box-text {
        text-align: center;
        color: #fff;
        font-size: 12px;
    }

    /*———swiper———*/
    .swiper {
        height: 100vh;
    }

    .swiper-item {
        display: block;
        height: 100vh;
        line-height: 10vh;
        text-align: center;
    }

    .swiper-item>image {
        height: 100vh;
    }

    .swiper-list {
        margin-top: 0;
        margin-bottom: 0;
    }
</style>