<route lang="json">
{
  "layout": false,
  "style": {
    "navigationStyle": "custom"
  }
}
</route>

<template>
  <view class="splash-container">
    <template v-if="isInstall">
      <view class="splash-mask">
        <image src="@/static/images/mac-app.png" class="splash-logo" />
        <view class="text">
          <view>发现好用的</view>
          <view class="vue">VUE</view>
          <view>生态资源</view>
        </view>
      </view>
    </template>
    <nut-swiper v-else height="100vh" :loop="false" :autoplay="0" @change="onTapSwiper">
      <nut-swiper-item v-for="item in list" :key="item">
        <image :src="item" mode="aspectFit" class="h-100vh w-full" />
      </nut-swiper-item>
    </nut-swiper>
  </view>
</template>

<script setup lang="ts">
  import guide1 from '@/static/images/guide1.png'
  import guide2 from '@/static/images/guide2.png'
  import guide3 from '@/static/images/guide3.png'
  import { useUserStore } from '@/stores/modules/userStore'

  defineOptions({ name: 'Splash' })

  const userStore = useUserStore()
  const isInstall = computed(() => userStore.isInstall)
  const list = ref([guide1, guide2, guide3])

  const onTapSwiper = (index: number) => {
    if (index === 2) {
      userStore
        .getUserInfoAction()
        .then((res) => {
          if (isInstall.value) {
            if (res) {
              uni.reLaunch({
                url: '/pages/index/index',
              })
            } else {
              uni.reLaunch({
                url: '/pages-sub/login/index',
              })
            }
          }
        })
        .catch(() => {
          uni.reLaunch({
            url: '/pages-sub/login/index',
          })
        })
    }
  }

  onMounted(() => {
    if (isInstall.value) {
      if (userStore.token) {
        uni.reLaunch({
          url: '/pages/index/index',
        })
      } else {
        uni.reLaunch({
          url: '/pages-sub/login/index',
        })
      }
    }
  })
</script>

<style scoped lang="scss">
  .splash-container {
    @apply h-full;
    :deep(.wd-swiper) {
      @apply h-full;
    }
    .splash-mask {
      @apply flex flex-col items-center text-center;
      .text {
        @apply color-text-1 text-24px mt-20px flex items-center text-center;
        letter-spacing: 10px;
        writing-mode: vertical-rl;
        .vue {
          @apply text-28px font-600 bg-bg-primary;
          letter-spacing: 0px;
          background: linear-gradient(315deg, #42d392 25%, #647eff);
          background-clip: text;
          writing-mode: horizontal-tb;
          -webkit-text-fill-color: transparent;
        }
      }
    }
    :deep(.wd-swiper__track) {
      @apply rounded-0px;
    }
  }
</style>
