<template>
	<view class="content">
		<view class="mix-tree-list">
			<block v-for="(item, index) in treeList" :key="index">
				<view class="mix-tree-item" :style="[{
					paddingLeft: item.rank * 15 + 'px',
					zIndex: item.rank * -1 + 50
				}]" :class="{
							border: treeParams.border === true,
							show: item.show,
							last: !item.children || item.children.length === 0,
							showchild: item.showChild,
							selected: selectedId === item.id
						}" @click.stop="treeItemTap(item, index)">
					<view class="mix-tree-icon"></view>
					{{ item.name }}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		params: {
			type: Object,
			default() {
				return {}
			}
		},
		expandAll: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			treeList: [],
			treeParams: {
				defaultIcon: '',
				currentIcon: '',
				lastIcon: '',
				border: false
			},
			selectedId: null  // 当前选中的节点id
		}
	},
	watch: {
		list(list) {
			this.treeParams = Object.assign(this.treeParams, this.params);
			this.treeList = [];
			this.renderTreeList(list);
			
			// 如果expandAll为true，自动展开所有节点
			if (this.expandAll) {
				this.expandAllNodes();
			}
		},
		expandAll: {
			handler(newVal) {
				if (newVal && this.treeList.length > 0) {
					this.expandAllNodes();
				}
			},
			immediate: true
		}
	},
	methods: {
		//扁平化树结构
		renderTreeList(list = [], rank = 0, parentId = [], parentShowChild = false) {
			list.forEach(item => {
				// 如果父节点是展开状态，子节点应该显示
				const shouldShow = rank === 0 || parentShowChild;
				// 获取当前节点的showChild值
				const currentShowChild = item.showChild !== undefined ? item.showChild : false;
				
				this.treeList.push({
					...item,
					id: item.id,
					name: item.label,
					parentId,  // 父级id数组
					rank,  // 层级
					showChild: currentShowChild,  //子级是否显示，保留传入的值
					show: shouldShow,  // 自身是否显示（第一层或父节点展开时显示）
					children: item.children  // 保存children信息用于判断最后一级节点
				})
				if (Array.isArray(item.children) && item.children.length > 0) {
					let parents = [...parentId];
					parents.push(item.id);
					// 递归处理子节点，传递当前节点的实际showChild状态
					this.renderTreeList(item.children, rank + 1, parents, currentShowChild);
				} else {
					this.treeList[this.treeList.length - 1].lastRank = true;
				}
			})
		},
		// 点击
		treeItemTap(item) {
			let list = this.treeList;
			let id = item.id;

			// 设置选中状态
			this.selectedId = id;

			// 无论是否是最后一级，都触发点击事件
			this.$emit('treeItemClick', item);

			if (item.lastRank === true) {
				//如果是最后一级，直接返回，不处理展开/折叠
				return;
			}

			// 非最后一级节点，处理展开/折叠逻辑
			item.showChild = !item.showChild;
			list.forEach(childItem => {
				if (item.showChild === false) {
					//隐藏所有子级
					if (!childItem.parentId.includes(id)) {
						return;
					}
					if (childItem.lastRank !== true) {
						childItem.showChild = false;
					}
					childItem.show = false;
				} else {
					if (childItem.parentId[childItem.parentId.length - 1] === id) {
						childItem.show = true;
					}
				}
			})
		},
		
		// 展开所有节点
		expandAllNodes() {
			this.treeList.forEach(item => {
				// 非最后一级节点都展开
				if (item.lastRank !== true) {
					item.showChild = true;
				}
				// 所有节点都显示
				item.show = true;
			})
		}
	}
}
</script>

<style>
.mix-tree-list {
	display: flex;
	flex-direction: column;
	padding-left: 30upx;
}

.mix-tree-item {
	display: flex;
	align-items: center;
	font-size: 30upx;
	color: #333;
	height: 0;
	opacity: 0;
	transition: .2s;
	position: relative;
}

.mix-tree-item.border {
	border-bottom: 1px solid #eee;
}

.mix-tree-item.show {
	height: 80upx;
	opacity: 1;
}

.mix-tree-icon {
	width: 32upx;
	height: 32upx;
	margin-right: 8upx;
	position: relative;
}

.mix-tree-icon:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-left: 12upx solid #666;
	border-top: 8upx solid transparent;
	border-bottom: 8upx solid transparent;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.mix-tree-item.showchild .mix-tree-icon:before {
	transform: translate(-50%, -50%) rotate(90deg);
}

.mix-tree-item.last .mix-tree-icon:before {
	opacity: 0;
}

.mix-tree-item.selected {
	background-color: #e6f7ff;
}
</style>
