<!--
 * @Date: 2024-01-16 13:19:23
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-30 16:10:10
 * @FilePath: /xyxBooking-weapp/src/pages/bookingDetail/index.vue
 * @Description: 预约记录详情
-->
<template>
  <view class="booking-detail-page">
    <qrCode :status="qrCodeStatus" type="detail" :payId="pay_id"></qrCode>
    <view v-if="billInfo.pay_id" class="detail-wrapper">
      <view class="detail-item">
        <view>参访时间：</view>
        <view>{{ billInfo?.datetime }}</view>
      </view>
      <view class="detail-item">
        <view>参访人数：</view>
        <view>{{ billInfo?.total_qty }} 人</view>
      </view>
      <view class="detail-item">
        <view>支付金额：</view>
        <view>¥ {{ billInfo?.total_amt }}</view>
      </view>
      <view class="detail-item">
        <view>下单时间：</view>
        <view>{{ billInfo?.order_time }}</view>
      </view>
      <view class="detail-item">
        <view>订单编号：</view>
        <view>{{ billInfo?.pay_id }}</view>
      </view>
      <view class="detail-item">
        <view>订单状态：</view>
        <view>{{ qrCodeStatusText }}</view>
      </view>
    </view>
    <view style="height: 160rpx;"></view>
    <view v-if="billInfo.status === CodeStatus.SUCCESS && billInfo.show_cancel_reserve === 1" class="cancel-wrapper">
      <view @tap="cancelBooking" class="cancel-btn ">取消预约</view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import Taro, { useDidShow, useRouter as useTaroRouter } from '@tarojs/taro'
import { useGo } from '@/hooks/useGo'
import qrCode from '@/components/qrCode';
import { billInfoAPI, icbcRefundAPI } from '@/api/index'
import { formatDatetime } from '@/utils/tools';

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

const pay_id = ref('');
const qrCodeStatus = ref('');
const billInfo = ref({});

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

const qrCodeStatusText = computed(() => {
    const status = billInfo.value?.status;
    switch (status) {
        case CodeStatus.SUCCESS: return '预约成功';
        case CodeStatus.CANCEL: return '已取消';
        case CodeStatus.USED: return '已使用';
        case CodeStatus.REFUNDING: return '退款中';
        default: return '未知状态';
    }
})

const cancelBooking = async () => {
    const { confirm } = await Taro.showModal({
        title: '温馨提示',
        content: '是否取消预约？',
        confirmColor: '#A67939'
    });

    if (confirm) {
        Taro.showLoading({ title: '取消中...' });
        const { code, data } = await icbcRefundAPI({ pay_id: pay_id.value });
        Taro.hideLoading();
        if (code) {
            Taro.showToast({ title: '取消成功' });
            Taro.navigateBack();
        } else {
            Taro.showToast({ title: '取消失败', icon: 'none' });
        }
    }
}

useDidShow(async () => {
    pay_id.value = router.params.pay_id;
    if (pay_id.value) {
        const { code, data } = await billInfoAPI({ pay_id: pay_id.value });
        if (code) {
            data.datetime = data && formatDatetime(data);
            data.order_time = data.created_time ? data.created_time.slice(0, -3) : '';
            billInfo.value = data;
        }
    }
})
</script>

<style lang="less">
.booking-detail-page {
    min-height: 100vh;
    background-color: #F6F6F6;
    padding: 32rpx;

    .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;
            }
        }
    }

    .cancel-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        background-color: #FFF;
        padding: 32rpx;
        box-sizing: border-box;

        .cancel-btn {
            background-color: #FFF;
            color: #A67939;
            border: 2rpx solid #A67939;
            text-align: center;
            padding: 26rpx 0;
            border-radius: 16rpx;
            font-size: 35rpx;
        }
    }
}
</style>