<template>
<div class="DIYDescriptions">
<a-descriptions v-bind="$attrs">
	<template v-for="(item,index) in options" :key='index'>
		<a-descriptions-item v-if="$slots[item.name]"
			:contentStyle="contentStyle" :labelStyle="labelStyle"
			:label="item.label" :span="item.span"
		>
			<slot :row="item" :index="index" :name="item.name"></slot>
		</a-descriptions-item>
		<a-descriptions-item v-else-if="item.value"
			:contentStyle="contentStyle" :labelStyle="labelStyle"
			:label="item.label" :span="item.span"
		>
			{{typeof item.value === 'function' ? item.value(item) : item.value}}
		</a-descriptions-item>

		<a-descriptions-item v-else
			:contentStyle="contentStyle" :labelStyle="labelStyle"
			:label="item.label" :span="item.span"
		>
			{{getValue(data,item.name)}}
		</a-descriptions-item>
	</template>
</a-descriptions>
</div>
</template>
<script setup>
const props = defineProps({
	data:{type:Object,default:()=>{return {}}},
	options:{type:Array,default:()=>[]},
	contentStyle:{type:null},
	labelStyle:{type:null},
});
function getValue(row,prop){
	if(typeof prop === 'string'){
		prop = prop.split('.');
	}
	if(!Array.isArray(prop)){ throw new Error('prop 只能是 String | String[]'); }
	let result = row;
	prop.forEach((key)=>{
		result = result[key];
	});
	return result;
}
</script>