<!--
 * @Date: 2024-01-24 16:38:13
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-30 15:19:44
 * @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 :class="[formatStatus(reserve_info.status)?.key, 'status']">{{ formatStatus(reserve_info.status)?.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 class="booking-list-item-footer">
      <!-- 倒计时逻辑省略，如果需要可添加 -->
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { useGo } from '@/hooks/useGo'

const go = useGo();

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

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

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: '退款中'
      }
    default:
        return { key: '', value: '' }
  }
}

const goToDetail = (item) => {
    // 只有成功、已使用、已取消（退款成功）才跳转详情
  if (item.status === CodeStatus.SUCCESS || item.status === CodeStatus.USED || item.status === CodeStatus.CANCEL) {
    go('/bookingDetail', { pay_id: item.pay_id });
  }
}
</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;

        &.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;
        }
    }
  }
}
</style>