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

				<a-descriptions-item v-else v-bind="item">
					{{ getValue(data, item.prop) }}
				</a-descriptions-item>
			</template>
		</a-descriptions>
	</div>
</template>
<script setup>
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		},
		options: { type: Array, default: () => [] }
	})
	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>
