<template>
    <div class="spec-collapse">
        <el-collapse v-for="(value, key) in data" :key="key" v-model="activeName">
            <el-collapse-item :title="key" :name="key">
                <el-descriptions :column="1" border>
                    <el-descriptions-item v-for="(subValue, subKey) in value" :key="subKey" :label="String(subKey)">
                        <div v-if="isPrimitive(subValue)">
                            {{ subValue }}
                        </div>
                        <div v-else>
                            <ul>
                                <li v-for="(item, index) in subValue" :key="index">
                                    {{ index }}: {{ item }}
                                </li>
                            </ul>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

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

const isPrimitive = (val: unknown): boolean => {
    return (
        typeof val === 'string' ||
        typeof val === 'number' ||
        typeof val === 'boolean' ||
        val === null
    )
}

// 默认全部展开
const activeName = ref<string[]>(Object.keys(props.data) || [])
</script>