<template>
	<a-table size="small" :data-source="shownOptions" :columns="columns" :pagination="false" row-key="uuid">
		<template #title>
			<a-button type="primary" size="small" @click="addOption">
				<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="editOption(record)">
						<template #icon>
							<icon-font type="icon-edit"></icon-font>
						</template>
					</a-button>
					<a-button v-if="tree" type="primary" size="small" @click="addClildOption(record)">
						<template #icon>
							<icon-font type="icon-tree"></icon-font>
						</template>
					</a-button>
					<a-popconfirm title="确定删除这个选项?" @confirm="deleteOption(record)">
						<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="option" :form-items="formItems" :title="title" @ok="hanldOk"></form-modal>
</template>
<script lang="ts" setup>
	import FormModal from '@/components/form-render/form-modal.vue'
	import { FormDataType, FormItem, FormItemTypeEnum, Option } from '@/components/form-render/form-render-types'
	import { PropType } from 'vue'
	import XEUtils from 'xe-utils'
	const props = defineProps({
		options: {
			type: Array as PropType<Option[]>,
			required: false,
			default: () => [],
		},
		tree: {
			type: Boolean,
			required: false,
			default: () => false,
		},
	})
	const { options, tree } = toRefs(props)
	const columns = [
		{
			title: '标签',
			dataIndex: 'label',
			key: 'label',
		},
		{
			title: '值',
			dataIndex: 'value',
			key: 'value',
		},
		{
			title: '操作',
			key: 'ops',
			width: 100,
		},
	]
	const emit = defineEmits<{
		'update:options': [value: Option[]]
	}>()

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

	const formItems = reactive<FormItem[]>([
		{
			group: 'form',
			type: FormItemTypeEnum.INPUT,
			config: {
				autoLink: true,
				hasFeedback: false,
				label: '标签',
				name: 'label',
				required: true,
			},
			properties: {
				size: 'default',
				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: 'default',
				type: 'text',
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: '请输入选项值',
			},
			rules: [],
		},
	])
	const selected = ref<Partial<Option & { uuid: string }>>({})
	const option = ref({})
	const formModal = ref<typeof FormModal>()
	const title = ref('添加选项')
	const addClildOption = (_option: Option) => {
		title.value = '添加子选项'
		option.value = {}
		selected.value = _option
		formModal.value?.open()
	}

	const addOption = () => {
		option.value = {}
		selected.value = {}
		title.value = '添加选项'
		formModal.value?.open()
	}

	const editOption = (_option: Option) => {
		selected.value = {}
		option.value = _option
		title.value = '编辑选项'
		formModal.value?.open()
	}
	const deleteOption = (_option: Option) => {
		emit(
			'update:options',
			XEUtils.mapTree(
				XEUtils.searchTree(shownOptions.value, (item) => item.uuid !== _option.uuid),
				(item) => {
					if (item.children && (item.children as Array<unknown>).length === 0) {
						delete item.children
					}
					return item
				},
			),
		)
	}
	const hanldOk = (_option: FormDataType) => {
		let options = XEUtils.clone(shownOptions.value, true)
		if (_option.uuid) {
			options = XEUtils.mapTree(options, (item) => {
				if (item.uuid === _option.uuid) {
					item = _option as Option & { uuid: string }
				}
				return item
			})
		} else if (!selected.value.uuid) {
			options.push(_option as Option & { uuid: string })
		} else {
			options = XEUtils.mapTree(options, (item) => {
				if (item.uuid === selected.value.uuid) {
					if (item.children) {
						item.children = (item.children as Array<unknown>).concat([_option])
					} else {
						item.children = [_option]
					}
				}
				return item
			})
		}
		emit('update:options', options)
		formModal.value?.close()
	}
</script>
