<template>
	<next-tree
		ref="nextTreeRef"
		check-strictly
		func-mode="radio"
		select-parent
		:if-search="false"
		:tree-data="treeData"
		theme-color="#3377ff"
		page-height="92vh"
		:label-key="'name'"
		:value-key="'id'"
		:children-key="'children'"
		@confirm="fnTreeConfirm"
		@cancel="fnTreeCancel"
	></next-tree>
</template>

<script>
import { getDepartmentTree } from "@/api";

export default {
	props: {
		value: {
			type: String,
			default: "",
		},
    visible: {
			type: Boolean,
			required: true,
		},
	},
	data() {
		return {
			treeData: [],
		};
	},

	watch: {
		visible: {
			handler: function (newVal, oldVal) {
				if (newVal) {
					this.$nextTick(() => {
						if (this.$refs.nextTreeRef) {
							this.$refs.nextTreeRef._show();
							this.$refs.nextTreeRef.checkedFunc(this.value);
						}
					});
				} else {
					this.$nextTick(() => {
						if (this.$refs.nextTreeRef) {
							this.$refs.nextTreeRef._hide();
						}
					});
				}
			},
			immediate: true,
		},
	},

	mounted() {
		if (this.visible) {
			// this.fnGetData(); // 请求数据接口
		}
	},

	methods: {
		// 结构树弹框确定
		fnTreeConfirm(evt) {
			this.$emit("confirm", evt);
			this.$emit("update:visible", false);
		},
		// 关闭结构树弹框
		fnTreeCancel() {
			this.$emit("update:visible", false);
		},
		async fnGetData() {
			const resData = await getDepartmentTree({
				loading: false,
			});
			this.treeData = JSON.parse(resData.zTreeNodes);
		},
	},
};
</script>

<style scoped lang="scss"></style>
