<template>
	<div class="auxiliary-item-wrapper">
		<component :is="typeMap(item.type)" v-bind="Object.assign({}, $attrs, item.properties)">
			<template v-if="item.type === FormItemTypeEnum.DIVIDER">
				{{ item.properties.text }}
			</template>
			<template v-if="item.type === FormItemTypeEnum.SPACE">
				<span>&nbsp;</span>
			</template>
			<template v-if="item.type === FormItemTypeEnum.TYPOGRAPHY_TEXT && !item.properties.editable">
				{{ item.properties.content }}
			</template>
		</component>
	</div>
</template>

<script lang="ts">
	// 取消自动继承到跟节点的属性，否则会导致弹出两次事件（父节点与子节点分别弹出）
	export default {
		inheritAttrs: false,
	}
</script>
<script lang="ts" setup>
	import { toRefs, type PropType } from 'vue'
	import { FormItem, FormItemTypeEnum } from './form-render-types'

	const props = defineProps({
		item: {
			type: Object as PropType<FormItem>,
			required: true,
		},
	})
	const { item } = toRefs(props)

	/**
	 * 将组件类型映射为辅助项组件名称
	 * 可作为扩展点，自定义映射关系，这里先按照 antd 写死
	 */
	const typeMap = (type: FormItemTypeEnum | string): string => {
		return 'a-' + type
	}
</script>

<style lang="css" scoped>
	.auxiliary-item-wrapper {
		.text-item {
			padding: 10px 0;
			word-break: break-all;
			word-wrap: break-word;
		}
	}
</style>
