<template>
	<a-row :gutter="16">
		<a-col :span="colSpan">
			<a-form-item label="创建人：">
				<a-input disabled v-model:value="detailDataProps.createUserName" placeholder="请输入创建人" allow-clear />
			</a-form-item>
		</a-col>
		<a-col :span="colSpan">
			<a-form-item label="创建时间：">
				<a-input disabled v-model:value="detailDataProps.createTime" placeholder="请输入创建人" allow-clear />
			</a-form-item>
		</a-col>
		<a-col :span="colSpan">
			<a-form-item label="修改人：">
				<a-input disabled v-model:value="detailDataProps.updateUserName" placeholder="请输入创建人" allow-clear />
			</a-form-item>
		</a-col>
		<a-col :span="colSpan">
			<a-form-item label="修改人：">
				<a-input disabled v-model:value="detailDataProps.updateTime" placeholder="请输入创建人" allow-clear />
			</a-form-item>
		</a-col>
	</a-row>
</template>

<script setup>
	const props = defineProps({
		detailData: {
			type: Object,
			default: () => {
				return {}
			}
		},
		colSpan: {
			type: Number,
			default: 24
		}
	})
	const detailDataProps = ref({})

	// const emit = defineEmits()

	// 生命周期钩子
	onMounted(() => {
		console.log('Component mounted')
		// TODO: Add your onMounted code here
	})

	onUpdated(() => {
		console.log('Component updated')
		// TODO: Add your onUpdated code here
	})

	onUnmounted(() => {
		console.log('Component unmounted')
		// TODO: Add your onUnmounted code here
	})

	watch(
		() => props.detailData,
		() => {
			console.log(props.detailData, 'props.detailData')
			detailDataProps.value = props.detailData
		},
		{
			immediate: true,
			deep: true
		}
	)
</script>

<style scoped></style>
