<script setup lang="ts">
import { tryOnUnmounted, useCountdown } from '@vueuse/core';
import { useFlowStore } from '@/stores';

const Flow = useFlowStore();
const { flow } = storeToRefs(Flow);

const handle = () => Flow.router.push();
const done = () => Flow.router.done();

const { remaining, start, stop } = useCountdown(5, {
  onComplete: done,
  immediate: false,
});
const countdown = computed(() => remaining.value.toString().padStart(2, '0'));

watchEffect(() => {
  const countdown = flow.value?.done?.countdown;
  if (countdown) start(countdown);
});

tryOnUnmounted(stop);
</script>

<template>
  <div class="page-content flex flex-col">
    <header v-if="flow?.crossing" class="flex flex-col justify-center px-24" style="flex: 1 1 20%">
      <div class="text-3xl text-center">{{ flow.crossing?.title }}</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">{{ flow?.crossing?.description }}</div>
      </div>
    </main>
    <footer class="flex flex-col items-center gap-4" style="flex: 1 1 30%">
      <van-button v-if="flow?.next" class="decorate !text-xl" @click="handle">
        {{ flow?.done?.title ?? '下一步' }}
      </van-button>
      <van-button v-if="flow?.done" class="decorate !text-xl !text-primary-400" @click="done">
        返回首页
        <template v-if="flow.done?.countdown">({{ countdown }}s)</template>
      </van-button>
    </footer>
  </div>
</template>

<style scoped lang="scss"></style>
