<template>
  <view class="offline-booking-detail-page">
    <view class="header-tip">
      <IconFont name="tips" size="15" color="#A67939" />&nbsp;
      <text>您当前处于离线模式，仅展示本地缓存的数据</text>
    </view>

    <view class="content">
      <offlineQrCode :list="qr_list" />

      <view v-if="bill_info && bill_info.pay_id" class="detail-wrapper">
        <view class="detail-item">
          <view>参访时间：</view>
          <view>{{ bill_info.datetime }}</view>
        </view>
        <view class="detail-item">
          <view>参访人数：</view>
          <view>{{ bill_info.total_qty }} 人</view>
        </view>
        <view class="detail-item">
          <view>支付金额：</view>
          <view>¥ {{ bill_info.total_amt }}</view>
        </view>
        <view class="detail-item">
          <view>下单时间：</view>
          <view>{{ bill_info.order_time }}</view>
        </view>
        <view class="detail-item">
          <view>订单编号：</view>
          <view>{{ bill_info.pay_id }}</view>
        </view>
        <!-- <view class="detail-item">
                    <view>订单状态：</view>
                    <view>{{ status_text }}</view>
                </view> -->
      </view>
    </view>

    <view class="action-area">
      <button class="back-btn" @tap="toList">返回列表</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import Taro, { useDidShow, useRouter as useTaroRouter } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import offlineQrCode from '@/components/offlineQrCode.vue'
import {
  get_offline_booking_by_pay_id,
  build_offline_qr_list
} from '@/composables/useOfflineBookingCache'

const router = useTaroRouter()
const bill_info = ref(null)
const qr_list = ref([])

// const CodeStatus = {
//     APPLY: '1',
//     PAYING: '2',
//     SUCCESS: '3',
//     CANCEL: '5',
//     CANCELED: '7',
//     USED: '9',
//     REFUNDING: '11'
// }

// const status_text = computed(() => {
//     const status = bill_info.value?.status
//     switch (status) {
//         case CodeStatus.APPLY: return '待支付'
//         case CodeStatus.PAYING: return '支付中'
//         case CodeStatus.SUCCESS: return '预约成功'
//         case CodeStatus.CANCEL: return '已取消'
//         case CodeStatus.CANCELED: return '已取消'
//         case CodeStatus.USED: return '已使用'
//         case CodeStatus.REFUNDING: return '退款中'
//         default: return '未知状态'
//     }
// })

const toList = () => {
  Taro.navigateBack({
    fail: () => {
      Taro.reLaunch({ url: '/pages/offlineBookingList/index' })
    }
  })
}

const load_cache = () => {
  const pay_id = router.params.pay_id
  const data = get_offline_booking_by_pay_id(pay_id)
  if (!data) {
    Taro.showToast({ title: '本地无该订单缓存', icon: 'none' })
    Taro.reLaunch({ url: '/pages/offlineBookingList/index' })
    return
  }
  bill_info.value = data
  qr_list.value = build_offline_qr_list(data)
}

useDidShow(() => {
  load_cache()
})
</script>

<style lang="less">
.offline-booking-detail-page {
  min-height: 100vh;
  background-color: #f6f6f6;

  .header-tip {
    display: flex;
    align-items: center;
    padding: 20rpx 32rpx;
    color: #a67939;
    font-size: 26rpx;
    background: #fff;
  }

  .content {
    padding: 32rpx;
    padding-bottom: 180rpx;
  }

  .detail-wrapper {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-top: 32rpx;
    box-shadow: 0 0 29rpx 0 rgba(106, 106, 106, 0.1);

    .detail-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 26rpx;
      color: #333;
      font-size: 30rpx;

      &:last-child {
        margin-bottom: 0;
      }

      view:first-child {
        color: #999;
        width: 160rpx;
      }
      view:last-child {
        flex: 1;
        text-align: right;
      }
    }
  }

  .action-area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    padding: 24rpx 32rpx;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 -10rpx 8rpx 0 rgba(0, 0, 0, 0.06);

    .back-btn {
      background-color: #a67939;
      color: #fff;
      border-radius: 16rpx;
      font-size: 32rpx;
      padding: 12rpx 0;
    }
  }
}
</style>