<template>
  <a-tree-select
    :getPopupContainer="
      (triggerNode) => {
        return triggerNode.parentNode || document.body;
      }
    "
    v-model:value="labelValue"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="请选择归属组织"
    :labelInValue="true"
    allow-clear
    v-model:treeExpandedKeys="stuTreeExpandedKeys"
    :loading="orgLoading"
    :load-data="onLoadData"
    :tree-data="options"
    :fieldNames="{
      children: 'treeChildList',
      label: 'name',
      value: 'id',
    }"
    :disabled="disabled"
    @change="change"
    dropdownClassName="treeDropdown"
  >
  </a-tree-select>
</template>
<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import { request, useBoeApi } from "@/api/request";
import { ORG_CHILD_LIST, ORG_LIST } from "@/api/ThirdApi";

const props = defineProps({
  value: String,
  name: String,
  disabled: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits({});
const stuTreeExpandedKeys = ref([]);
const labelValue = ref({});
const { data: options, loading: orgLoading } = useBoeApi(
  ORG_LIST,
  { keyword: "" },
  {
    init: true,
    result: (res) => res.result.map((e) => ({ ...e, isLeaf: false })),
  }
);

watch(props, () => {
  stuTreeExpandedKeys.value = [];
  if (labelValue.value.value !== props.value) {
    labelValue.value = { value: props.value, label: props.name };
  }
  if (labelValue.value.label !== props.name) {
    labelValue.value = { value: props.value, label: props.name };
  }
});

function onLoadData(treeNode) {
  return request(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
    (r) => {
      treeNode.dataRef.treeChildList = r.result.directChildList;
      options.value = [...options.value];
    }
  );
}

function change(
  { label, value },
  obj,
  {
    triggerNode: {
      props: { namePath },
    },
  }
) {
  emit("update:name", label);
  emit("update:fullName", namePath);
  emit("update:value", value);
}
</script>
