<template>
  <a-tree-select
      :getPopupContainer="
                          (triggerNode) => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
      v-model:value="id"
      style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="自动带出 可修改"
      allow-clear
      :tree-data="options"
      :fieldNames="{
                children: 'treeChildList',
                label: 'name',
                value: 'id',
              }"
      :disabled="disabled"
      @change="change"
      dropdownClassName="treeDropdown"
  >
  </a-tree-select>
</template>
<script setup>
import {computed, defineEmits, defineProps, onMounted, ref} from "vue";
import {useStore} from "vuex";

const store = useStore();

const props = defineProps({
  value: String
})
const emit = defineEmits({})

const options = ref([])

const id = computed(() => {
  return props.value
})

onMounted(() => {
  options.value = [...store.state.orgtreeList]
})

function change(key, obj) {
  emit('update:name', obj[0])
  emit('update:value', key)
}

</script>
