<template>
	<view> 
		<uni-easyinput @focus="open" v-model="selectText" placeholder="选择父级部门"></uni-easyinput>
		<next-tree ref="nextTreeRef" funcMode="radio" uiMode="popup" :selectParent="true" labelKey="depart_name"
			valueKey="_id" :multiple="false" :treeData="departTreeData" @confirm="onnodeclick" @change="onchange">
		</next-tree>
	</view>
</template>
<script>
	import {
		getJsonTree,
		groupBy
	} from "@/js_sdk/util/jsonData";
	import {
		saveDepartStore,
		saveDictItemStore,
		getDictItemStore,
		getDepartStore
	} from '@/js_sdk/util/dictTools.js';
	export default {
		data() {
			return {
				departTreeData: [],
				selectText: "",
				departID: "",
				selectIDs:[]

			}
		},
		props: {
			selectID: {
				type: String,
				default: ""
			},
		},
		watch: {
			selectID: {
				immediate: true,
				deep: true,
				handler(val) {
					console.log(val)					
					this.departTreeData = getDepartStore()
					this.selectIDs=[];
					this.selectIDs.push(val)
					this.echoDefault(this.selectIDs)
				}
			}
		},
		mounted() {
			this.departTreeData = getDepartStore()
		},
		onShow() {

		},
		methods: {
			open() {
				this.departTreeData = getDepartStore();
				setTimeout(() => {
					this.$refs.nextTreeRef.showTree = true;
				}, 500)

			},

			echoDefault(selectIds) {
				this.checkedTreeData(this.departTreeData, selectIds)
				console.log('treeData的数据：', this.departTreeData)
				console.log('treeData的选中的：', selectIds)
				this.funcMode = 'checkbox'
				// this.$refs.nextTreeRef.showTree = true
			},
			checkedTreeData(treeData, selectIds) {
				// 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
				// 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
				(treeData || []).map(item => {
					if (selectIds.indexOf(item._id) !== -1) {
						console.log('v选中的：', item)
						this.selectText=item.depart_name
					 this.$emit("change", selectIds[0], this.selectText)
						item.checked = true
						
					} else {
						item.checked = false
					}
					if (item.children && item.children.length) {
						this.checkedTreeData(item.children, selectIds)
					}
				})
			},
			onchange(e) {
				console.log("xzzzz---" + JSON.stringify(e))
				let temp = this.getTreeName(e);
				this.selectText = temp.strName;
				let arrID = [];
				let departParentID = "";
				try {
					arrID = temp.strID.split('/')
					if (arrID.length > 1) {
						departParentID = arrID[arrID.length - 1]
					} else {
						departParentID = arrID[0]
					}

				} catch (e) {
					//TODO handle the exception
				}
				console.log(departParentID, this.selectText)
				this.$emit("change", departParentID, this.selectText)
			},
			onnodeclick(e) {
				// this.selectText = JSON.stringify(this.getTreeName(e));
				// this.$emit("change",e[0]._id,this.selectText)	
			},
			getTreeName(tree) {
				// console.log("e", tree)
				let treeParents = tree[0].parents
				var strName = "";
				var strID = "";
				if (treeParents.length > 0) {
					for (let i = 0; i < treeParents.length; i++) {
						strName = strName + treeParents[i].depart_name + "/";
						strID = strID + treeParents[i]._id + "/";
					}
				}
				strName = strName + tree[0].depart_name;
				strID = strID + tree[0]._id;

				return {
					"strName": strName,
					"strID": strID
				}

			}

		}
	}
</script>