"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../ui/src/comp.js");
require("../../ui/index.js");
const dom = require("../../ui/src/dom.js");
const utils = require("../../ui/src/utils.js");
const util = require("../../tree/src/util.js");
const log = require("../../ui/src/log.js");
const XEUtils = require("xe-utils");
const index = require("../../input/index.js");
const index$1 = require("../../button/index.js");
const index$2 = require("../../tree/index.js");
const vn = require("../../ui/src/vn.js");
const config = require("../../../../@vxe-ui/core/es/src/config.js");
const i18n = require("../../../../@vxe-ui/core/es/src/i18n.js");
const useFns = require("../../../../@vxe-ui/core/es/src/useFns.js");
const event = require("../../../../@vxe-ui/core/es/src/event.js");
const icon = require("../../../../@vxe-ui/core/es/src/icon.js");
const index_esm = require("../../../../@vxe-ui/core/es/index.esm.js");
function getOptUniqueId() {
  return XEUtils.uniqueId("node_");
}
function createReactData() {
  return {
    initialized: false,
    searchValue: "",
    searchLoading: false,
    panelIndex: 0,
    panelStyle: {},
    panelPlacement: null,
    triggerFocusPanel: false,
    visiblePanel: false,
    isAniVisible: false,
    isActivated: false
  };
}
function createInternalData() {
  return {
    // hpTimeout: undefined,
    fullOptionList: [],
    fullNodeMaps: {}
  };
}
const VxeTreeSelectComponent = comp.defineVxeComponent({
  name: "VxeTreeSelect",
  props: {
    modelValue: [String, Number, Array],
    clearable: Boolean,
    placeholder: {
      type: String,
      default: () => XEUtils.eqNull(config.getConfig().treeSelect.placeholder) ? i18n.getI18n("vxe.base.pleaseSelect") : config.getConfig().treeSelect.placeholder
    },
    readonly: {
      type: Boolean,
      default: null
    },
    loading: Boolean,
    disabled: {
      type: Boolean,
      default: null
    },
    filterable: Boolean,
    filterConfig: Object,
    multiple: Boolean,
    className: [String, Function],
    /**
     * 已废弃，请使用 popupConfig.className
     * @deprecated
     */
    popupClassName: [String, Function],
    prefixIcon: String,
    placement: String,
    lazyOptions: Array,
    options: Array,
    optionProps: Object,
    /**
     * 已废弃，请使用 popupConfig.zIndex
     * @deprecated
     */
    zIndex: Number,
    size: {
      type: String,
      default: () => config.getConfig().treeSelect.size || config.getConfig().size
    },
    remote: Boolean,
    remoteConfig: Function,
    popupConfig: Object,
    treeConfig: Object,
    menuConfig: Object,
    virtualYConfig: Object,
    autoClose: {
      type: Boolean,
      default: () => config.getConfig().treeSelect.autoClose
    },
    showTotalButoon: {
      type: Boolean,
      default: () => config.getConfig().treeSelect.showTotalButoon
    },
    showCheckedButoon: {
      type: Boolean,
      default: () => config.getConfig().treeSelect.showCheckedButoon
    },
    showClearButton: {
      type: Boolean,
      default: () => config.getConfig().treeSelect.showClearButton
    },
    showExpandButton: {
      type: Boolean,
      default: () => config.getConfig().treeSelect.showExpandButton
    },
    transfer: {
      type: Boolean,
      default: null
    },
    /**
     * 已废弃，被 remote-config.queryMethod 替换
     * @deprecated
     */
    remoteMethod: Function
  },
  emits: [
    "update:modelValue",
    "change",
    "all-change",
    "clear",
    "blur",
    "focus",
    "click",
    "node-click"
  ],
  setup(props, context) {
    const { emit, slots } = context;
    const $xeModal = vue.inject("$xeModal", null);
    const $xeDrawer = vue.inject("$xeDrawer", null);
    const $xeTable = vue.inject("$xeTable", null);
    const $xeForm = vue.inject("$xeForm", null);
    const formItemInfo = vue.inject("xeFormItemInfo", null);
    const xID = XEUtils.uniqueId();
    const { computeSize } = useFns.useSize(props);
    const refElem = vue.ref();
    const refInput = vue.ref();
    const refInpSearch = vue.ref();
    const refTreeWrapper = vue.ref();
    const refOptionPanel = vue.ref();
    const refTree = vue.ref();
    const reactData = vue.reactive(createReactData());
    const internalData = createInternalData();
    const refMaps = {
      refElem
    };
    const computeFormReadonly = vue.computed(() => {
      const { readonly } = props;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.props.readonly;
        }
        return false;
      }
      return readonly;
    });
    const computeIsDisabled = vue.computed(() => {
      const { disabled } = props;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.props.disabled;
        }
        return false;
      }
      return disabled;
    });
    const computeBtnTransfer = vue.computed(() => {
      const { transfer } = props;
      const popupOpts = computePopupOpts.value;
      if (XEUtils.isBoolean(popupOpts.transfer)) {
        return popupOpts.transfer;
      }
      if (transfer === null) {
        const globalTransfer = config.getConfig().treeSelect.transfer;
        if (XEUtils.isBoolean(globalTransfer)) {
          return globalTransfer;
        }
        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
          return true;
        }
      }
      return transfer;
    });
    const computePopupOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().treeSelect.popupConfig, props.popupConfig);
    });
    const computeTreeOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().treeSelect.treeConfig, props.treeConfig, { data: void 0 });
    });
    const computeMenuOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().treeSelect.menuConfig, props.menuConfig);
    });
    const computeTreeNodeOpts = vue.computed(() => {
      const treeOpts = computeTreeOpts.value;
      return Object.assign({ isHover: true }, treeOpts.nodeConfig);
    });
    const computeTreeCheckboxOpts = vue.computed(() => {
      const treeOpts = computeTreeOpts.value;
      return Object.assign({
        showIcon: !!treeOpts.showCheckbox
      }, treeOpts.checkboxConfig, {
        trigger: "node"
      });
    });
    const computeTreeRadioOpts = vue.computed(() => {
      const treeOpts = computeTreeOpts.value;
      return Object.assign({
        showIcon: !!treeOpts.showRadio
      }, treeOpts.radioConfig, {
        trigger: "node"
      });
    });
    const computePropsOpts = vue.computed(() => {
      return props.optionProps || {};
    });
    const computeNodeKeyField = vue.computed(() => {
      const treeOpts = computeTreeOpts.value;
      return treeOpts.keyField || "id";
    });
    const computeLabelField = vue.computed(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.label || "label";
    });
    const computeValueField = vue.computed(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.value || "value";
    });
    const computeChildrenField = vue.computed(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.children || "children";
    });
    const computeParentField = vue.computed(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.parent || "parentField";
    });
    const computeHasChildField = vue.computed(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.hasChild || "hasChild";
    });
    const computeVirtualYOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().treeSelect.virtualYConfig, props.virtualYConfig);
    });
    const computeRemoteOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().treeSelect.remoteConfig, props.remoteConfig);
    });
    const computeFilterOpts = vue.computed(() => {
      const treeOpts = computeTreeOpts.value;
      return Object.assign({}, treeOpts.filterConfig, props.filterConfig);
    });
    const computeSelectLabel = vue.computed(() => {
      const { modelValue, lazyOptions } = props;
      const { fullNodeMaps } = internalData;
      const valueField = computeValueField.value;
      const labelField = computeLabelField.value;
      const selectVals = XEUtils.eqNull(modelValue) ? [] : XEUtils.isArray(modelValue) ? modelValue : [modelValue];
      return selectVals.map((val) => {
        const cacheItem = fullNodeMaps[val];
        if (cacheItem) {
          return cacheItem.item[labelField];
        }
        if (lazyOptions) {
          const lazyItem = lazyOptions.find((item) => item[valueField] === val);
          if (lazyItem) {
            return lazyItem[labelField];
          }
        }
        return val;
      }).join(", ");
    });
    const computePopupWrapperStyle = vue.computed(() => {
      const popupOpts = computePopupOpts.value;
      const { height, width } = popupOpts;
      const stys = {};
      if (width) {
        stys.width = dom.toCssUnit(width);
      }
      if (height) {
        stys.height = dom.toCssUnit(height);
        stys.maxHeight = dom.toCssUnit(height);
      }
      return stys;
    });
    const computeMaps = {};
    const $xeTreeSelect = {
      xID,
      props,
      context,
      reactData,
      internalData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, event.createEvent(evnt, { $treeSelect: $xeTreeSelect }, params));
    };
    const emitModel = (value) => {
      emit("update:modelValue", value);
    };
    const callSlot = (slotFunc, params) => {
      if (slotFunc) {
        if (XEUtils.isString(slotFunc)) {
          slotFunc = slots[slotFunc] || null;
        }
        if (XEUtils.isFunction(slotFunc)) {
          return vn.getSlotVNs(slotFunc(params));
        }
      }
      return [];
    };
    const treeSelectMethods = {
      dispatchEvent
    };
    const getNodeid = (option) => {
      const nodeKeyField = computeNodeKeyField.value;
      const nodeid = option[nodeKeyField];
      return nodeid ? encodeURIComponent(nodeid) : "";
    };
    const cacheDataMap = () => {
      const { options } = props;
      const treeOpts = computeTreeOpts.value;
      const nodeKeyField = computeNodeKeyField.value;
      const childrenField = computeChildrenField.value;
      const valueField = computeValueField.value;
      const { transform } = treeOpts;
      const nodeMaps = {};
      const keyMaps = {};
      const handleOptNode = (item, index2, items, path, parent, nodes) => {
        let nodeid = getNodeid(item);
        if (!nodeid) {
          nodeid = getOptUniqueId();
        }
        if (keyMaps[nodeid]) {
          log.errLog("vxe.error.repeatKey", [`[tree-select] ${nodeKeyField}`, nodeid]);
        }
        keyMaps[nodeid] = true;
        const value = item[valueField];
        if (nodeMaps[value]) {
          log.errLog("vxe.error.repeatKey", [`[tree-select] ${valueField}`, value]);
        }
        nodeMaps[value] = { item, index: index2, items, parent, nodes };
      };
      if (options) {
        if (transform) {
          options.forEach((item, index2, items) => {
            handleOptNode(item, index2, items, [], null, []);
          });
        } else {
          XEUtils.eachTree(options, handleOptNode, { children: childrenField });
        }
      }
      internalData.fullOptionList = options || [];
      internalData.fullNodeMaps = nodeMaps;
    };
    const updateZindex = () => {
      const popupOpts = computePopupOpts.value;
      const customZIndex = popupOpts.zIndex || props.zIndex;
      if (customZIndex) {
        reactData.panelIndex = XEUtils.toNumber(customZIndex);
      } else if (reactData.panelIndex < utils.getLastZIndex()) {
        reactData.panelIndex = utils.nextZIndex();
      }
    };
    const updatePlacement = () => {
      const { placement } = props;
      const { panelIndex } = reactData;
      const targetElem = refElem.value;
      const panelElem = refOptionPanel.value;
      const btnTransfer = computeBtnTransfer.value;
      const popupOpts = computePopupOpts.value;
      const handleStyle = () => {
        const ppObj = dom.updatePanelPlacement(targetElem, panelElem, {
          placement: popupOpts.placement || placement,
          teleportTo: btnTransfer
        });
        const panelStyle = Object.assign(ppObj.style, {
          zIndex: panelIndex
        });
        reactData.panelStyle = panelStyle;
        reactData.panelPlacement = ppObj.placement;
      };
      handleStyle();
      return vue.nextTick().then(handleStyle);
    };
    const showOptionPanel = () => {
      const { loading, remote, filterable } = props;
      const { fullOptionList } = internalData;
      const isDisabled = computeIsDisabled.value;
      const remoteOpts = computeRemoteOpts.value;
      if (!loading && !isDisabled) {
        clearTimeout(internalData.hpTimeout);
        if (!reactData.initialized) {
          reactData.initialized = true;
        }
        reactData.isActivated = true;
        reactData.isAniVisible = true;
        if (filterable) {
          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullOptionList.length) {
            handleSearchEvent();
          }
        }
        setTimeout(() => {
          reactData.visiblePanel = true;
          handleFocusSearch();
          updatePlacement();
        }, 10);
        updateZindex();
        updatePlacement();
      }
    };
    const hideOptionPanel = () => {
      reactData.visiblePanel = false;
      internalData.hpTimeout = setTimeout(() => {
        reactData.isAniVisible = false;
      }, 350);
    };
    const changeEvent = (evnt, selectValue, node) => {
      const value = XEUtils.isArray(selectValue) ? selectValue.map(util.deNodeValue) : util.deNodeValue(selectValue);
      emitModel(value);
      if (value !== props.modelValue) {
        dispatchEvent("change", { value, node, option: node }, evnt);
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
        }
      }
    };
    const clearValueEvent = (evnt, selectValue) => {
      changeEvent(evnt, selectValue, null);
      dispatchEvent("clear", { value: selectValue }, evnt);
    };
    const clearEvent = (params, evnt) => {
      clearValueEvent(evnt, null);
      hideOptionPanel();
    };
    const allCheckedPanelEvent = (params) => {
      const { $event } = params;
      const { multiple, autoClose } = props;
      const $tree = refTree.value;
      if (multiple) {
        if ($tree) {
          $tree.setAllCheckboxNode(true).then(({ checkNodeKeys, checkNodes }) => {
            changeEvent($event, checkNodeKeys, checkNodes[0]);
            dispatchEvent("all-change", { value: checkNodeKeys }, $event);
            if (autoClose) {
              hideOptionPanel();
            }
          });
        }
      }
    };
    const clearCheckedPanelEvent = (params) => {
      const { $event } = params;
      const { multiple, autoClose } = props;
      const $tree = refTree.value;
      if ($tree) {
        const value = multiple ? [] : null;
        $tree.clearCheckboxNode().then(() => {
          if (autoClose) {
            hideOptionPanel();
          }
        });
        changeEvent($event, value, null);
        dispatchEvent("clear", { value }, $event);
      }
    };
    const allExpandPanelEvent = () => {
      const $tree = refTree.value;
      if ($tree) {
        $tree.setAllExpandNode(true);
      }
    };
    const clearExpandPanelEvent = () => {
      const $tree = refTree.value;
      if ($tree) {
        $tree.clearAllExpandNode();
      }
    };
    const handleGlobalMousewheelEvent = (evnt) => {
      const { visiblePanel } = reactData;
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        if (visiblePanel) {
          const panelElem = refOptionPanel.value;
          if (dom.getEventTargetNode(evnt, panelElem).flag) {
            updatePlacement();
          } else {
            hideOptionPanel();
          }
        }
      }
    };
    const handleGlobalMousedownEvent = (evnt) => {
      const { visiblePanel } = reactData;
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const el = refElem.value;
        const panelElem = refOptionPanel.value;
        reactData.isActivated = dom.getEventTargetNode(evnt, el).flag || dom.getEventTargetNode(evnt, panelElem).flag;
        if (visiblePanel && !reactData.isActivated) {
          hideOptionPanel();
        }
      }
    };
    const handleGlobalBlurEvent = () => {
      const { visiblePanel, isActivated } = reactData;
      if (visiblePanel) {
        hideOptionPanel();
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
      if (visiblePanel || isActivated) {
        const $input = refInput.value;
        if ($input) {
          $input.blur();
        }
      }
    };
    const handleGlobalResizeEvent = () => {
      const { visiblePanel } = reactData;
      if (visiblePanel) {
        updatePlacement();
      }
    };
    const handleFocusSearch = () => {
      if (props.filterable) {
        vue.nextTick(() => {
          const inpSearch = refInpSearch.value;
          if (inpSearch) {
            inpSearch.focus();
          }
        });
      }
    };
    const focusEvent = (evnt) => {
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        if (!reactData.visiblePanel) {
          reactData.triggerFocusPanel = true;
          showOptionPanel();
          setTimeout(() => {
            reactData.triggerFocusPanel = false;
          }, 150);
        }
      }
      dispatchEvent("focus", {}, evnt);
    };
    const clickEvent = (evnt) => {
      togglePanelEvent(evnt);
      dispatchEvent("click", {}, evnt);
    };
    const blurEvent = (evnt) => {
      reactData.isActivated = false;
      dispatchEvent("blur", {}, evnt);
    };
    const modelSearchEvent = (value) => {
      reactData.searchValue = value;
    };
    const handleSearchEvent = () => {
      const { modelValue, remote, remoteMethod } = props;
      const { searchValue } = reactData;
      const remoteOpts = computeRemoteOpts.value;
      const queryMethod = remoteOpts.queryMethod || remoteMethod;
      if (remote && queryMethod && remoteOpts.enabled) {
        reactData.searchLoading = true;
        Promise.resolve(queryMethod({ $treeSelect: $xeTreeSelect, searchValue, value: modelValue })).then(() => vue.nextTick()).catch(() => vue.nextTick()).finally(() => {
          reactData.searchLoading = false;
        });
      }
    };
    const togglePanelEvent = (params) => {
      const { $event } = params;
      $event.preventDefault();
      if (reactData.triggerFocusPanel) {
        reactData.triggerFocusPanel = false;
      } else {
        if (reactData.visiblePanel) {
          hideOptionPanel();
        } else {
          showOptionPanel();
        }
      }
    };
    const nodeExpandEvent = () => {
      updatePlacement();
    };
    const nodeClickEvent = (params) => {
      const { $event } = params;
      dispatchEvent("node-click", params, $event);
    };
    const radioChangeEvent = (params) => {
      const { value, $event, node } = params;
      changeEvent($event, value, node);
      hideOptionPanel();
    };
    const checkboxChangeEvent = (params) => {
      const { value, $event, node } = params;
      changeEvent($event, value, node);
    };
    const loadSuccessEvent = () => {
      cacheDataMap();
    };
    const treeSelectPrivateMethods = {};
    Object.assign($xeTreeSelect, treeSelectMethods, treeSelectPrivateMethods);
    const renderVN = () => {
      const { className, modelValue, multiple, options, loading, menuConfig, filterable, showTotalButoon, showCheckedButoon, showClearButton, showExpandButton } = props;
      const { initialized, isActivated, isAniVisible, visiblePanel, searchValue } = reactData;
      const vSize = computeSize.value;
      const isDisabled = computeIsDisabled.value;
      const selectLabel = computeSelectLabel.value;
      const btnTransfer = computeBtnTransfer.value;
      const formReadonly = computeFormReadonly.value;
      const popupWrapperStyle = computePopupWrapperStyle.value;
      const headerSlot = slots.header;
      const footerSlot = slots.footer;
      const prefixSlot = slots.prefix;
      const popupOpts = computePopupOpts.value;
      const ppClassName = popupOpts.className || props.popupClassName;
      if (formReadonly) {
        return vue.h("div", {
          ref: refElem,
          class: ["vxe-tree-select--readonly", className]
        }, [
          vue.h("span", {
            class: "vxe-tree-select-label"
          }, selectLabel)
        ]);
      }
      const treeOpts = computeTreeOpts.value;
      const menuOpts = computeMenuOpts.value;
      const treeNodeOpts = computeTreeNodeOpts.value;
      const treeCheckboxOpts = computeTreeCheckboxOpts.value;
      const treeRadioOpts = computeTreeRadioOpts.value;
      const nodeKeyField = computeNodeKeyField.value;
      const labelField = computeLabelField.value;
      const valueField = computeValueField.value;
      const childrenField = computeChildrenField.value;
      const parentField = computeParentField.value;
      const hasChildField = computeHasChildField.value;
      const virtualYOpts = computeVirtualYOpts.value;
      const filterOpts = computeFilterOpts.value;
      const { slots: treeSlots } = treeOpts;
      const selectVals = XEUtils.eqNull(modelValue) ? [] : XEUtils.isArray(modelValue) ? modelValue : [modelValue];
      const treeScopedSlots = {};
      if (treeSlots) {
        const { icon: treeIconSlot, title: treeTitleSlot, extra: treeExtraSlot } = treeSlots;
        if (treeIconSlot) {
          treeScopedSlots.icon = (slotParams) => callSlot(treeIconSlot, slotParams);
        }
        if (treeTitleSlot) {
          treeScopedSlots.title = (slotParams) => callSlot(treeTitleSlot, slotParams);
        }
        if (treeExtraSlot) {
          treeScopedSlots.extra = (slotParams) => callSlot(treeExtraSlot, slotParams);
        }
      }
      return vue.h("div", {
        ref: refElem,
        class: ["vxe-tree-select", className ? XEUtils.isFunction(className) ? className({ $treeSelect: $xeTreeSelect }) : className : "", {
          [`size--${vSize}`]: vSize,
          "is--filterable": filterable,
          "is--visible": visiblePanel,
          "is--disabled": isDisabled,
          "is--loading": loading,
          "is--active": isActivated
        }]
      }, [
        vue.h(index.VxeInput, {
          ref: refInput,
          clearable: props.clearable,
          placeholder: loading ? i18n.getI18n("vxe.select.loadingText") : props.placeholder,
          editable: false,
          disabled: isDisabled,
          type: "text",
          prefixIcon: props.prefixIcon,
          suffixIcon: loading ? icon.getIcon().TREE_SELECT_LOADED : visiblePanel ? icon.getIcon().TREE_SELECT_OPEN : icon.getIcon().TREE_SELECT_CLOSE,
          modelValue: loading ? "" : selectLabel,
          title: selectLabel,
          onClear: clearEvent,
          onClick: clickEvent,
          onFocus: focusEvent,
          onBlur: blurEvent,
          onSuffixClick: togglePanelEvent
        }, prefixSlot ? {
          prefix: () => prefixSlot({})
        } : {}),
        vue.h(vue.Teleport, {
          to: "body",
          disabled: btnTransfer ? !initialized : true
        }, [
          vue.h("div", {
            ref: refOptionPanel,
            class: ["vxe-table--ignore-clear vxe-tree-select--panel", ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $treeSelect: $xeTreeSelect }) : ppClassName : "", {
              [`size--${vSize}`]: vSize,
              "is--transfer": btnTransfer,
              "ani--leave": !loading && isAniVisible,
              "ani--enter": !loading && visiblePanel
            }],
            placement: reactData.panelPlacement,
            style: reactData.panelStyle
          }, initialized ? [
            vue.h("div", {
              class: "vxe-tree-select--panel-wrapper"
            }, [
              filterable ? vue.h("div", {
                class: "vxe-tree-select--panel-search"
              }, [
                vue.h(index.VxeInput, {
                  ref: refInpSearch,
                  class: "vxe-tree-select-search--input",
                  modelValue: searchValue,
                  clearable: true,
                  disabled: false,
                  readonly: false,
                  placeholder: i18n.getI18n("vxe.treeSelect.search"),
                  prefixIcon: icon.getIcon().INPUT_SEARCH,
                  "onUpdate:modelValue": modelSearchEvent
                })
              ]) : index_esm.renderEmptyElement(),
              showTotalButoon || showCheckedButoon && multiple || showClearButton || showExpandButton || headerSlot ? vue.h("div", {
                class: "vxe-tree-select--panel-header"
              }, headerSlot ? headerSlot({}) : [
                vue.h("div", {
                  class: "vxe-tree-select--header-button"
                }, [
                  showTotalButoon ? vue.h("div", {
                    class: "vxe-tree-select--header-total"
                  }, i18n.getI18n("vxe.treeSelect.total", [selectVals.length])) : index_esm.renderEmptyElement(),
                  vue.h("div", {
                    class: "vxe-tree-select--header-btns"
                  }, [
                    showCheckedButoon && multiple ? vue.h(index$1.VxeButton, {
                      content: i18n.getI18n("vxe.treeSelect.allChecked"),
                      mode: "text",
                      onClick: allCheckedPanelEvent
                    }) : index_esm.renderEmptyElement(),
                    showClearButton ? vue.h(index$1.VxeButton, {
                      content: i18n.getI18n("vxe.treeSelect.clearChecked"),
                      mode: "text",
                      onClick: clearCheckedPanelEvent
                    }) : index_esm.renderEmptyElement(),
                    showExpandButton ? vue.h(index$1.VxeButton, {
                      content: i18n.getI18n("vxe.treeSelect.allExpand"),
                      mode: "text",
                      onClick: allExpandPanelEvent
                    }) : index_esm.renderEmptyElement(),
                    showExpandButton ? vue.h(index$1.VxeButton, {
                      content: i18n.getI18n("vxe.treeSelect.clearExpand"),
                      mode: "text",
                      onClick: clearExpandPanelEvent
                    }) : index_esm.renderEmptyElement()
                  ])
                ])
              ]) : index_esm.renderEmptyElement(),
              vue.h("div", {
                class: "vxe-tree-select--panel-body"
              }, [
                vue.h("div", {
                  ref: refTreeWrapper,
                  class: "vxe-tree-select-tree--wrapper",
                  style: popupWrapperStyle
                }, [
                  vue.h(index$2.VxeTree, {
                    ref: refTree,
                    class: "vxe-tree-select--tree",
                    height: popupOpts.height ? "100%" : treeOpts.height,
                    minHeight: treeOpts.minHeight,
                    maxHeight: popupOpts.height ? "" : treeOpts.maxHeight,
                    autoResize: true,
                    data: options,
                    indent: treeOpts.indent,
                    showRadio: !multiple,
                    radioConfig: treeRadioOpts,
                    checkNodeKey: multiple ? null : modelValue,
                    showCheckbox: !!multiple,
                    checkNodeKeys: multiple ? modelValue : null,
                    checkboxConfig: treeCheckboxOpts,
                    titleField: labelField,
                    valueField,
                    keyField: nodeKeyField,
                    childrenField: treeOpts.childrenField || childrenField,
                    parentField: treeOpts.parentField || parentField,
                    hasChildField: treeOpts.hasChildField || hasChildField,
                    accordion: treeOpts.accordion,
                    expandAll: treeOpts.expandAll,
                    expandNodeKeys: treeOpts.expandNodeKeys,
                    nodeConfig: treeNodeOpts,
                    lazy: treeOpts.lazy,
                    loadMethod: treeOpts.loadMethod,
                    toggleMethod: treeOpts.toggleMethod,
                    transform: treeOpts.transform,
                    trigger: treeOpts.trigger,
                    showIcon: treeOpts.showIcon,
                    showLine: treeOpts.showLine,
                    iconOpen: treeOpts.iconOpen,
                    iconLoaded: treeOpts.iconLoaded,
                    iconClose: treeOpts.iconClose,
                    filterValue: searchValue,
                    filterConfig: filterOpts,
                    menuConfig: menuConfig ? menuOpts : void 0,
                    virtualYConfig: virtualYOpts,
                    onNodeExpand: nodeExpandEvent,
                    onNodeClick: nodeClickEvent,
                    onRadioChange: radioChangeEvent,
                    onCheckboxChange: checkboxChangeEvent,
                    onLoadSuccess: loadSuccessEvent
                  }, treeScopedSlots)
                ])
              ]),
              footerSlot ? vue.h("div", {
                class: "vxe-tree-select--panel-footer"
              }, footerSlot({})) : index_esm.renderEmptyElement()
            ])
          ] : [])
        ])
      ]);
    };
    vue.watch(() => props.options, () => {
      cacheDataMap();
    });
    cacheDataMap();
    vue.onMounted(() => {
      event.globalEvents.on($xeTreeSelect, "mousewheel", handleGlobalMousewheelEvent);
      event.globalEvents.on($xeTreeSelect, "mousedown", handleGlobalMousedownEvent);
      event.globalEvents.on($xeTreeSelect, "blur", handleGlobalBlurEvent);
      event.globalEvents.on($xeTreeSelect, "resize", handleGlobalResizeEvent);
    });
    vue.onBeforeUnmount(() => {
      event.globalEvents.off($xeTreeSelect, "mousewheel");
      event.globalEvents.off($xeTreeSelect, "mousedown");
      event.globalEvents.off($xeTreeSelect, "blur");
      event.globalEvents.off($xeTreeSelect, "resize");
      XEUtils.assign(reactData, createReactData());
      XEUtils.assign(internalData, createInternalData());
    });
    vue.provide("$xeTreeSelect", $xeTreeSelect);
    $xeTreeSelect.renderVN = renderVN;
    return $xeTreeSelect;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = VxeTreeSelectComponent;
