<template>
  <!-- indicator-dots 是否显示面板指示点 -->
  <!-- indicator-color 指示点颜色 -->
  <!-- indicator-active-color 当前选中的指示点颜色 -->

  <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay">
    <swiper-item v-for="(item, index) in imgs" :key="index">
      <view class="swiper-item relative">
        <image :src="item"></image>

        <u-button class="btn absolute" v-if="index === imgs.length - 1" @click="toIndex">点击进入APP</u-button>
      </view>
    </swiper-item>
  </swiper>
</template>

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

  const store = useStore();
  const indicatorDots = true;
  const autoplay = false;

  const guide = computed(() => store.state.guide);
  const imgs = ref([]);

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

  watch(guide, () => {
    imgs.value = JSON.parse(guide.value);
  })
  
  function toIndex() {
    uni.navigateTo({
      url: '/pages/index/index'
    })
  }
</script>

<style lang="scss" scoped>
  .swiper {
    height: calc(100vh - var(--status-bar-height));
  }

  .swiper-item {
    width: 100%;
    height: calc(100vh - var(--status-bar-height));

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

    .btn {
      bottom: 200px;
      display: inline-block;
      height: 40px;
      line-height: 38px;
      background-color: #ECF5FF;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 20px;
      color: #2B85E4;
      border: 1px solid #2B85E4;

      &:after {
        border: none;
      }
    }
  }
</style>
