<template>
  <div class="border-top border-[#E5E5E5] border-[8px] px-[12px] pt-[6px] pb-[12px]">
    <ModuleTitle v-if="showTitle" :title="t('goods.package.included')" />
    <div class="flex flex-col items-start " v-for="(item, index) in goodsData.commodityPackageConfig" :key="index">
      <div class="flex items-center justify-start py-[4px] ml-[4px]">
        <span class="whitespace-nowrap flex-auto text-[14px] text-[#171717]">
          {{ item.name }}
        </span>
        <div
          class="flex-1 h-px mx-2 bg-[repeating-linear-gradient(to_right,#CACFD8_0_10px,transparent_10px_16px)] bg-repeat-x bg-center">
        </div>
        <span class="whitespace-nowrap flex-auto text-[14px] text-[#171717]">
          {{ item.count }}{{ item.unit }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import { defineProps } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

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