<!--
 * @Date: 2024-01-19 21:57:50
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-30 15:22:54
 * @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;">
        温馨提示：{{ pay_msg }}<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'
import { billPayStatusAPI } from '@/api/index'
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;
const pay_id = $route.query.pay_id;
const pay_msg = ref('支付可能需要10s左右，请耐心等待');


/**
 * 3=支付成功，1=待支付，2=支付中，7=支付失败
 */
const PAY_STATUS = {
  PAY: '1',
  PAYING: '2',
  FAIL: '7',
  SUCCESS: '3'
}

onMounted(() => {
  // 重置历史记录
  window.history.pushState(null, '', location.origin + location.pathname); // 将授权页面替换为根路径或其他合适的路径
  //
  const timer = setInterval(async () => {
    if (!current.value.seconds) {
      clearInterval(timer);
    }
    const { code, data } = await billPayStatusAPI({ pay_id });
    // TAG：轮询支付回调
    switch (data.status) {
      case PAY_STATUS.PAY:
        pay_msg.value = '订单待支付';
        break;
      case PAY_STATUS.PAYING:
        pay_msg.value = '订单支付中';
        break;
      case PAY_STATUS.SUCCESS:
        // 预约成功页面
        go('/success', { pay_id });
        break;
      case PAY_STATUS.FAIL:
        pay_msg.value = '订单支付失败';
        break;
    }
  }, 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>