<!--
 * @Date: 2024-01-24 16:38:13
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-16 19:54:03
 * @FilePath: /xyxBooking-weapp/src/components/reserveCard.vue
 * @Description: 预约记录卡组件
-->
<template>
  <view class="booking-list-item" @tap="goToDetail(reserve_info)">
    <view class="booking-list-item-header">
      <view>{{ reserve_info.booking_time }}</view>
      <view v-if="is_offline" class="status offline">离线</view>
      <view v-else :class="[status_info.key, 'status']">{{ status_info.value }}</view>
    </view>
    <view class="booking-list-item-body">
      <view class="booking-num">
        <view class="num-body van-ellipsis"
          >预约人数：<text>{{ reserve_info.total_qty }} 人</text>&nbsp;<text
            >({{ reserve_info.person_name }})</text
          ></view
        >
        <view
          v-if="
            reserve_info.status === CodeStatus.SUCCESS ||
            reserve_info.status === CodeStatus.USED ||
            reserve_info.status === CodeStatus.CANCEL
          "
        >
          <IconFont name="rect-right" />
        </view>
      </view>
      <view class="booking-price"
        >支付金额：<text>¥ {{ reserve_info.total_amt }}</text></view
      >
      <view class="booking-time"
        >下单时间：<text>{{ reserve_info.order_time }}</text></view
      >
    </view>
    <view v-if="is_pay_pending" class="booking-list-item-footer" @tap.stop>
      <view v-if="countdown_seconds > 0" class="countdown">剩余支付时间：{{ countdown_text }}</view>
      <view v-else class="countdown timeout">支付已超时</view>
      <view v-if="countdown_seconds > 0" class="repay-btn" @tap.stop="onRepay">重新支付</view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, watch, onUnmounted } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { useGo } from '@/hooks/useGo'
import { wechat_pay } from '@/utils/wechatPay'

const go = useGo()

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  detail_path: {
    type: String,
    default: '/bookingDetail'
  },
  is_offline: {
    type: Boolean,
    default: false
  }
})

const reserve_info = computed(() => props.data)

const is_offline = computed(() => props.is_offline)

/**
 * @description 预约码状态枚举（与后端约定）
 * - 1=待支付；2=支付中；3=预约成功；5/7=已取消；9=已使用；11=退款中
 * @readonly
 */
const CodeStatus = {
  APPLY: '1',
  PAYING: '2',
  SUCCESS: '3',
  CANCEL: '5',
  CANCELED: '7',
  USED: '9',
  REFUNDING: '11'
}

/**
 * @description 是否支付待处理状态
 */

const is_pay_pending = computed(() => {
  if (is_offline.value) {
    return false
  }
  return reserve_info.value?.status === CodeStatus.APPLY && !!reserve_info.value?.pay_id
})

const countdown_seconds = ref(0)

/**
 * @description 将数字格式化为两位字符串（不足补 0）
 * @param {number|string} n 数字
 * @returns {string} 两位字符串
 */
const format_two_digits = n => {
  const num = Number(n) || 0
  return num < 10 ? `0${num}` : String(num)
}

const countdown_text = computed(() => {
  const seconds = Number(countdown_seconds.value) || 0
  const minutes = Math.floor(seconds / 60)
  const remain = seconds % 60
  return `${format_two_digits(minutes)}:${format_two_digits(remain)}`
})

/**
 * @description 解析 created_time 为毫秒时间戳（兼容 iOS Date 解析）
 * @param {string} created_time 创建时间字符串
 * @returns {number} 毫秒时间戳；解析失败返回 0
 */
const parse_created_time_ms = created_time => {
  const raw = String(created_time || '')
  if (!raw) {
    return 0
  }
  const fixed = raw.replace(/-/g, '/')
  const date = new Date(fixed)
  const time = date.getTime()
  return Number.isFinite(time) ? time : 0
}

let countdown_timer = null
/**
 * @description 停止倒计时（清理定时器）
 * @returns {void} 无返回值
 */

const stop_countdown = () => {
  if (countdown_timer) {
    clearInterval(countdown_timer)
    countdown_timer = null
  }
}

/**
 * @description 更新倒计时剩余秒数（默认 10 分钟支付窗口）
 * @returns {void} 无返回值
 */
const update_countdown = () => {
  const start_ms = parse_created_time_ms(reserve_info.value?.created_time)
  if (!start_ms) {
    countdown_seconds.value = 0
    stop_countdown()
    return
  }

  const end_ms = start_ms + 10 * 60 * 1000
  const diff_ms = end_ms - Date.now()
  const seconds = Math.max(0, Math.floor(diff_ms / 1000))
  countdown_seconds.value = seconds

  if (seconds <= 0) {
    stop_countdown()
  }
}

/**
 * @description 启动倒计时（每秒更新）
 * @returns {void} 无返回值
 */
const start_countdown = () => {
  stop_countdown()
  update_countdown()
  if (countdown_seconds.value <= 0) {
    return
  }
  countdown_timer = setInterval(update_countdown, 1000)
}

let is_showing_pay_modal = false
/**
 * @description 支付失败提示弹窗（防并发）
 * @param {string} content 弹窗内容
 * @returns {Promise<boolean>} true=继续支付，false=取消
 */
const show_pay_modal = async content => {
  if (is_showing_pay_modal) {
    return false
  }
  is_showing_pay_modal = true
  try {
    const res = await Taro.showModal({
      title: '提示',
      content: content || '支付未完成',
      showCancel: true,
      cancelText: '取消',
      confirmText: '继续支付'
    })
    return !!res?.confirm
  } finally {
    is_showing_pay_modal = false
  }
}

/**
 * @description 重新支付（循环支付直到成功或用户取消）
 * @returns {Promise<void>} 无返回值
 */

const onRepay = async () => {
  if (!is_pay_pending.value) {
    return
  }
  if (countdown_seconds.value <= 0) {
    Taro.showToast({ title: '支付已超时', icon: 'none' })
    return
  }

  let should_continue = true
  while (should_continue) {
    const pay_id = reserve_info.value?.pay_id
    const pay_res = await wechat_pay({ pay_id })
    if (pay_res && pay_res.code == 1) {
      go('/success', { pay_id })
      return
    }
    should_continue = await show_pay_modal(pay_res?.msg || '支付未完成')
  }
}

/**
 * @description 订单状态展示映射
 * @param {string} status 订单状态码
 * @returns {{key:string,value:string}} 展示状态（key 用于 class）
 */
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: '退款中'
      }
    default:
      return { key: '', value: '' }
  }
}

const status_info = computed(() => {
  return formatStatus(reserve_info.value?.status) || { key: '', value: '' }
})

/**
 * @description 跳转预约详情
 * - 只有成功/已使用/已取消才允许进入详情
 * @param {Object} item 预约记录
 * @returns {void} 无返回值
 */
const goToDetail = item => {
  // 只有成功、已使用、已取消（退款成功）才跳转详情
  if (
    item.status === CodeStatus.SUCCESS ||
    item.status === CodeStatus.USED ||
    item.status === CodeStatus.CANCEL
  ) {
    go(props.detail_path, { pay_id: item.pay_id })
  }
}

/**
 * @description 监听支付待处理状态变化
 * - 进入待支付：启动倒计时
 * - 退出待支付：清空倒计时
 */

watch(
  is_pay_pending,
  val => {
    if (val) {
      start_countdown()
    } else {
      countdown_seconds.value = 0
      stop_countdown()
    }
  },
  { immediate: true }
)

onUnmounted(() => {
  stop_countdown()
})
</script>

<style lang="less">
.booking-list-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 0 30rpx 0 rgba(106, 106, 106, 0.1);

  .booking-list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16rpx;
    border-bottom: 2rpx dashed #e6e6e6;
    margin-bottom: 16rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;

    .status {
      font-size: 27rpx;
      font-weight: normal;
      padding: 4rpx 12rpx;
      border-radius: 8rpx;

      &.offline {
        color: #999;
        background-color: #eee;
      }

      &.success {
        color: #a67939;
        background-color: #fbeedc;
      }
      &.cancel {
        color: #999;
        background-color: #eee;
      }
      &.used {
        color: #477f3d;
        background-color: #e5efe3;
      }
    }
  }

  .booking-list-item-body {
    .booking-num {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      color: #666;

      .num-body {
        span,
        text {
          color: #a67939;
          font-weight: bold;
        }
      }
    }
    .booking-price,
    .booking-time {
      color: #999;
      font-size: 29rpx;
      margin-bottom: 10rpx;
      text {
        color: #333;
      }
    }
  }

  .booking-list-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16rpx;

    .countdown {
      color: #a67939;
      font-size: 28rpx;

      &.timeout {
        color: #999;
      }
    }

    .repay-btn {
      padding: 8rpx 20rpx;
      border-radius: 12rpx;
      background-color: #a67939;
      color: #fff;
      font-size: 28rpx;
    }
  }
}
</style>