<template>
	<a-drawer v-model:open="visible" title="表单预览" width="50%" :closable="false">
		<form-render v-model="formData" :items="items" :config="config"></form-render>
		<template #extra>
			<a-button type="primary" size="small" @click="handleOk">
				<template #icon>
					<icon-font type="icon-submit"></icon-font>
				</template>
				确定
			</a-button>
		</template>
	</a-drawer>
</template>
<script lang="ts" setup>
	import { FormConfig } from '@/components/form-render/form-render-types'
	import { FormDesignerItem } from '../form-designer-types'
	import { PropType, computed, ref, toRefs } from 'vue'
	import { notification } from 'ant-design-vue'
	import XEUtils from 'xe-utils'
	const visible = ref<boolean>(false)
	const show = () => {
		visible.value = true
		formData.value = {}
	}

	defineExpose({ show })

	const handleOk = () => {
		notification.open({
			message: '表单数据',
			description: JSON.stringify(formData.value),
			duration: 0,
		})
		visible.value = false
	}

	const props = defineProps({
		components: {
			type: Array as PropType<FormDesignerItem[]>,
			required: true,
		},
		config: {
			type: Object as PropType<FormConfig>,
			required: true,
		},
	})
	const { components, config } = toRefs(props)

	const items = computed(() => {
		return XEUtils.mapTree(components.value, (item) => item.formItem)
	})

	const formData = ref({})
</script>
