<!--
 * @Date: 2024-01-24 16:38:13
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-27 18:07:02
 * @FilePath: /xysBooking/src/components/reserveCard.vue
 * @Description: 预约记录卡组件
-->
<template>
  <div class="booking-list-item" @click="goToDetail(reserve_info)">
    <div class="booking-list-item-header">
      <div>{{ reserve_info.booking_time }}</div>
      <div :class="[formatStatus(reserve_info.status)?.key, 'status']">{{ formatStatus(reserve_info.status)?.value }}</div>
    </div>
    <div class="booking-list-item-body">
      <div class="booking-num">
        <div class="num-body van-ellipsis">预约人数：<span>{{ reserve_info.total_qty }} 人</span>&nbsp;<span>({{ reserve_info.person_name }})</span></div>
        <div v-if="(reserve_info.status === CodeStatus.SUCCESS || reserve_info.status === CodeStatus.USED || reserve_info.status === CodeStatus.CANCEL)">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="booking-price">支付金额：<span>¥ {{ reserve_info.total_amt }}</span></div>
      <div class="booking-time">下单时间：<span>{{ reserve_info.order_time }}</span></div>
    </div>
    <div class="booking-list-item-footer">
      <div v-if="pay_show" class="pay-time">
        <span>支付剩余时间&nbsp;</span>
        <span>{{ formatTime(remain_time) }}</span>
      </div>
      <div v-if="showPayControl">
        <van-button v-if="pay_show" @click="payOrder()" type="primary" color="#A67939" size="small">重新支付</van-button>
        <div v-if="delay_pay_show" class="delay-pay">支付超时，请重新下单！</div>
      </div>
    </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'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const go = useGo();

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});


/**
 * 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'
}

const formatStatus = (status) => {
  switch (status) {
    case CodeStatus.APPLY:
      return {
        key: 'cancel',
        value: '待支付'
      }
    case CodeStatus.PAYING:
      return {
        key: 'success',
        value: '支付中'
      }
    case CodeStatus.SUCCESS:
      return {
        key: 'success',
        value: '预约成功'
      }
    case CodeStatus.CANCEL:
      return {
        key: 'cancel',
        value: '已取消'
      }
    case CodeStatus.CANCELED:
      return {
        key: 'cancel',
        value: '支付超时'
      }
    case CodeStatus.USED:
      return {
        key: 'used',
        value: '已使用'
      }
    case CodeStatus.REFUNDING:
      return {
        key: 'cancel',
        value: '退款中'
      }
  }
}

/**
 * 格式化时间
 * @param {*} seconds
 */
function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600); // 计算小时数
  const minutes = Math.floor((seconds % 3600) / 60); // 计算分钟数
  const remainingSeconds = seconds % 60; // 计算剩余的秒数

  const formattedHours = String(hours).padStart(2, "0"); // 格式化小时数，保证两位数
  const formattedMinutes = String(minutes).padStart(2, "0"); // 格式化分钟数，保证两位数
  const formattedSeconds = String(remainingSeconds).padStart(2, "0"); // 格式化剩余的秒数，保证两位数

  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

let timeId = null;
const remain_time = ref(0); // 剩余时间秒数
const reserve_info = ref({
  pay_id: '',
  booking_time: '',
  status: '',
  total_qty: '',
  total_amt: '',
  order_time: '',
  rest_second: 0,
});

watch(
  () => props.data,
  (val) => {
    if (val) {
      remain_time.value = val.rest_second > 0 ? val.rest_second : 0;
      reserve_info.value.pay_id = val.pay_id;
      reserve_info.value.booking_time = val.booking_time;
      reserve_info.value.rest_second = val.rest_second;
      reserve_info.value.status = val.status;
      reserve_info.value.person_name = val.person_name;
      reserve_info.value.total_qty = val.total_qty;
      reserve_info.value.total_amt = val.total_amt;
      reserve_info.value.order_time = val.order_time;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {
  // 进入页面后，开始倒计时
  timeId = setInterval(() => {
    remain_time.value ? (remain_time.value -= 1) : 0;
  }, 1000);
  onUnmounted(() => {
    timeId && clearInterval(timeId);
  });
});

const goToDetail = (item) => {
  if (item.status === CodeStatus.SUCCESS || item.status === CodeStatus.USED || item.status === CodeStatus.CANCEL) {
    go('/bookingDetail', { pay_id: item.pay_id })
  }
}

// 显示操作按钮
const showPayControl = computed(() => {
  return reserve_info.value.status === CodeStatus.APPLY;
});

// 支付超时显示
const delay_pay_show = computed(() => {
  return showPayControl.value && !remain_time.value;
});

// 控制待支付状态下的显示
const pay_show = computed(() => {
  let flag = false;
  if (showPayControl.value) {
    if (remain_time.value) { // 倒计时进行时
      flag = true;
    } else if (!remain_time.value) { // 倒计时结束
      flag = false;
    }
  }

  return flag;
});

const payOrder = () => {
  const pay_url = `/srv/?f=reserve&a=icbc_pay&pay_id=${reserve_info.value.pay_id}`;
  location.href = pay_url; // 跳转支付页面
}
</script>

<style lang="less" scoped>
  .booking-list-item {
    background-color: #FFF;
    border-radius: 8px;
    margin-bottom: 1rem;
    .booking-list-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      border-bottom: 1px dashed #f0f0f0;
      .status {
        font-size: 0.75rem;
        padding: 5px 8px;
        border-radius: 5px;
      }
      .success {
        color: #A67939;
        background-color: #FBEEDC;
      }
      .cancel {
        color: #929292;
        background-color: #E6E6E6;
      }
      .used {
        color: #477F3D;
        background-color: #E5EFE3;
      }
    }
    .booking-list-item-body {
      padding: 1rem;
      line-height: 1.7;
      .booking-num {
        display: flex;
        justify-content: space-between;
        .num-body {
          color: #959595;
          span {
            color: #1E1E1E;
          }
        }
      }
      .booking-price {
        color: #959595;
        span {
          color: #1E1E1E;
        }
      }
      .booking-time {
        color: #959595;
        span {
          color: #1E1E1E;
        }
      }
    }
    .booking-list-item-footer {
      display: flex;
      justify-content: space-between;
      padding: 0 1rem 1rem 1rem;
      align-items: center;
      .pay-time {
        font-size: 0.85rem;
        color: red;
      }
      .delay-pay {
        font-size: 23rpx;
        color: red;
        font-size: 0.85rem;
      }
    }
  }


</style>