<template>
	<treeselect
		v-model="deptId"
		:options="deptOptions"
		:show-count="true"
		sise="small"
		ref="treeselect"
		placeholder="请选择归属部门"
		@input="setId"
		:normalizer="normalizer" />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { listSimpleDepts } from '@/api/system/dept';

export default {
	components: { Treeselect },
	data() {
		return {
			deptId: undefined,
			deptOptions: undefined,
			defaultProps: {
				children: 'children',
				label: 'name',
			},
		};
	},
	created() {
		this.getTreeselect();
	},
	methods: {
		/** 查询部门下拉树结构  */
		getTreeselect() {
			listSimpleDepts().then((response) => {
				// 处理 deptOptions 参数
				this.deptOptions = [];
				this.deptOptions.push(...this.handleTree(response.data, 'id'));
			});
		},
    // 子组件返回id
		setId(val) {
			this.$emit('DeptId', val);
		},
    // 父组件赋值id
		setID(id) {
			this.deptId = id;
		},
		clear() {
			console.log(this.$refs.treeselect);
			this.$refs.treeselect.clear();
		},
		// 格式化部门的下拉框
		normalizer(node) {
			return {
				id: node.id,
				label: node.name,
				children: node.children,
			};
		},
	},
};
</script>
