<template>
  <view class="service-order-item">
    <view class="order-header">
      <image class="order-icon" src="./images/icon_order.png"></image>
      <text class="order-title">温泉早鸟票</text>
      <text :class="['order-status', `status-${orderStatus}`]">{{
        orderStatusText
      }}</text>
    </view>
    <view class="order-details">
      <view class="detail-item">
        <text class="detail-label">订单编号：</text>
        <text class="detail-value">{{ orderId }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">游客人数：</text>
        <text class="detail-value">{{ touristCount }}人</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// Sample data
const orderId = ref("7378400483776544");
const touristCount = ref(7);
const orderStatus = ref("pending"); // Options: 'canceled', 'pending', 'refundProcessing', 'refunded', 'completed'

// Computed property for order status text
const orderStatusText = computed(() => {
  switch (orderStatus.value) {
    case "canceled":
      return "已取消";
    case "pending":
      return "待确认";
    case "refundProcessing":
      return "退款中";
    case "refunded":
      return "已退款";
    case "completed":
      return "已完成";
    default:
      return "";
  }
});
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
