<template>
  <view class="adv-box relative">
    <swiper v-if="imgs.length > 0" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" circular="true">
      <swiper-item v-for="(item, index) in imgs" :key="index">
        <view class="swiper-item">
          <image :src="item"></image>
        </view>
      </swiper-item>
    </swiper>

    <image v-else src="/common/img/adv.jpg"></image>

    <view class="time-box absolute">{{ time === 0 ? '跳过广告' : time + 's' }}</view>
  </view>
</template>

<script setup>
  import { ref, computed, watch } from 'vue';
  import { useStore } from 'vuex';

  const store = useStore();
  const indicatorDots = true;
  const autoplay = true;
  const advs = computed(() => store.state.advs);
  const imgs = ref([]);

  if (advs.value) {
    imgs.value = JSON.parse(advs.value);
  }

  watch(advs, () => {
    imgs.value = JSON.parse(advs.value);
  })

  const time = ref(10);

  let timer = setInterval(() => {
    time.value--;
    if (time.value === 0) clearInterval(timer);
  }, 1000);

  setTimeout(() => {
    // 判断是否第一次打开App
    let openNum = uni.$storage.getStorageSync('fistOpenApp');
    if (openNum === 'true') {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    } else {
      uni.$storage.setStorageSync('fistOpenApp', 'true');
      uni.navigateTo({
        url: '/pages/guide/guide'
      })
    }
  }, 10000);

</script>

<style lang="scss" scoped>
  .adv-box {
    width: 100%;
    height: 100%;
  }

  .swiper {
    height: 100%;
  }

  .swiper-item {
    width: 100%;
    height: 100%;

    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .time-box {
    top: 10px;
    right: 10px;
    display: inline-block;
    width: 60px;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
    text-align: center;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 12px;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, .8);
  }
</style>
