<!--
 * @Date: 2024-01-26 10:24:45
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-30 15:20:16
 * @FilePath: /xysBooking/src/views/callback.vue
 * @Description: 反馈页面
-->
<template>
  <div class="callback-page">
    <div style="">
      <div v-if="pay_status === PAY_STATUS.FAIL" class="text-prompts">
        <img src="https://cdn.ipadbiz.cn/xys/booking/shibai.png">
        <div class="text">支付失败</div>
      </div>
      <div v-else class="text-prompts">
        <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%88%90%E5%8A%9F@2x.png">
        <!-- <div class="text">支付完成</div> -->
      </div>
      <div class="appointment-information">
        <div class="number-of-visitors">参观人数：<span>{{ billInfo?.total_qty }} 人</span></div>
        <div class="visit-time">参访时间：<span>{{ billInfo?.datetime }}</span></div>
        <div class="payment-amount">支付金额：<span>¥ {{ billInfo?.total_amt }}</span></div>
      </div>
      <div style="padding: 0.5rem; display: flex; justify-content: center; margin-top: 1rem;">
        <van-button color="#A67939" size="small" @click="returnMerchant()">返回商户</van-button>
      </div>
      <!-- <div class="appointment-notice">
        <p style="margin-bottom: 0.25rem;"><van-icon name="info-o" />&nbsp;温馨提示</p>
        <p style="font-size: 0.85rem;">1. 一人一码，或拿身份证，扫码或识别身份证成功后进入</p>
        <p style="font-size: 0.85rem;">2. 若您无法按时参观，请提前在预约记录中取消您的预约</p>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { onAuthBillInfoAPI } from '@/api/index'
import { useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { formatDatetime } from '@/utils/tools';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const billInfo = ref({});
const PAY_STATUS = {
  SUCCESS: '0',
  FAIL: '1',
  UNKNOWN: '2',
}
const pay_status = ref('0'); // 默认支付完成

/**
 * 获取 URL 查询参数
 * @param {string} name 参数名
 * @returns {string|null} 参数值
 */
function getQueryString(name) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == name) {
          return pair[1];
      }
  }
  return null;
}


// const out_trade_no = getQueryString('out_trade_no');
// const out_trade_no = '110286610147000542401290012506';
const out_trade_no = $route.query.out_trade_no;

/**
 * 支付回跳处理
 * - 读取订单信息并渲染
 * - 通知上层支付 iframe：页面已准备完成（自定义协议）
 * @returns {Promise<void>}
 */
const callback = async () => {
  // 获取订单详情
  const { code:code_pay, data:data_pay } = await onAuthBillInfoAPI({ order_id: out_trade_no });
  if (code_pay) {
    //
    data_pay.datetime = data_pay && formatDatetime(data_pay);
    billInfo.value = data_pay;

    var mchData = { action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE', height: 404 };
    let postData = JSON.stringify(mchData);
    top.postMessage(postData, '*');
  }
}

/**
 * 通知支付 iframe 跳出回到商户页面（自定义协议）
 * @returns {void}
 */
const returnMerchant = () => {
  var mchData = {
    action: 'jumpOut',
    jumpOutUrl: window.location.origin + window.location.pathname   //跳转的页面
  }
  console.log('调用成功',mchData);
  var postData = JSON.stringify(mchData)
  top.postMessage(postData, "*")
}
// 页面加载后立即拉取订单信息（支付回跳场景）
callback();

onMounted(async () => {
})
</script>

<style lang="less" scoped>
.callback-page {
  position: relative;
  background-color: #FFF;
  height: 600px;
  border-bottom: 1px dashed #A67939;
  .text-prompts {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    flex-direction: column;
    padding-top: 1rem;
    img {
      width: 30vw;
    }
    .text {
      color: #A67939;
      font-size: 1.25rem;
      margin-top: 1rem;
    }
  }
  .appointment-information {
    padding: 1rem;
    line-height: 2;
    padding-bottom: 0;
    .number-of-visitors {
      span {
        color: #A67939;
      }
    }
    .visit-time {
      span {
        color: #A67939;
      }
    }
    .payment-amount {
      span {
        color: #FF1919;
      }
    }
  }
  .appointment-notice {
    color: #A67939;
    padding: 1rem;
    line-height: 2;
  }
}
</style>