<!--
 * @Date: 2024-01-16 11:37:10
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-16 16:02:56
 * @FilePath: /xysBooking/src/views/bookingList.vue
 * @Description: 文件描述
-->
<template>
  <div class="booking-list-page">
    <div @click="() => { go('/bookingDetail', { id: 'test' }) }" 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.num }} 人</span></div>
          <div><van-icon name="arrow" /></div>
        </div>
        <div class="booking-price">支付金额：<span>¥ {{ item.price }}</span></div>
        <div class="booking-time">下单时间：<span>{{ item.order_time }}</span></div>
      </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'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const go = useGo();

const bookingList = ref([{
  id: '1',
  booking_time: '2024-01-10 05:00-08:00',
  status: 'success',
  num: '2',
  price: '50',
  order_time: '2024-01-09 13:09',
}, {
  id: '2',
  booking_time: '2024-01-11 05:00-08:00',
  status: 'cancel',
  num: '2',
  price: '350',
  order_time: '2024-01-09 13:09',
}, {
  id: '3',
  booking_time: '2024-01-12 05:00-08:00',
  status: 'used',
  num: '2',
  price: '150',
  order_time: '2024-01-09 13:09',
}]);

const formatStatus = (status) => {
  switch (status) {
    case 'success':
      return {
        key: 'success',
        value: '预约成功'
      }
    case 'cancel':
      return {
        key: 'cancel',
        value: '已取消'
      }
    case 'used':
      return {
        key: 'used',
        value: '已使用'
      }
  }
}
</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;
        }
      }
    }
  }
}
</style>