<!--
 * @Date: 2024-01-15 18:28:25
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-13 23:20:10
 * @FilePath: /xyxBooking-weapp/src/pages/success/index.vue
 * @Description: 预约成功提示页面
-->
<template>
  <view class="success-page">
    <view style="">
      <view class="text-prompts">
        <image src="https://cdn.ipadbiz.cn/xys/booking/%E6%88%90%E5%8A%9F@2x.png" mode="widthFix" />
        <view class="text">预约成功</view>
      </view>
      <view class="appointment-information">
        <view class="number-of-visitors"
          >参观人数：<text>{{ billInfo?.total_qty }} 人</text></view
        >
        <view class="visit-time"
          >参访时间：<text>{{ billInfo?.datetime }}</text></view
        >
        <view class="payment-amount"
          >支付金额：<text>¥ {{ billInfo?.total_amt }}</text></view
        >
      </view>
      <view class="appointment-notice">
        <view
          style="margin-bottom: 8rpx; display: flex; align-items: center; justify-content: center"
          ><IconFont name="tips" />&nbsp;温馨提示</view
        >
        <view style="font-size: 27rpx">1. 一人一码，或拿身份证，扫码或识别身份证成功后进入</view>
        <view style="font-size: 27rpx">2. 若您无法按时参观，请提前在预约记录中取消您的预约</view>
      </view>
    </view>
    <view class="success-btn">
      <view @tap="goToHome" class="btn-item btn-left">首页</view>
      <view @tap="goToDetail" class="btn-item btn-right">详情</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useDidShow, useRouter as useTaroRouter } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { useGo } from '@/hooks/useGo'
import { billInfoAPI } from '@/api/index'
import { formatDatetime } from '@/utils/tools'
import { refresh_offline_booking_cache } from '@/composables/useOfflineBookingCache'

const router = useTaroRouter()
const go = useGo()

const goToHome = () => {
  go('/index')
}
const goToDetail = () => {
  go('/bookingDetail', { pay_id: router.params.pay_id })
}

const billInfo = ref({})

useDidShow(async () => {
  // 获取订单详情
  const { code, data } = await billInfoAPI({ pay_id: router.params.pay_id })
  if (code) {
    data.datetime = data && formatDatetime(data)
    billInfo.value = data
  }
  // 刷新离线预约缓存
  refresh_offline_booking_cache({ force: true })
})
</script>

<style lang="less">
.success-page {
  position: relative;
  background-color: #fff;
  min-height: 100vh;

  .text-prompts {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35vh;
    flex-direction: column;
    image {
      width: 60vw;
    }
    .text {
      color: #a67939;
      font-size: 40rpx;
      margin-top: 32rpx;
    }
  }
  .appointment-information {
    padding: 64rpx 32rpx;
    border-bottom: 2rpx dashed #a67939;
    line-height: 2;
    .number-of-visitors {
      text {
        color: #a67939;
      }
    }
    .visit-time {
      text {
        color: #a67939;
      }
    }
    .payment-amount {
      text {
        color: #a67939;
      }
    }
  }

  .appointment-notice {
    padding: 32rpx;
    color: #666;
  }

  .success-btn {
    position: fixed;
    bottom: 64rpx;
    width: 750rpx;
    display: flex;
    justify-content: space-around;

    .btn-item {
      width: 40%;
      text-align: center;
      padding: 26rpx 0;
      border-radius: 16rpx;
      font-size: 35rpx;
    }

    .btn-left {
      border: 2rpx solid #a67939;
      color: #a67939;
    }

    .btn-right {
      background-color: #a67939;
      color: #fff;
    }
  }
}
</style>