<template>
  <view class="cardimg" :style="{ backgroundImage: `url(${bg})` }">
    <view class="foot-bottom">
      <view class="foot">
        <view v-for="(item, index) in data" v-show="item.show" :key="index" class="foot-tip">{{ item.label }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onHide, onShow } from '@dcloudio/uni-app'
import { reactive, Ref, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { check_token } from '@/api/index'
import bg from '@/static/loading.jpg'

const { t } = useI18n()
// const store = useCounterStore()

// const page = computed(() => {
//   switch (locale.value) {
//     case 'cn':
//       return page1
//     case 'jp':
//       return page2
//     case 'en':
//       return page3
//     case 'fr':
//       return page4
//     case 'sp':
//       return page5

//     default:
//       return page2
//   }
// })

const data = reactive([
  { label: `${t('indexLoading.label1')}`, show: false },
  { label: `${t('indexLoading.label2')}`, show: false },
  { label: `${t('indexLoading.label3')}`, show: false },
  { label: `${t('indexLoading.label4')}`, show: false },
  { label: `${t('indexLoading.label5')}`, show: false },
  { label: `${t('indexLoading.label6')}`, show: false }
])

onShow(() => {
  checkToken()
  startTimer()
})
onHide(() => {
  clearInterval(timer.value)
})
let islogin = false
const checkToken = async () => {
  const res = await check_token()
  if (res.code === 1) {
    islogin = res.data.login
  }
}

const timer: Ref<any> = ref(null)
const startTimer = () => {
  let index = 0
  timer.value = setInterval(() => {
    if (index >= data.length) {
      clearInterval(timer.value)
      // store.getUserInfo()
      // console.log(uni.getStorageSync('token'))
      if (!islogin) {
        uni.navigateTo({
          url: '/subPackages/login/login'
        })
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }

      return
    }
    refreshData(index++)
  }, 500)
}
const refreshData = (index: any) => {
  data[index].show = true
}
</script>

<style lang="scss" scoped>
.foot-bottom {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: fixed;
  left: 2.0625rem;
  bottom: 0;
}
.foot {
  padding-bottom: 66px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
}
.foot-tip {
  color: #000;
  font-size: 15px;
  margin-top: 11px;
  width: 215px;
}
.cardimg {
  // background-image: url('@/static/image/login/page.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
</style>
