<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">
@font-face {
  font-family: znicons;
  src: url("@/static/fonts/znicons.ttf");
}

// 使用须知样式
.use-notice {
  margin: 16px 0;
}

.use-notice-content {
  .module-item {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 0;

    .module-icon {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 8px;
      flex-shrink: 0;

      .module-title {
        font-size: 14px;
        color: #333;
        text-align: center;
        word-wrap: break-word;
        margin-left: 4px;
      }
    }

    .module-desc {
      flex: 1;
      font-size: 12px;
      color: #666;
      line-height: 1.5;
      margin-top: 4px;
    }
  }
  .border-bottom {
    border-bottom: 1px solid #f0f0f0;
  }
}
</style>
