<template>
	<a-table size="small" :data-source="shownDataSource" :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-popconfirm title="确定删除这个选项?" @confirm="deleteDataSource(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 FormModal from '@/components/form-render/form-modal.vue'
	import { DataSource, FormDataType, FormItem, FormItemTypeEnum } from '@/components/form-render/form-render-types'
	import { PropType } from 'vue'
	import XEUtils from 'xe-utils'
	const props = defineProps({
		dataSource: {
			type: Array as PropType<Array<DataSource>>,
			required: false,
			default: () => [],
		},
	})
	const { dataSource } = toRefs(props)

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

	const columns = [
		{
			title: '键',
			dataIndex: 'key',
			key: 'key',
		},
		{
			title: '标题',
			dataIndex: 'title',
			key: 'title',
		},
		{
			title: '描述',
			dataIndex: 'description',
			key: 'description',
		},
		{
			title: '操作',
			key: 'ops',
			width: 100,
		},
	]

	const data = ref<Partial<DataSource>>({})
	const isAdd = ref(true)
	const title = computed(() => {
		return isAdd.value ? '添加数据源' : '编辑数据源'
	})
	const formItems = reactive<FormItem[]>([
		{
			group: 'form',
			type: FormItemTypeEnum.INPUT,
			config: {
				autoLink: true,
				hasFeedback: false,
				label: '键',
				name: 'key',
				required: true,
			},
			properties: {
				size: 'small',
				type: 'text',
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: '请输入Key',
			},
			rules: [],
		},
		{
			group: 'form',
			type: FormItemTypeEnum.INPUT,
			config: {
				autoLink: true,
				hasFeedback: false,
				label: '标题',
				name: 'title',
				required: true,
			},
			properties: {
				size: 'small',
				type: 'text',
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: '请输入标题',
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.TEXTAREA,
			group: 'form',
			config: {
				autoLink: true,
				hasFeedback: false,
				label: '描述',
				name: 'description',
			},
			properties: {
				size: 'small',
				visibilityToggle: true,
				allowClear: true,
				bordered: true,
				showCount: true,
				autoSize: {
					minRows: 2,
					maxRows: 6,
				},
				minRows: 2,
				maxRows: 6,
				placeholder: '请输入描述',
			},
			rules: [],
		},
	])

	const formModal = ref<typeof FormModal>()

	const add = () => {
		data.value = {}
		isAdd.value = true
		formModal.value?.open()
	}

	const edit = (_dataSource: DataSource) => {
		data.value = _dataSource
		isAdd.value = false
		formModal.value?.open()
	}
	const emit = defineEmits<{
		'update:data-source': [value: DataSource[]]
	}>()

	const deleteDataSource = (_dataSource: DataSource & { uuid?: string }) => {
		emit(
			'update:data-source',
			XEUtils.filter(shownDataSource.value, (item) => item.uuid !== _dataSource.uuid),
		)
	}

	const hanldOk = (_data: FormDataType) => {
		let d = XEUtils.clone(shownDataSource.value, true)
		if (_data.uuid) {
			d = XEUtils.map(d, (item: DataSource & { uuid: string }) => {
				if (item.uuid === _data.uuid) {
					return _data as DataSource & { uuid: string }
				}
				return item
			})
		} else {
			d.push(_data as DataSource & { uuid: string })
		}
		emit('update:data-source', d)
		formModal.value?.close()
	}
</script>
