<template>
  <view class="goods-info mb12">
    <view class="hotel-header">
      <image class="hotel-icon" src="./images/icon_house.png"></image>
      <text class="hotel-name">{{ orderData.commodityAddress }}</text>
    </view>
    <view class="goods-detail">
      <image
        v-if="shouldShowImage"
        class="goods-image"
        :src="commodityCoverPhoto"
        lazy-load
      ></image>
      <view class="goods-description">
        <text class="goods-title">{{ commodityName }}</text>
        <text class="goods-date" v-if="checkInData"
          >预定时间：{{ checkInData }}</text
        >
      </view>
    </view>
    <view class="included-services" v-if="hasServices">
      <text class="services-title">包含服务</text>
      <view
        v-for="item in formattedServiceList"
        :key="item.key"
        class="service-item"
      >
        <text class="service-name"> · {{ item.displayTitle }} </text>
        <text class="service-quantity">
          {{ item.displayAmount }}
        </text>
      </view>
    </view>
  </view>
</template>

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

const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({
      id: "",
      commodityServiceList: [],
      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-餐饮
    }),
  },
});

// 计算属性：商品名称
const commodityName = computed(() => {
  return props.orderData.commodityName || "未知商品";
});

// 计算属性：商品封面图片
const commodityCoverPhoto = computed(() => {
  return props.orderData.commodityCoverPhoto || "";
});

// 计算属性：入住时间
const checkInData = computed(() => props.orderData.checkInData || "");

// 计算属性：服务列表
const serviceList = computed(() => props.orderData.commodityServiceList || []);

// 计算属性：是否有服务
const hasServices = computed(() => serviceList.value.length);

// 计算属性：格式化的服务列表（预处理数据，减少模板中的计算）
const formattedServiceList = computed(() => {
  return serviceList.value.map((item, index) => ({
    ...item,
    key: item.id || item.serviceTitle || `service-${index}`,
    displayTitle: item.serviceTitle || "未知服务",
    displayAmount: formatServiceAmount(item.serviceAmount),
  }));
});

// 计算属性：是否显示商品图片
const shouldShowImage = computed(() => {
  return !!commodityCoverPhoto.value;
});

// 格式化服务数量
const formatServiceAmount = (amount) => {
  if (!amount) return "";
  return typeof amount === "number" ? `×${amount}` : amount;
};
</script>

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