<template>
  <view class="good-info">
    <!-- 标题区域 -->
    <view class="title-section">
      <text class="title">
        {{ goodsData.commodityName || "【成人票】云从朵花温泉门票" }}
      </text>
      <view class="tag-wrapper" v-if="goodsData.timeTag">
        <view class="time-tag">{{ goodsData.timeTag || "随时可退" }}</view>
      </view>
      <!-- 日历ICON，酒店订单显示 -->
      <uni-icons
        class="calender-icon"
        v-if="isShowCalendar"
        type="calendar"
        size="24"
        color="#00A6FF"
        @click="showCalendar"
      />
    </view>

    <!-- 地址区域 -->
    <view class="address-section">
      <LocationInfo :orderData="goodsData" />
    </view>

    <!-- 设施信息区域 -->
    <view class="facilities-section">
      <view class="facilities-grid">
        <view
          class="facility-item"
          v-for="(facility, index) in facilitiesList"
          :key="index"
        >
          <text class="facility-text">{{ facility }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, defineProps, defineEmits } from "vue";
import LocationInfo from "@/components/LocationInfo/index.vue";

// 事件定义
const emits = defineEmits(["showCalendar"]);

// Props定义
const props = defineProps({
  goodsData: {
    type: Object,
    default: () => ({}),
  },
});

// 设施列表 - 使用computed优化性能
const facilitiesList = computed(() => {
  if (
    props.goodsData.commodityFacilityList &&
    props.goodsData.commodityFacilityList.length
  ) {
    return props.goodsData.commodityFacilityList;
  }

  return [];
});

// 日历弹窗
const showCalendar = () => emits("showCalendar");

// 是否显示日历按钮
const isShowCalendar = computed(() => {
  return props.goodsData.commodityTypeCode === "0";
});
</script>

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