<!--
 * @Date: 2024-01-16 11:37:10
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-24 10:44:23
 * @FilePath: /xysBooking/src/views/bookingList.vue
 * @Description: 文件描述
-->
<template>
  <div class="booking-list-page">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :finished-text="finishedTextStatus ? '没有更多了' : ''"
      @load="onLoad"
    >
      <div @click="() => { go('/bookingDetail', { pay_id: item.pay_id }) }" v-for="(item, index) in bookingList" :key="index" class="booking-list-item">
        <div class="booking-list-item-header">
          <div>{{ item.booking_time }}</div>
          <div :class="[formatStatus(item.status)?.key, 'status']">{{ formatStatus(item.status)?.value }}</div>
        </div>
        <div class="booking-list-item-body">
          <div class="booking-num">
            <div class="num-body">预约人数：<span>{{ item.total_qty }} 人</span></div>
            <div><van-icon name="arrow" /></div>
          </div>
          <div class="booking-price">支付金额：<span>¥ {{ item.total_amt }}</span></div>
          <div class="booking-time">下单时间：<span>{{ item.order_time }}</span></div>
        </div>
      </div>
    </van-list>
    <div v-if="!bookingList.length" class="no-qrcode">
      <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
      <div class="no-qrcode-title">您还没有预约过参观</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGo } from '@/hooks/useGo'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { billListAPI } from '@/api/index'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const go = useGo();

/**
 * 1=待支付（下单就立即支付，所以理论上不存在待支付的数据），
 * 2=支付中（支付前先把状态打成2；支付回调后应立即变更状态，支付中的状态不会持续很久），
 * 3=预约成功（已支付，且一个码都未被使用），
 * 5=已取消（用户手动取消成功，退款成功回调后打成5，否则打成3），
 * 7=已取消（支付超时或失败自动取消），
 * 9=已使用（明细里有一个码被使用），
 * 11=退款中（取消预约时先把状态打成11）
 */
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: '退款中'
      }
  }
}

const page = ref(1); // 页码默认为1
const limit = ref(5); // 每页默认显示5条
const bookingList = ref([]);
const loading = ref(false);
const finished = ref(false);
const finishedTextStatus = ref(false);

const formatDatetime = (data) => { // 格式化日期
  let begin_time = data.begin_time.slice(0, -3);
  let end_time = data.end_time.slice(0, -3);
  let str = begin_time + ' ' + end_time;
  return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
}

onMounted(async () => {
  const { code, data } = await billListAPI({ page: page.value, row_num: limit.value });
  if (code) {
    //
    data.forEach(item => {
      item.booking_time = item && formatDatetime(item);
      item.order_time = item.created_time.slice(0, -3);
    });
    bookingList.value = data;
  }
});

const onLoad = async () => {
  page.value++;
  const { code, data } = await billListAPI({ page: page.value, row_num: limit.value });
  if (code) {
    data.forEach(item => {
      item.booking_time = item && formatDatetime(item);
      item.order_time = item.created_time.slice(0, -3);
    });
    bookingList.value = bookingList.value.concat(data);
    loading.value = false;
    // 数据全部加载完成
    if (!data.length) {
      // 加载状态结束
      finished.value = true;
      if (!bookingList.value.length) {
        finishedTextStatus.value = false;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.booking-list-page {
  padding: 1rem;
  .booking-list-item {
    background-color: #FFF;
    border-radius: 8px;
    margin-bottom: 1rem;
    .booking-list-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      border-bottom: 1px dashed #f0f0f0;
      .status {
        font-size: 0.75rem;
        padding: 5px 8px;
        border-radius: 5px;
      }
      .success {
        color: #A67939;
        background-color: #FBEEDC;
      }
      .cancel {
        color: #929292;
        background-color: #E6E6E6;
      }
      .used {
        color: #477F3D;
        background-color: #E5EFE3;
      }
    }
    .booking-list-item-body {
      padding: 1rem;
      line-height: 1.7;
      .booking-num {
        display: flex;
        justify-content: space-between;
        .num-body {
          color: #959595;
          span {
            color: #1E1E1E;
          }
        }
      }
      .booking-price {
        color: #959595;
        span {
          color: #1E1E1E;
        }
      }
      .booking-time {
        color: #959595;
        span {
          color: #1E1E1E;
        }
      }
    }
  }

  .no-qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
      margin-top: 1rem;
      margin-bottom: 1rem;
      width: 10rem;
    }
    .no-qrcode-title {
      color: #A67939;
      font-size: 1.05rem;
    }
  }
}
</style>