<template>
  <div class="border-t-[8px] border-t-[#f5f5f5]">
    <div class="pt-[12px] pl-[12px] pr-[12px]" v-for="(moduleItem, index) in goodsData.commodityEquipment" :key="index">
      <div class="flex flex-col items-start" :class="{
        'border-b border-ink-200': index < goodsData.commodityEquipment.length - 1,
      }">
        <div class="flex items-center flex-row shrink-0">
          <zn-icon :name="moduleItem.icon" size="20" color="#171717"></zn-icon>
          <span class="ml-[4px] text-[12px] text-[#171717] leading-[20px]">
            {{ moduleItem.title }}
          </span>
        </div>
        <div class="flex items-center flex-row mt-[4px] pb-[12px]">
          <span class="text-[12px] text-ink-600 leading-[20px] mr-[4px]" v-for="(span, index) in moduleItem.desc"
            :key="index">
            {{ span }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ZnIcon from "@/components/ZnIcon/index.vue";
import { defineProps } from "vue";

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