<template>
  <div class="spec-collapse">
    <el-collapse v-model="activeName">
      <el-collapse-item
        v-for="item in data"
        :key="item.name"
        :title="item.name"
        :name="item.name"
      >
        <el-descriptions :column="1" border>
          <el-descriptions-item
            v-for="subItem in item.specs"
            :key="subItem.key"
            :label="subItem.key"
          >
            {{ subItem.value }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
  const props = defineProps({
    data: {
      type: Object as () => ProductSpecGroupView[],
      required: true,
    },
  });

  // 默认全部展开
  const activeName = ref<string[]>(
    props.data.map((item: ProductSpecGroupView) => {
      return item.name;
    }) || []
  );
</script>

<style scoped>
  .spec-collapse ::v-deep(.el-collapse-item__header) {
    font-size: 1rem;
    padding: 1rem;
  }
</style>
