<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>
        <!-- 门店地址 -->
        <view class="store-address" @click="openMap">
          <uni-icons type="location" size="18" color="#999" />
          <text>{{ orderData.commodityAddress }}</text>
          <uni-icons type="right" size="14" color="#999" />
        </view>
        <!-- 酒店类型 -->
        <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 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;
};

// 打开地图
const openMap = () => {
  const address = props.orderData.commodityAddress;
  const latitude = Number(props.orderData.commodityLatitude);
  const longitude = Number(props.orderData.commodityLongitude);

  uni.getLocation({
    type: "gcj02", //返回可以用于uni.openLocation的经纬度
    success: (res) => {
      console.log("当前经纬度", latitude, longitude);

      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        address: address,
        success: () => {
          console.log("success");
        },
      });
    },
  });
};
</script>

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