<template>
	<view class="vrapile-content-001">
		<view class="question-class-tree">
			<vrapile-tree ref="vrapileTreeRef" :defaultProps="defaultProps" 
				:data="treeList" :divider="true" :unfold="true"
				:edit="true" @node-click="nodeClick" @add-item="addNode" 
				@edit-item="editNode" @long-press="longPressNode">
			</vrapile-tree>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				treeList: [
					{ id: "A01", parentId: "0", label: "A01-全部", name: "全部", level: 1, lastFlag: 0, orderNum: 1, children: [
						{ id: "A01001", parentId: "A01", label: "A01001-架构师题库", name: "架构师题库", level: 2, lastFlag: 0, orderNum: 1, children: [
							{ id: "A01001001", parentId: "A01001", label: "A01001001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 11, children: []},
							{ id: "A01001002", parentId: "A01001", label: "A01001002-题库二", name: "题库二", level: 3, lastFlag: 1, orderNum: 12, children: []}
						]},
						{ id: "A01003", parentId: "A01", label: "A01003-大数据AI题库", name: "大数据AI题库", level: 2, lastFlag: 0, orderNum: 13, children: [
							{ id: "A01003001", parentId: "A01003", label: "A01003001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 1, children: []}
						]},
						{ id: "A01004", parentId: "A01", label: "A01004-驾照考试题库", name: "驾照考试题库", level: 2, lastFlag: 0, orderNum: 4, children: []},
					]}
				],
				
				defaultProps: { id: "id", children: "children", label: "name" },
			};
		},	
		onShow(){
		},
		methods: {
			//节点单击事件
			nodeClick(e) {
				console.log("单击事件：" + JSON.stringify(e))
				uni.showToast({
					title: "单击事件：" + JSON.stringify(e).substring(0, 200) + (JSON.stringify(e).length > 200?" ...":""),
					icon: 'none'
				})
			},
			//节点新增点击事件
			addNode(e) {
				console.log("新增按钮点击事件：" + JSON.stringify(e).length)
				uni.showToast({
					title: "新增按钮点击事件：" + JSON.stringify(e).substring(0, 200) + (JSON.stringify(e).length > 200?" ...":""),
					icon: 'none'
				})
			},
			//节点修改点击事件
			editNode(e) {
				console.log("修改按钮点击事件：" + JSON.stringify(e))
				uni.showToast({
					title: "修改按钮点击事件：" + JSON.stringify(e).substring(0, 200) + (JSON.stringify(e).length > 200?" ...":""),
					icon: 'none'
				})
			},
			//节点长按事件
			longPressNode(e) {
				console.log("长按事件：" + JSON.stringify(e))
				uni.showToast({
					title: "长按事件：" + JSON.stringify(e).substring(0, 200) + (JSON.stringify(e).length > 200?" ...":""),
					icon: 'none'
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.vrapile-content-001{
		padding: 0;
		margin: 0;
		width: 750rpx;
		height: calc(100vh - 0px);
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}
	.question-class-tree{
		padding: 0rpx 10rpx 30rpx 10rpx;
		background-color: #ffffff;
		flex: 1;
		overflow-y: auto;
	}
</style>
