<template>
  <view class="border-box border-top-8">
    <view class="border-box pt-[12px] pl-[12px] pr-[12px]" v-for="(moduleItem, index) in goodsData.commodityEquipment"
      :key="index">
      <view class="flex flex-items-start flex-col" :class="{
        'border-bottom': index < goodsData.commodityEquipment.length - 1,
      }">
        <view class="flex items-center flex-row shrink-0">
          <uni-icons fontFamily="znicons" size="20" color="#171717">
            {{ zniconsMap[moduleItem.icon] }}
          </uni-icons>
          <text class="ml-[4px] text-[12px] text-[#171717] leading-[20px]">
            {{ moduleItem.title }}
          </text>
        </view>
        <view class="border-box flex flex-col flex-items-start mt-[4px] pb-[12px]">
          <text class="text-[12px] text-[#525866] leading-[20px] mb-[4px]" v-for="(text, index) in moduleItem.desc"
            :key="index">
            {{ text }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { zniconsMap } from "@/static/fonts/znicons.js";
import { defineProps } from "vue";

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

<style scoped lang="scss">
@font-face {
  font-family: znicons;
  src: url("@/static/fonts/znicons.ttf");
}
</style>
