<template>
  <div class="boot g-flex">
    <div class="boot-skip" v-if="state.second > 0">
      <Circle v-model:current-rate="state.currentRate" :rate="state.rate" :speed="100" :stroke-width="60" color="#eee">
        <span>{{ state.second }}</span>
      </Circle>
    </div>
    <div class="boot__wrapper g-flex__body">
      <template v-if="state.isError">
        <span>烧烤失败！</span>
      </template>
      <template v-else>
        <Loading v-if="state.loading">正在烧烤...</Loading>
        <span v-else>烧烤完毕！</span>
      </template>
    </div>
    <div class="boot__footer" v-if="!state.loading">
      <Button type="primary" @click="skip" round block>进入首页</Button>
    </div>
    <div class="boot__footer" v-if="state.isError">
      <Button type="primary" @click="initService" round block>重新烧烤</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Circle, Button, Loading } from 'vant'
import service from '@/services'
import plus from '@/utils/h5plus'

const route = useRoute();
const router = useRouter();

const state = reactive({
  isError: false,
  loading: true,
  second: 10,
  currentRate: 100,
  rate: 100
})

const initService = () => {
  state.isError = false;
  // 模拟等待初始化
  window.setTimeout(() => {
    service.onReady().then(() => state.loading = false).catch(() => state.isError = true)
  }, 1000);
}

// 倒计时
const timer = window.setInterval(() => {
  state.second--;
  state.rate = (100 / 10) * state.second;
  if (state.second <= 0) {
    skip();
  }
}, 1000);

// 跳过广告
const skip = () => {
  clearInterval(timer);
  plus.exitFullSreen();

  const redirect = route.query.redirect;
  if (redirect) {
    router.replace(redirect.toString());
  } else {
    router.replace('/');
  }
}

plus.setFullSreen();
initService();
</script>

<style lang="less" scoped>
@import './index.less';
</style>