<template>
	<a-badge-ribbon color="volcano">
		<template #text>
			<a-space>
				<icon-font type="icon-copy" @click.stop="onCopy" />
				<icon-font type="icon-delete" style="color: #fff" @click.stop="onDelete" />
			</a-space>
		</template>
		<div
			:style="{ '--ant-primary-color': token.colorPrimaryBorder }"
			:class="`list-group-item list-group-item-masked designer-item ${
				selected?.uuid === item.uuid ? 'designer-item-active' : ''
			}`"
			@click.stop="onClick"
		>
			<form-item-render v-if="item.formItem?.group === 'form'" :item="item.formItem" :disabled="true" />
			<auxiliary-item-render
				v-else-if="item.formItem?.group === 'auxiliary'"
				:item="item.formItem"
			></auxiliary-item-render>
			<row-component-item
				v-else-if="item.formItem.group === 'layout' && item.formItem.type === FormItemTypeEnum.ROW"
				:data-id="item.uuid"
				:item="XEUtils.assign(item.formItem, { children: item.children?.map((item) => item.formItem) })"
			>
				<template v-if="item.children">
					<col-component-item
						v-for="(c, index) in item.children"
						:key="index"
						:item="c"
						:components="components"
						:style="{
							borderStyle: selected && selected.uuid === c.uuid ? 'solid' : 'dashed',
							borderWidth: selected && selected.uuid === c.uuid ? '2px' : '1px',
							borderColor: token.colorPrimaryBorder,
						}"
						:selected="selected"
						@click.stop="emit('selected', c)"
						@selected-change="(_c?: FormDesignerItem) => emit('selected', _c)"
					></col-component-item>
				</template>
			</row-component-item>
		</div>
	</a-badge-ribbon>
</template>

<script lang="ts" setup>
	import type { PropType } from 'vue'
	import { FormDesignerItem } from '../form-designer-types'
	import { theme } from 'ant-design-vue'
	import { FormItemTypeEnum } from '@/components/form-render/form-render-types'
	import XEUtils from 'xe-utils'
	const { useToken } = theme
	const { token } = useToken()
	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)

	watch(
		selected,
		(v) => {
			if (v && item.value.uuid !== v.uuid && v.formItem.type === FormItemTypeEnum.COL) {
				//嵌套的列
				if (item.value.children) {
					const index = item.value.children?.findIndex((i) => i.uuid === v.uuid)
					item.value.children.splice(index, 1, v)
				}
			}
		},
		{ immediate: true, deep: true },
	)
	const emit = defineEmits<{
		selected: [itemConfig?: FormDesignerItem]
		copy: [itemConfig: FormDesignerItem]
		delete: [itemConfig: FormDesignerItem]
	}>()

	const onClick = () => {
		emit('selected', item.value)
	}
	const onCopy = () => {
		emit('copy', item.value)
	}
	const onDelete = () => {
		emit('delete', item.value)
	}
</script>

<style lang="css" scoped>
	.designer-item {
		padding: 10px 50px 10px 10px;
		cursor: pointer;
		border: 1px dashed var(--ant-primary-color);
	}

	.designer-item-active {
		border: 2px solid var(--ant-primary-color);
	}

	.list-group-item-masked {
		z-index: 3000;
		background: rgb(238 236 236 / 30%);
	}
</style>
