<template>
    <div class="spec-collapse">
        <el-collapse  v-model="activeName">
            <el-collapse-item v-for="item in data" :key="item.title" :title="item.title" :name="item.title">
                <el-descriptions :column="1" border>
                    <el-descriptions-item v-for="subItem in item.items" :key="subItem.label" :label="subItem.label">
                        {{ 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 () => ProductionSpecGroup[],
        required: true
    }
})

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