<template>
  <view class="border-box border-top-8">
    <view
      v-if="goodsData.commodityPurchaseInstruction"
      class="border-box pl-12 pr-12"
    >
      <ModuleTitle
        v-if="showTitle"
        :title="goodsData.commodityPurchaseInstruction.templateTitle"
      />
      <view
        v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
          .commodityPurchaseInstructionModuleEntityList"
        :key="index"
      >
        <view
          class="flex flex-items-start flex-col pt-12 pb-12"
          :class="{
            'border-bottom':
              index <
              goodsData.commodityPurchaseInstruction
                .commodityPurchaseInstructionModuleEntityList.length -
                1,
          }"
        >
          <view class="flex flex-items-center flex-row flex-shrink-0 mr-8">
            <uni-icons fontFamily="znicons" size="20" color="#333">
              {{ zniconsMap[moduleItem.moduleIcon] }}
            </uni-icons>
            <text class="font-size-14 color-171717 line-height-20">
              {{ moduleItem.moduleTitle }}
            </text>
          </view>
          <text class="flex-full font-size-12 color-525866 line-height-20 mt-4">
            {{ moduleItem.moduleContent }}
          </text>
        </view>
      </view>
    </view>
    <zero-markdown-view
      v-else
      :markdown="goodsData.commodityTip"
      :aiMode="true"
    />
  </view>
</template>

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

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

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