<script setup lang="ts">
import { processMethod } from '@/request/api';
import { useRequest }    from 'alova/client';
import { useRouter }     from 'vue-router';


defineOptions({
  name: 'CameraResult',
});

const router = useRouter();

const { data, loading } = useRequest(processMethod).onSuccess(() => {init(); });
const tips = computed(() => data.value === '/screen' ? '返回首页' : '下一步');
const countdown = ref(5);

let timer: ReturnType<typeof setInterval>;

function done() {
  clearInterval(timer);
  router.replace({ path: data.value });
}

function init() {
  timer = setInterval(() => {
    const _countdown = countdown.value - 1;
    if ( _countdown <= 0 ) { done(); } else { countdown.value = _countdown; }
  }, 1000);
}

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>
<template>
  <div>
    <div class="page-content flex flex-col">
      <header class="flex flex-col justify-center px-24" style="flex: 1 1 20%">
        <div class="text-3xl text-center">拍摄完成</div>
      </header>
      <main class="flex flex-col justify-evenly px-24" style="flex: 1 1 50%">
        <img class="size-40 mx-auto" src="@/assets/images/tips.png">
        <div>
          <div class="text-3xl text-center">恭喜您！</div>
          <div class="text-3xl text-center my-8">完成舌面象的采集</div>
        </div>
      </main>
      <footer class="flex justify-evenly items-start" style="flex: 1 1 30%">
        <van-button class="decorate !text-xl !text-primary-400" :loading @click="done()">
          {{ tips }}({{ countdown }})
        </van-button>
      </footer>
    </div>
  </div>
</template>
<style scoped lang="scss">
</style>
