<template>
  <view>
    <view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
      <ModuleTitle
        v-if="showTitle"
        :title="goodsData.commodityPurchaseInstruction.templateTitle"
      />
      <view
        class="use-notice-content"
        v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
          .commodityPurchaseInstructionModuleEntityList"
        :key="index"
      >
        <view
          class="module-item"
          :class="{
            'border-bottom':
              index <
              goodsData.commodityPurchaseInstruction
                .commodityPurchaseInstructionModuleEntityList.length -
                1,
          }"
        >
          <view class="module-icon">
            <uni-icons fontFamily="znicons" size="20" color="#333">{{
              zniconsMap[moduleItem.moduleIcon]
            }}</uni-icons>
            <text class="module-title">{{ moduleItem.moduleTitle }}</text>
          </view>
          <text class="module-desc">{{ 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">
@use './styles/index.scss';
</style>
