<template>
  <div class="bg-white px-[12px]">
    <!-- 标题区域 -->
    <div class="flex items-center mb-[12px]">
      <span
        class="text-[16px] font-semibold text-[#333] leading-[1.4] flex-0-[280px] text-ellipsis overflow-hidden whitespace-nowrap">
        {{ goodsData.commodityName }}
      </span>
      <div class="flex items-center" v-if="goodsData.timeTag">
        <div
          class="text-[9px] text-semibold text-[#f55726] border-[1px] border-[#f55726] rounded-[6px] px-[6px] py-[3px]">
          {{ goodsData.timeTag }}
        </div>
      </div>
    </div>

    <!-- 设施信息区域 -->
    <div class="mt-[12px]" v-if="facilitiesList.length">
      <div class="flex flex-wrap gap-[8px]">
        <div class="flex items-center gap-[4px] p-[8px] bg-[#fafafa] rounded-[6px]"
          v-for="(facility, index) in facilitiesList" :key="index">
          <span class="text-[12px] text-[#333] leading-[1] white-space-nowrap overflow-hidden text-ellipsis">
            {{ facility }}
          </span>
        </div>
      </div>
    </div>
  </div>
</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>
