<template>
  <view class="goods-info mb12">
    <view class="hotel-header">
      <image class="hotel-icon" :src="orderTypeIcon"></image>
      <text class="hotel-name">{{ orderData.storeName }}</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>
        <!-- 门店地址 -->
        <LocationInfo :orderData="orderData" />
        <!-- 酒店类型 -->
        <template v-if="orderData.orderType === '0'">
          <view class="in-date" v-if="checkInData">
            入住时间：{{ checkInData }}
          </view>
          <view class="out-date" v-if="checkOutData">
            离店时间：{{ checkOutData }}
          </view>
        </template>
      </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";
import LocationInfo from "@/components/LocationInfo/index.vue";
import iconHouse from "./images/icon_house.png";
import iconFood from "./images/food.png";
import iconTicket from "./images/ticket.png";

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

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

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

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

// 计算属性：离店时间
const checkOutData = computed(() => props.orderData.checkOutData || "");

// 计算属性：服务列表
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 orderTypeIcon = computed(() => {
  const orderType = props.orderData.orderType;

  switch (orderType) {
    case "0":
      return iconHouse; // 酒店订单
    case "1":
      return iconTicket; // 门票订单
    case "2":
      return iconFood; // 餐饮订单
    default:
      return iconHouse; // 默认显示酒店图标
  }
});

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

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