<template>
	<div>
		<a-spin :spinning="localLoading">
			<div class="s-table-tool">
				<div class="s-table-tool-left">{{ treeTitle }}</div>
				<div class="layout-items-center s-table-tool-right">
					<span v-for="item in tool" :key="item.name">
						<!-- 新增 -->
						<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'plus' && props.toolConfig.plus">
							<component class="icons" :is="item.icon" @click="handleAddTree"></component>
						</a-tooltip>
						<!-- 修改 -->
						<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'edit' && props.toolConfig.edit">
							<component class="icons" :is="item.icon" @click="handleEditTree"></component>
						</a-tooltip>
						<!-- 删除 -->
						<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'delete' && props.toolConfig.delete">
							<a-popconfirm title="确定要删除吗？" ok-text="确认" cancel-text="取消" @confirm="handleDelTree">
								<component class="icons" :is="item.icon"></component>
							</a-popconfirm>
						</a-tooltip>
						<!-- 刷新 -->
						<a-tooltip
							:title="item.title"
							class="s-tool-item"
							v-if="item.name === 'refresh' && props.toolConfig.refresh"
						>
							<component class="icons" :is="item.icon" @click="loadTreeData()"></component>
						</a-tooltip>
					</span>
				</div>
			</div>
			<a-directory-tree
				:loading="localLoading"
				show-line
				v-model:expandedKeys="expandedKeys"
				v-model:selectedKeys="selectedKeys"
				multiple
				:fieldNames="{
					children: 'children',
					title: 'name',
					key: 'id'
				}"
				:tree-data="treeData"
				@select="handleTreeClick"
			></a-directory-tree>
		</a-spin>
	</div>
</template>

<script setup>
	import { message } from 'ant-design-vue'

	const props = defineProps({
		// 树 data
		treeData: {
			type: Array,
			default: () => []
		},
		treeTitle: {
			type: String,
			default: ''
		},
		// 配置工具栏
		toolConfig: {
			type: Object,
			default: () => ({
				plus: true,
				edit: true,
				delete: true,
				refresh: true
			})
		},
		apiModel: {
			type: Object,
			default: () => {
				return {
					getTree: () => {},
					addTree: () => {},
					delTree: () => {}
				}
			}
		},
		openFormRef: {
			type: Object,
			default: () => {}
		},
		tableRef: {
			type: Object,
			default: () => {}
		}
	})

	const emit = defineEmits(['selectTree', 'delTree'])

	const tool = [
		{
			name: 'plus',
			icon: 'plus-outlined',
			title: '新增'
		},
		{
			name: 'edit',
			icon: 'edit-outlined',
			title: '编辑'
		},
		{
			name: 'delete',
			icon: 'delete-outlined',
			title: '删除'
		},
		{
			name: 'refresh',
			icon: 'ReloadOutlined',
			title: '刷新'
		}
	]

	// 树结构
	const expandedKeys = ref()
	const selectedKeys = ref([])
	const localLoading = ref(false)
	const treeData = ref([
		{
			id: 0,
			parentId: '-1',
			name: '顶级',
			children: ''
		}
	])
	let treeRow = {}

	const handleTreeClick = (selectedKeys, event) => {
		treeRow = event.node
		emit('selectTree', treeRow)
	}

	const handleAddTree = () => {
		props.openFormRef.onOpen()
	}

	const handleEditTree = () => {
		if (!treeRow.id) return message.error('!请选择要编辑的数据')
		props.openFormRef.onOpen(treeRow)
	}

	const handleDelTree = () => {
		if (!treeRow.id) return message.error('!请选择要删除的数据')
		props.apiModel.delTree([{ id: treeRow.id }]).then((res) => {
			selectedKeys.value = []
			treeRow = {}
			emit('delTree', treeRow)
			loadTreeData()
		})
	}

	const loadTreeData = async () => {
		try {
			localLoading.value = true
			const treeRes = await props.apiModel.getTree()
			console.log(treeRes, 'treeRes')
			if (Array.isArray(treeRes)) {
				treeData.value[0].children = treeRes
			} else {
				treeData.value[0].children = []
			}

			if (selectedKeys.value.length > 0) {
				selectedKeys.value = []

				props.tableRef.refresh()
			}

			if (treeRow.id) {
				treeRow = []
			}

			setTimeout(() => {
				localLoading.value = false
			}, 800)
		} catch (e) {
			localLoading.value = false
			message.error('获取树结构数据失败:' + e)
			console.error('获取树结构数据失败:' + e)
		}
	}

	defineExpose({
		loadTreeData
	})
</script>

<style lang="less" scoped>
	.s-table-tool {
		display: flex;
		margin-bottom: 16px;
		.s-table-tool-left {
			flex: 1;
		}
		.s-table-tool-right {
			.s-tool-item {
				font-size: 16px;
				@apply ml-4;
				cursor: pointer;
			}
		}
	}
</style>
