<template>
  <el-tree-select
    v-model="modelValue"
    :data="departmentTree"
    node-key="id"
    :props="{
      children: 'nodes',
      label: 'name',
    }"
    :render-after-expand="false"
    accordion
    :check-strictly="checkStrictly"
    :clearable="clearable"
    :show-checkbox="showCheckbox"
    :multiple="multiple"
    :collapse-tags="collapseTags"
  />
</template>

<script setup>
import { layoutFnGetDepartmentTree } from "@/assets/js/data_dictionary";
import { useVModel } from "@vueuse/core";

defineOptions({
  name: "LayoutDepartment",
});
const props = defineProps({
  modelValue: {
    type: [String, Array],
    required: true,
    default: "",
  },
  checkStrictly: {
    type: Boolean,
    default: true,
  },
  showCheckbox: {
    type: Boolean,
    default: false,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  collapseTags: {
    type: Boolean,
    default: false,
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  rootDisabled: {
    type: String,
    default: "N",
  },
});
const emits = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emits);
const departmentTree = await layoutFnGetDepartmentTree({
  rootDisabled: props.rootDisabled,
});
</script>

<style scoped></style>
