<!--
 * @Date: 2024-01-16 13:19:23
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-30 16:10:10
 * @FilePath: /xysBooking/src/views/bookingDetail.vue
 * @Description: 预约记录详情
-->
<template>
  <div class="booking-detail-page">
    <qrCode :status="qrCodeStatus" type="detail"></qrCode>
    <div v-if="billInfo.pay_id" class="detail-wrapper">
      <div class="detail-item">
        <div>参访时间：</div>
        <div>{{ billInfo?.datetime }}</div>
      </div>
      <div class="detail-item">
        <div>参访人数：</div>
        <div>{{ billInfo?.total_qty }} 人</div>
      </div>
      <div class="detail-item">
        <div>支付金额：</div>
        <div>¥ {{ billInfo?.total_amt }}</div>
      </div>
      <div class="detail-item">
        <div>下单时间：</div>
        <div>{{ billInfo?.order_time }}</div>
      </div>
      <div class="detail-item">
        <div>订单编号：</div>
        <div>{{ billInfo?.pay_id }}</div>
      </div>
      <div class="detail-item">
        <div>订单状态：</div>
        <div>{{ qrCodeStatusText }}</div>
      </div>
    </div>
    <div style="height: 5rem;"></div>
    <div v-if="billInfo.status === CodeStatus.SUCCESS && billInfo.show_cancel_reserve === 1" class="cancel-wrapper">
      <div @click="cancelBooking" class="cancel-btn ">取消预约</div>
    </div>
    <div v-if="loading" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center;background: rgba(0, 0, 0, 0.5);">
      <van-loading size="24px" color="#fff" vertical>取消中...</van-loading>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGo } from '@/hooks/useGo'
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 qrCode from '@/components/qrCode';
import { showConfirmDialog } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
import { billInfoAPI, icbcRefundAPI } from '@/api/index'
import { formatDatetime } from '@/utils/tools';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const go = useGo();

const pay_id = $route.query.pay_id;
const qrCodeStatus = ref('');
const qrCodeStatusText = ref('');
const loading = ref(false);

const cancelBooking = (item) => {
  showConfirmDialog({
    title: '温馨提示',
    message: '是否取消预约？',
    confirmButtonColor: '#A67939',
    width: '80vw'
  })
  .then(async () => {
      loading.value = true;
      // on confirm
      const { code, data } = await icbcRefundAPI({ pay_id });
      if (code) {
        loading.value = false;
        showSuccessToast('取消成功');
        $router.go(-1);
      }
    })
    .catch(() => {
      // on cancel
    });
}

const billInfo = ref({});

/**
 * 1=待支付（下单就立即支付，所以理论上不存在待支付的数据），
 * 2=支付中（支付前先把状态打成2；支付回调后应立即变更状态，支付中的状态不会持续很久），
 * 3=预约成功（已支付，且一个码都未被使用），
 * 5=已取消（用户手动取消成功，退款成功回调后打成5，否则打成3），
 * 7=已取消（支付超时或失败自动取消），
 * 9=已使用（明细里有一个码被使用），
 * 11=退款中（取消预约时先把状态打成11）
 */
const CodeStatus = {
  APPLY: '1',
  PAYING: '2',
  SUCCESS: '3',
  CANCEL: '5',
  CANCELED: '7',
  USED: '9',
  REFUNDING: '11'
}

onMounted(async () => {
  const { code, data } = await billInfoAPI({ pay_id });
  if (code) {
    //
    data.datetime = data && formatDatetime(data);
    data.order_time = data.created_time.slice(0, -3);
    // show_cancel_reserve 显示“取消预约”按钮 1=显示，否则不显示
    billInfo.value = data;
    // 显示二维码状态
    switch (billInfo.value.status) {
      case CodeStatus.SUCCESS:
        qrCodeStatus.value = 'success';
        qrCodeStatusText.value = '预约成功';
        break;
      case CodeStatus.CANCEL:
        qrCodeStatus.value = 'cancel';
        qrCodeStatusText.value = '已取消';
        break;
      case CodeStatus.CANCELED:
        qrCodeStatus.value = 'cancel';
        qrCodeStatusText.value = '已取消';
        break;
      case CodeStatus.USED:
        qrCodeStatus.value = 'used';
        qrCodeStatusText.value = '已使用';
        break;
    }
  }
})
</script>

<style lang="less" scoped>
.booking-detail-page {
  padding: 1rem;
  position: relative;
  .detail-wrapper {
    line-height: 1.7;
    font-size: 1rem;
    .detail-item {
      display: flex;
      justify-content: space-between;
      div:first-child {
        color: #959595;
      }
    }
  }
  .cancel-wrapper {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 5rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: #000;
    .cancel-btn {
      font-size: 1.1rem;
      text-align: center;
      flex-grow: 1;
      background-color: #A67939;
      color: #FFF;
      padding: 0.8rem 0;
      margin: 1rem;
      border-radius: 5px;
    }
  }
}
</style>