<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>
    </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 } from "vue";

// 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 [];
});

</script>

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