<template>
	<a-col :id="id" v-bind="Object.assign({}, $attrs, item.formItem.properties)" :data-id="item.uuid">
		<component-item
			v-for="(c, index) in item.children"
			:key="c.uuid"
			:data-id="c.uuid"
			:item="c"
			:selected="selected"
			@selected="selectedChange"
			@copy="copyItem(index)"
			@delete="deleteItem(index, $event)"
		/>
	</a-col>
</template>
<script lang="ts" setup>
	import { FormDesignerItem } from '../form-designer-types'
	import Sortable from 'sortablejs'
	import allComponents from '../component-panel/components'
	import XEUtils from 'xe-utils'
	import { notification } from 'ant-design-vue'

	const props = defineProps({
		item: {
			type: Object as PropType<FormDesignerItem>,
			required: true,
		},
		selected: {
			type: Object as PropType<FormDesignerItem>,
			required: false,
			default: () => null,
		},
		components: {
			type: Array as PropType<Array<FormDesignerItem>>,
			required: false,
			default: () => [],
		},
	})
	const { item, selected, components } = toRefs(props)

	// 复制表单项
	const copyItem = (index: number) => {
		if (item.value.children) {
			const copyItem = XEUtils.assign(XEUtils.clone(item.value.children[index], true), { uuid: XEUtils.uniqueId() })
			if (copyItem.formItem.config?.name)
				copyItem.formItem.config.name = copyItem.formItem.config.name.split('_')[0] + '_' + XEUtils.uniqueId()
			// 必须深拷贝，否则对象类型的字段会拷贝引用
			item.value.children.splice(index + 1, 0, copyItem)
		}
	}

	// 删除表单项
	const deleteItem = (index: number, _item: FormDesignerItem) => {
		if (item.value.children) {
			item.value.children.splice(index, 1)
			console.log(_item) //需要判定删除的组件是不是选中的组件
		}
	}

	const emit = defineEmits<{
		selectedChange: [config?: FormDesignerItem]
	}>()

	const selectedChange = (_config?: FormDesignerItem) => {
		emit('selectedChange', _config)
	}

	const id = computed(() => {
		return `drag-col-${item.value.uuid}`
	})
	nextTick(() => {
		const dom = document.getElementById(id.value)
		if (dom) {
			Sortable.create(dom, {
				animation: 150,
				sort: true,
				group: { name: 'components', pull: true, put: true },
				onEnd: (evt) => {
					item.value.children = [...evt.from.children]
						.filter((c) => (c as HTMLElement).style.display !== 'none')
						.map((c) => {
							const id = (c as HTMLElement).dataset.id
							return (item.value.children ?? []).find((c) => c.uuid === id)
						}) as FormDesignerItem[]
				},
				onAdd: (evt) => {
					;[...evt.to.children]
						.filter((item) => item.classList.contains('ant-card-grid'))
						.forEach((item) => {
							;(item as HTMLElement).style.display = 'none'
						}) //原始元素都别给我显示出来了
					const uuid = evt.clone.dataset.id
					const type = evt.clone.dataset.type
					const newItem = type
						? allComponents.find((item) => item.type === type)
						: XEUtils.findTree(components.value, (item) => item.uuid === uuid).item

					if (newItem?.formItem.group === 'layout') {
						notification.warning({
							message: '提示',
							description: '暂不支持布局嵌套,请拖入表单组件',
							duration: 3,
						})
						return
					}
					if (newItem) {
						item.value.children?.push(XEUtils.assign(XEUtils.clone(newItem, true), { uuid: XEUtils.uniqueId() }))
					}
				},
			})
		}
	})
</script>
<style scoped>
	.ant-col,
	.ant-row {
		min-height: 50px;
		padding: 10px;
	}
</style>
