<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="组织机构" @clickLeft="back" />
		<uni-card style="height: 90vh;">
			<view>
				<m-tree ref="departTree" :edit="true" :divider="true" :data="departTreeData"
					:defaultProps="defaultProps" @edit-item="editItem" @add-item="addItem"></m-tree>
			</view>
			<tree-node :treeData="departTreeData"></tree-node>
		</uni-card>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
	</view>
</template>

<script>
	import treeNode from './departList/departTree.vue';
	import {
		getDictItemStore,
		getDepartStore,
		saveDepartStore
	} from '@/js_sdk/util/dictTools.js';
	const db = uniCloud.database()
	export default {

		components: {
			treeNode
		},

		mounted() {
			console.log(111)
			this.departTreeData = getDepartStore();
			console.log(222)
		},
		data() {
			return {
				/* 
				              tree 数据
				              */
				defaultProps: {
					id: '_id', // 此项为id项的key
					children: 'children', // 此项为修改子集数据的key
					label: 'depart_name' // 此项为修改显示数据的key
				},
				departTreeData: [],
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				}
			}
		},
		onPullDownRefresh() {
			this.departTreeData = getDepartStore()
		},
		onReachBottom() {

		},
		methods: {
			editItem(e) {
				console.log(e)
				uni.navigateTo({
					url: './edit?pNode=' + JSON.stringify(e.pNodeData)
				})
			},
			addItem(e) {
				console.log(e)
				uni.navigateTo({
					url: './add?pNode=' + e.pNodeData
				})
			},
			showTree() {
				this.$refs.nextTreeRef.showTree = true
			},
			onconfirm(list) {
				console.log('选中项的数量列表list：', list)
			},
			change(e) {
				console.log('选中项的数量列表list：', e)
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.departTreeData = getDepartStore()
						}
					}
				})
			}
		}
	}
</script>

<style>
	.tree-node {
		margin-left: 20px;
	}

	.node-content {
		/* 样式根据需要自定义 */
	}

	.node-children {
		margin-left: 15px;
	}
</style>