<!--
 * @Date: 2024-01-19 21:57:50
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-20 07:01:38
 * @FilePath: /xysBooking/src/views/waiting.vue
 * @Description: 文件描述
-->
<template>
  <div class="waiting-page">
    <div class="waiting-content">
      <div>
        <van-icon name="clock-o" size="2.5rem" color="#A67939" />
      </div>
      <div style="margin: 1rem 0;">支付中...</div>
      <div>{{ current.seconds }} s</div>
      <div style="margin: 1.5rem 0; font-size: 0.85rem; color: #A67939; text-align: center; line-height: 2;">
        温馨提示：支付可能需要10s左右，请耐心等待<br />
      </div>
    </div>
    <div class="go-back-wrapper">
      <div @click="goBackBtn" class="button" style="background-color: #A67939;">返回首页</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCountDown } from '@vant/use';
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { showSuccessToast, showFailToast, showToast } from 'vant';
import { useGo } from '@/hooks/useGo'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const go = useGo();

const countDown = useCountDown({
  time: 10 * 1000,
});

// 开始倒计时
countDown.start();

const current = countDown.current;

onMounted(() => {
  const timer = setInterval(() => {
    if (!current.value.seconds) {
      clearInterval(timer);
    }
    // TODO：轮询支付回调
    if (current.value.seconds === 3) {
      console.warn('支付成功');
      // 预约成功页面
      // go('/success', { pay_id: 'test' });
    }
  }, 1000);
  onUnmounted(() => {
    clearInterval(timer);
  })
});

const goBackBtn = () => {
  go('/');
}
</script>

<style lang="less" scoped>
.waiting-page {
  .waiting-content {
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10vh;
    background-color: #FFF;
    margin: 1rem;
    border-radius: 8px;
    padding: 3rem 0;
    height: 40vh;
  }
  .go-back-wrapper {
    position: fixed;
    bottom: 0;
    height: 5rem;
    width: 100vw;
    display: flex;
    left: 0;
    background-color: #FFF;
    align-items: center;
    justify-content: center;
    box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
    .button {
      color: #FFF;
      padding: 0.85rem 0;
      border-radius: 8px;
      font-size: 1.1rem;
      text-align: center;
      flex-grow: 1;
      margin: 1rem;
    }
  }
}
</style>