<template>
  <view class="order-info">
    <view class="order-item">
      <text class="label">订单号</text>
      <text class="value">{{ orderData.orderId }}</text>
    </view>
    <view class="order-item">
      <text class="label">流水号</text>
      <text class="value">{{ orderData.paySerialNumber }}</text>
    </view>
    <view class="order-item">
      <text class="label">支付方式</text>
      <text class="value">{{ payWayText }}</text>
    </view>
    <!-- 在已退款状态显示 -->
    <view class="order-item">
      <text class="label">退款单号</text>
      <text class="value">{{ payWayText }}</text>
    </view>
    <view class="line"></view>
    <view class="order-item amount">
      <text class="label">实际支付金额</text>
      <text class="value">{{ formattedAmount }}</text>
    </view>
    <!-- 根据订单状态动态显示按钮 -->
    <button v-if="shouldShowButton" :class="buttonClass">
      {{ buttonText }}
    </button>
    <text class="feedback">投诉反馈</text>
  </view>
</template>

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

// 支付方式映射常量
const PAY_WAY_MAP = {
  0: "微信",
  1: "支付宝",
  2: "云闪付",
};

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 payWayText = computed(() => {
  return PAY_WAY_MAP[props.orderData.payWay] || "未知支付方式";
});

// 格式化金额显示
const formattedAmount = computed(() => {
  const amount = props.orderData.payAmt;
  return amount ? `${parseFloat(amount).toFixed(2)}` : "0.00";
});

// 按钮文案逻辑
const buttonText = computed(() => {
  const status = props.orderData.orderStatus;
  switch (status) {
    case "0": // 待支付状态
      return "立即支付";
    case "2": // 待使用状态
      return "申请退款";
    default: // 其他状态
      return "再次预定";
  }
});

// 是否显示按钮（退款中状态不显示）
const shouldShowButton = computed(() => {
  return props.orderData.orderStatus !== "4"; // 4-退款中
});

// 按钮样式类逻辑
const buttonClass = computed(() => {
  const status = props.orderData.orderStatus;
  const baseClass = "reserve-button";

  // 申请退款状态（待使用状态）保持原样式，其他状态添加pre-btn类
  if (status === "2") {
    return baseClass; // 申请退款状态，背景色不变
  } else {
    return `${baseClass} pre-btn`; // 其他状态，添加pre-btn样式
  }
});
</script>

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