<template>
  <view class="order-status">
    <view class="status-header">
      <uni-icons
        class="status-icon"
        fontFamily="ZhiNian"
        size="20"
        color="#fff"
      >
        {{ "&#xe600;" }}
      </uni-icons>
      <!-- 订单状态 -->
      <text class="status-text">{{ statusText }}</text>
    </view>
    <view class="status-description">{{ statusDescription }}</view>
  </view>
</template>

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

// 订单状态配置映射
const ORDER_STATUS_CONFIG = {
  0: {
    text: "待支付",
    description: "请尽快完成支付",
  },
  1: {
    text: "待确认",
    description: "商家正在确认您的订单",
  },
  2: {
    text: "待使用",
    description: "预订成功，订单待使用",
  },
  3: {
    text: "已取消",
    description: "订单已取消",
  },
  4: {
    text: "退款中",
    description: "商家退款正在处理中，请耐心等待",
  },
  5: {
    text: "已退款",
    description: "款项预计1-7个工作日退回至原支付账户",
  },
  6: {
    text: "已完成",
    description: "订单已完成，感谢您的使用",
  },
};

const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({
      orderId: "",
      paySerialNumber: "",
      payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
      payAmt: "",
      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
    }),
  },
});

// 当前状态配置
const currentStatusConfig = computed(() => {
  return (
    ORDER_STATUS_CONFIG[props.orderData.orderStatus] || ORDER_STATUS_CONFIG["0"]
  );
});

// 状态文本
const statusText = computed(() => {
  return currentStatusConfig.value.text;
});

// 状态描述
const statusDescription = computed(() => {
  return currentStatusConfig.value.description;
});
</script>

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