<template>
  <view class="mt-16 border-box border-top-8">
    <view
      class="border-box pt-12 pl-12 pr-12"
      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 flex-items-center flex-row flex-shrink-0">
          <uni-icons fontFamily="znicons" size="20" color="#171717">
            {{ zniconsMap[moduleItem.icon] }}
          </uni-icons>
          <text class="font-size-12 color-171717 line-height-20">
            {{ moduleItem.title }}
          </text>
        </view>
        <view class="border-box flex flex-items-center flex-row mt-4 pb-12">
          <text
            class="font-size-12 color-525866 line-height-20 mr-4"
            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>
