<template>
	<a-table size="small" :data-source="shownTreeData" :columns="columns" :pagination="false" row-key="uuid">
		<template #title>
			<a-button type="primary" size="small" @click="add">
				<template #icon>
					<icon-font type="icon-plus"></icon-font>
				</template>
				添加
			</a-button>
		</template>
		<template #bodyCell="{ column, record }">
			<template v-if="column.key === 'ops'">
				<a-space>
					<a-button type="primary" size="small" @click="edit(record as DataSource)">
						<template #icon>
							<icon-font type="icon-edit"></icon-font>
						</template>
					</a-button>
					<a-button type="primary" size="small" @click="addChild(record as DataSource)">
						<template #icon>
							<icon-font type="icon-tree"></icon-font>
						</template>
					</a-button>
					<a-popconfirm title="确定删除这个选项?" @confirm="deleteData(record as DataSource)">
						<a-button type="primary" size="small" danger>
							<template #icon>
								<icon-font type="icon-delete"></icon-font>
							</template>
						</a-button>
					</a-popconfirm>
				</a-space>
			</template>
		</template>
	</a-table>
	<form-modal ref="formModal" v-model="data" :form-items="formItems" :title="title" @ok="hanldOk"></form-modal>
</template>
<script lang="ts" setup>
	import { DataSource, FormDataType, FormItem, FormItemTypeEnum } from '@/components/form-render/form-render-types'
	import { TreeDataNode } from 'ant-design-vue/es/vc-tree-select/interface'
	import FormModal from '@/components/form-render/form-modal.vue'
	import XEUtils from 'xe-utils'

	const props = defineProps({
		treeData: {
			type: Array as PropType<Array<TreeDataNode>>,
			required: false,
			default: () => [],
		},
	})
	const { treeData } = toRefs(props)

	const shownTreeData = computed(() => {
		return XEUtils.mapTree(XEUtils.clone(treeData.value, true), (item) => {
			return XEUtils.assign(XEUtils.clone(item, true), { uuid: XEUtils.uniqueId() })
		})
	})

	const columns = [
		{
			title: '标签',
			dataIndex: 'label',
			key: 'label',
		},
		{
			title: '值',
			dataIndex: 'value',
			key: 'value',
		},
		{
			title: '操作',
			key: 'ops',
			width: 100,
		},
	]

	const formItems = reactive<FormItem[]>([
		{
			group: 'form',
			type: FormItemTypeEnum.INPUT,
			config: {
				autoLink: true,
				hasFeedback: false,
				label: '标签',
				name: 'label',
				required: true,
			},
			properties: {
				size: 'small',
				type: 'text',
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: '请输入标签',
			},
			rules: [],
		},
		{
			group: 'form',
			type: FormItemTypeEnum.INPUT,
			config: {
				autoLink: true,
				hasFeedback: false,
				label: '值',
				name: 'value',
				required: true,
			},
			properties: {
				size: 'small',
				type: 'text',
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: '请输入值',
			},
			rules: [],
		},
	])

	const formModal = ref<typeof FormModal>()
	const data = ref<Partial<TreeDataNode>>({})
	const state = ref<'add' | 'child' | 'edit'>('add')
	const title = computed(() => {
		switch (state.value) {
			case 'add':
				return '添加数据项'
			case 'child':
				return '添加数据子项'
			default:
				return '编辑数据项'
		}
	})
	const add = () => {
		data.value = {}
		state.value = 'add'
		formModal.value?.open()
	}
	const selected = ref<TreeDataNode>()
	const addChild = (_data: TreeDataNode) => {
		data.value = {}
		state.value = 'child'
		selected.value = _data
		formModal.value?.open()
	}
	const edit = (_data: TreeDataNode) => {
		data.value = _data
		state.value = 'edit'
		formModal.value?.open()
	}

	const emit = defineEmits<{
		'update:tree-data': [value: TreeDataNode[]]
	}>()

	const hanldOk = (_data: FormDataType) => {
		let options = XEUtils.clone(shownTreeData.value, true)
		if (_data.uuid) {
			options = XEUtils.mapTree(options, (item) => {
				if (item.uuid === _data.uuid) {
					item = _data as TreeDataNode & { uuid: string }
				}
				return item
			})
		} else if (!selected.value?.uuid) {
			options.push(_data as TreeDataNode & { uuid: string })
		} else {
			options = XEUtils.mapTree(options, (item) => {
				if (item.uuid === selected.value?.uuid) {
					if (item.children) {
						item.children = (item.children as Array<TreeDataNode>).concat([_data as TreeDataNode])
					} else {
						item.children = [_data as TreeDataNode]
					}
				}
				return item
			})
		}
		emit('update:tree-data', options)
		formModal.value?.close()
	}
	const deleteData = (_data: TreeDataNode) => {
		emit(
			'update:tree-data',
			XEUtils.mapTree(
				XEUtils.searchTree(shownTreeData.value, (item) => item.uuid !== _data.uuid),
				(item) => {
					if (item.children && (item.children as Array<unknown>).length === 0) {
						delete item.children
					}
					return item
				},
			),
		)
	}
</script>
