<template>
	<el-dialog title="历史菜单详情" :close-on-click-modal="false" top="8vh" width="440px" v-model="visible">
		<div class="history-menu-tree" v-loading="loading">
			<el-input v-model="filterText" clearable placeholder="搜索分类或菜品" prefix-icon="el-icon-search"
				@input="filterTree"></el-input>
			<div class="history-menu-tree-body">
				<el-tree ref="historyMenuTree" :data="treeData" node-key="id" default-expand-all
					:props="{ label: 'label', children: 'children' }" :filter-node-method="filterNode">
				</el-tree>
				<div v-if="!loading && treeData.length === 0" class="history-menu-empty">暂无菜品</div>
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
import DishMenuService from '@/api/psi/DishMenuService'
import DishTypeService from '@/api/psi/DishTypeService'

export default {
	data() {
		return {
			visible: false,
			loading: false,
			menuId: '',
			filterText: '',
			treeData: []
		}
	},
	dishMenuService: null,
	dishTypeService: null,
	created() {
		this.dishMenuService = new DishMenuService()
		this.dishTypeService = new DishTypeService()
	},
	methods: {
		init(menuId) {
			this.menuId = menuId
			this.visible = true
			this.filterText = ''
			this.treeData = []
			this.refreshTree()
		},
		refreshTree() {
			if (!this.menuId) {
				return
			}
			this.loading = true
			Promise.all([
				this.dishTypeService.list({}),
				this.dishMenuService.historyDetailList({
					current: 1,
					size: 1000000,
					menuId: this.menuId
				})
			]).then(([typeList, dishPage]) => {
				this.treeData = this.buildTree(typeList || [], dishPage && dishPage.records ? dishPage.records : [])
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		buildTree(typeList, dishList) {
			const typeNodeMap = new Map()
			typeList.forEach(item => {
				typeNodeMap.set(item.id, {
					id: `type:${item.id}`,
					typeId: item.id,
					parentId: item.parentId,
					label: item.name,
					children: []
				})
			})

			const rootNodes = []
			typeNodeMap.forEach(node => {
				const parent = typeNodeMap.get(node.parentId)
				if (parent) {
					parent.children.push(node)
				} else {
					rootNodes.push(node)
				}
			})

			const uncategorizedDishes = []
			dishList.forEach(item => {
				const dishNode = {
					id: `dish:${item.dishId}`,
					label: item.dishName,
					children: []
				}
				const typeNode = typeNodeMap.get(item.typeId)
				if (typeNode) {
					typeNode.children.push(dishNode)
				} else {
					uncategorizedDishes.push(dishNode)
				}
			})

			const result = this.pruneEmptyTypes(rootNodes)
			if (uncategorizedDishes.length > 0) {
				result.push({
					id: 'type:uncategorized',
					label: '未分类',
					children: uncategorizedDishes
				})
			}
			return result
		},
		pruneEmptyTypes(nodes) {
			return nodes.reduce((result, node) => {
				const children = this.pruneEmptyTypes(node.children.filter(item => item.id.indexOf('type:') === 0))
					.concat(node.children.filter(item => item.id.indexOf('dish:') === 0))
				if (children.length > 0) {
					result.push({
						...node,
						children
					})
				}
				return result
			}, [])
		},
		filterTree(value) {
			if (this.$refs.historyMenuTree) {
				this.$refs.historyMenuTree.filter(value)
			}
		},
		filterNode(value, data, node) {
			if (!value) {
				return true
			}
			const keyword = String(value).toLowerCase()
			if (String(data.label || '').toLowerCase().includes(keyword)) {
				return true
			}
			let parent = node && node.parent
			while (parent && parent.data) {
				if (String(parent.data.label || '').toLowerCase().includes(keyword)) {
					return true
				}
				parent = parent.parent
			}
			return false
		}
	}
}
</script>

<style scoped>
.history-menu-tree {
	min-height: 480px;
}

.history-menu-tree-body {
	position: relative;
	height: 440px;
	margin-top: 12px;
	padding: 8px;
	overflow: auto;
	border: 1px solid #ebeef5;
	border-radius: 6px;
}

.history-menu-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #909399;
	pointer-events: none;
}
</style>
