/**
 * ldesign v0.2.22
 * (c) 2022/12/7 16:21 built by swimly
 * @license MIT
 */

import { h as helper } from '../../_chunks/dep-b0f1ed22.js';
import { defineComponent, ref, toRefs, watch, computed, onMounted } from '@vue/composition-api';
import isArray from 'lodash/isArray';
import isEmpty from 'lodash/isEmpty';
import isBoolean from 'lodash/isBoolean';
import isFunction from 'lodash/isFunction';
import isNil from 'lodash/isNil';
import { Tree } from '../tree/index.js';
import { SelectInput } from '../select-input/index.js';
import FakeArrow from '../common/fake-arrow.js';
import { usePrefixClass } from '../../hooks/useConfig.js';
import useFormDisabled from '../../hooks/useFormDisabled.js';
import { useLNodeJSX, useLNodeDefault } from '../../hooks/lnode.js';
import useVModel from '../../hooks/useVModel.js';
import useDefaultValue from '../../hooks/useDefaultValue.js';
import props from './props.js';
import { useConfig } from '../config-provider/useConfig.js';
import '../../utils/map-props.js';
import 'vue';
import '../../utils/withInstall.js';
import 'lodash/capitalize';
import '../../config.js';
import '../tree/tree.js';
import 'lodash/upperFirst';
import '../../utils/render-node.js';
import 'lodash';
import '../tree/props.js';
import '../tree/hooks/useTreeStore.js';
import 'lodash/pick';
import '../../_chunks/dep-5bab082b.js';
import '../../_chunks/dep-aacc31a3.js';
import '../../_chunks/dep-a2743d97.js';
import '../../_chunks/dep-25603871.js';
import '../../_chunks/dep-128cad98.js';
import '../../_chunks/dep-52c80d08.js';
import '../../_chunks/dep-102361be.js';
import '../../_chunks/dep-c3acb800.js';
import '../../_chunks/dep-387c3c4b.js';
import '../../_chunks/dep-eaa95999.js';
import '../../_chunks/dep-40693b6f.js';
import '../tree/hooks/useCache.js';
import '../tree/hooks/useTreeAction.js';
import '../tree/utils.js';
import 'lodash/camelCase';
import '../tree/hooks/useTreeNodes.js';
import '../tree/tree-item.js';
import '../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import 'lodash/merge';
import '../../_chunks/dep-b4fd1955.js';
import '../../utils/ripple.js';
import '../../_chunks/dep-c68dc4b6.js';
import '../tree/hooks/useTreeItem.js';
import '../tree/hooks/useItemEvents.js';
import '../tree/hooks/useRenderIcon.js';
import '@ldesign/icons-vue';
import '../../hooks/useGlobalIcon.js';
import '../loading/index.js';
import '../loading/loading.js';
import '../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../utils/easing.js';
import '../../utils/transfer-dom.js';
import '../../utils/mixins.js';
import '../loading/props.js';
import '../loading/icon/gradient.js';
import '../../_chunks/dep-1a6bca30.js';
import '../loading/plugin.js';
import '../tree/hooks/useRenderLabel.js';
import '../checkbox/index.js';
import '../checkbox/group.js';
import 'lodash/intersection';
import '../../utils/event.js';
import '../../utils/helper.js';
import '../checkbox/checkbox.js';
import '../checkbox/props.js';
import '../tree/hooks/useRenderLine.js';
import '../tree/hooks/useRenderOperations.js';
import '../tree/hooks/useDraggable.js';
import 'lodash/throttle';
import '../tree/hooks/useTreeEvents.js';
import '../tree/hooks/useDragHandle.js';
import '../select-input/select-input.js';
import '../popup/index.js';
import '../popup/popup.js';
import '@popperjs/core';
import '../popup/props.js';
import '../popup/container.js';
import '../select-input/props.js';
import '../select-input/hooks/use-single.js';
import 'lodash/isObject';
import '../input/index.js';
import '../input/input.js';
import 'lodash/kebabCase';
import '../input/props.js';
import '../input/group.js';
import '../select-input/hooks/use-multiple.js';
import '../tag-input/index.js';
import '../tag-input/tag-input.js';
import '../tag-input/props.js';
import '../tag-input/hooks/use-tag-scroll.js';
import '../tag-input/hooks/use-tag-list.js';
import '../tag/index.js';
import '../tag/tag.js';
import '../tag/props.js';
import '../tag/check-tag.js';
import '../tag-input/hooks/use-hover.js';
import '../tag-input/hooks/use-drag-sorter.js';
import '../../hooks/render-lnode.js';
import '../select-input/hooks/use-overlay-innerstyle.js';

var _TreeSelect = defineComponent({
  name: "LTreeSelect",
  props: {
    ...props
  },
  setup(props2, _ref) {
    let {
      emit
    } = _ref;
    const classPrefix = usePrefixClass();
    const {
      global
    } = useConfig("treeSelect");
    const {
      formDisabled
    } = useFormDisabled();
    const treeRef = ref(null);
    const filterByText = ref(null);
    const activated = ref([]);
    const expanded = ref([]);
    const nodeInfo = ref(null);
    const treeKey = ref(0);
    const {
      value,
      popupVisible,
      inputValue
    } = toRefs(props2);
    const [treeSelectValue, setTreeSelectValue] = useVModel(value, props2.defaultValue, props2.onChange, "change");
    const [innerVisible, setInnerVisible] = useDefaultValue(popupVisible, false, props2.onPopupVisibleChange, "popupVisible", "popup-visible-change");
    const [innerInputValue, setInnerInputValue] = useDefaultValue(inputValue, props2.defaultInputValue, props2.onInputChange, "inputValue", "input-change");
    watch(treeSelectValue, async () => {
      await changeNodeInfo();
      if (!props2.multiple) activated.value = nodeInfo.value ? [nodeInfo.value.value] : [];
    });
    watch(() => props2.data, async () => {
      await changeNodeInfo();
      treeRerender();
    });
    const tDisabled = computed(() => formDisabled.value || props2.disabled);
    const inputPlaceholder = computed(() => innerVisible.value && nodeInfo.value?.label || props2.placeholder || global.value.placeholder);
    const popupClass = computed(() => [`${classPrefix.value}-select__dropdown`, "narrow-scrollbar"]);
    const dropdownInnerSize = computed(() => ({
      small: "s",
      medium: "m",
      large: "l"
    })[props2.size]);
    const isObjectValue = computed(() => props2.valueType === "object");
    const checked = computed(() => {
      if (props2.multiple) {
        if (isObjectValue.value) {
          return isArray(treeSelectValue.value) ? treeSelectValue.value.map(item => item.value) : [];
        }
        return isArray(treeSelectValue.value) ? treeSelectValue.value.map(item => item) : [];
      }
      return [];
    });
    const multiLimitDisabled = computed(() => props2.multiple && !!props2.max && isArray(treeSelectValue.value) && props2.max <= treeSelectValue.value.length);
    const realLabel = computed(() => {
      if (!isEmpty(props2.treeProps) && !isEmpty(props2.treeProps.keys)) return props2.treeProps.keys.label || "label";
      return "label";
    });
    const realValue = computed(() => {
      if (!isEmpty(props2.treeProps) && !isEmpty(props2.treeProps.keys)) return props2.treeProps.keys.value || "value";
      return "value";
    });
    const realChildren = computed(() => {
      if (!isEmpty(props2.treeProps) && !isEmpty(props2.treeProps.keys)) return props2.treeProps.keys.children || "children";
      return "children";
    });
    onMounted(async () => {
      if (!treeSelectValue.value && props2.defaultValue) await change(props2.defaultValue, null, "uncheck");
      if (isObjectValue.value) {
        activated.value = isArray(treeSelectValue.value) ? treeSelectValue.value.map(item => item.value) : [treeSelectValue.value.value];
      } else {
        activated.value = isArray(treeSelectValue.value) ? treeSelectValue.value : [treeSelectValue.value];
      }
      changeNodeInfo();
    });
    const change = (valueParam, node, trigger) => {
      setTreeSelectValue(valueParam, {
        node,
        trigger
      });
      changeNodeInfo();
    };
    const clear = content => {
      const defaultValue = props2.multiple ? [] : "";
      activated.value = [];
      change(defaultValue, null, "clear");
      props2.onClear?.({
        e: content.e
      });
      emit("clear", {
        e: content.e
      });
    };
    const treeNodeChange = (valueParam, context) => {
      let current = valueParam;
      if (isObjectValue.value) current = valueParam.map(nodeValue => getTreeNode(props2.data, nodeValue));
      change(current, context.node, "check");
    };
    const treeNodeActive = (valueParam, context) => {
      if (props2.multiple) return;
      setInnerVisible(false, {});
      if (treeSelectValue.value === context.node.data[realValue.value]) return;
      let current = valueParam;
      if (isObjectValue.value) {
        const nodeValue = isEmpty(valueParam) ? "" : valueParam[0];
        current = getTreeNode(props2.data, nodeValue);
      } else {
        current = isEmpty(valueParam) ? "" : valueParam[0];
      }
      change(current, context.node, "check");
      activated.value = valueParam;
    };
    const treeNodeExpand = valueParam => {
      expanded.value = valueParam;
    };
    const treeNodeLoad = () => {
      changeNodeInfo();
    };
    const inputChange = value2 => {
      const searchValue = String(value2);
      if (!innerVisible.value) {
        props2.onSearch?.(searchValue);
        emit("search", searchValue);
        return;
      }
      setInnerInputValue(value2);
      if (!value2) {
        filterByText.value = null;
        return null;
      }
      filterByText.value = node => {
        if (isFunction(props2.filter)) {
          const filter = props2.filter(searchValue, node);
          if (isBoolean(filter)) return filter;
        }
        return node.data[realLabel.value].includes(value2);
      };
      props2.onSearch?.(searchValue);
      emit("search", searchValue);
    };
    const tagChange = (value2, context) => {
      const {
        trigger,
        index
      } = context;
      if (["tag-remove", "backspace"].includes(trigger)) isArray(treeSelectValue.value) && treeSelectValue.value.splice(index, 1);
      props2.onRemove?.({
        value: value2,
        data: null,
        e: context && context.e
      });
      emit("remove", {
        value: value2,
        data: null,
        e: context && context.e
      });
      change(treeSelectValue.value, null, trigger);
    };
    const changeNodeInfo = async () => {
      await treeSelectValue.value;
      if (!props2.multiple) {
        if (treeSelectValue.value || treeSelectValue.value === 0) nodeInfo.value = getSingleNodeInfo();else nodeInfo.value = "";
      } else if (props2.multiple) {
        if (isArray(treeSelectValue.value)) nodeInfo.value = getMultipleNodeInfo();else nodeInfo.value = [];
      } else {
        nodeInfo.value = null;
      }
    };
    const getSingleNodeInfo = () => {
      const nodeValue = isObjectValue.value ? treeSelectValue.value.value : treeSelectValue.value;
      if (treeRef.value && props2.treeProps?.load) {
        if (!isEmpty(props2.data)) {
          const node2 = treeRef.value.getItem(nodeValue);
          if (node2) return {
            label: node2.data[realLabel.value],
            value: node2.data[realValue.value]
          };
        }
        return {
          label: nodeValue,
          value: nodeValue
        };
      }
      const node = getTreeNode(props2.data, nodeValue);
      if (!node) return {
        label: nodeValue,
        value: nodeValue
      };
      return node;
    };
    const getMultipleNodeInfo = () => treeSelectValue.value.map(value2 => {
      const nodeValue = isObjectValue.value ? value2.value : value2;
      if (treeRef.value && props2.treeProps?.load) {
        if (!isEmpty(props2.data)) {
          const node2 = treeRef.value.getItem(nodeValue);
          if (node2) return {
            label: node2.data[realLabel.value],
            value: node2.data[realValue.value]
          };
        }
        return {
          label: nodeValue,
          value: nodeValue
        };
      }
      const node = getTreeNode(props2.data, nodeValue);
      if (!node) return {
        label: nodeValue,
        value: nodeValue
      };
      return node;
    });
    const getTreeNode = (data, targetValue) => {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i][realValue.value] === targetValue) return {
          label: data[i][realLabel.value],
          value: data[i][realValue.value]
        };
        if (data[i]?.[realChildren.value]) {
          const result = getTreeNode(data[i]?.[realChildren.value], targetValue);
          if (!isNil(result)) return result;
        }
      }
      return null;
    };
    const treeRerender = () => {
      treeKey.value += 1;
    };
    return {
      innerVisible,
      classPrefix,
      nodeInfo,
      inputPlaceholder,
      popupClass,
      clear,
      setInnerVisible,
      tagChange,
      treeKey,
      treeRef,
      checked,
      innerInputValue,
      tDisabled,
      filterByText,
      activated,
      realLabel,
      realValue,
      inputChange,
      dropdownInnerSize,
      global,
      treeNodeChange,
      treeNodeExpand,
      treeNodeActive,
      multiLimitDisabled,
      treeNodeLoad,
      expanded,
      emit
    };
  },
  methods: {
    renderSuffixIcon() {
      const h = this.$createElement;
      return h(FakeArrow, {
        "attrs": {
          "isActive": this.innerVisible,
          "disabled": this.disabled,
          "overlayClassName": {
            [`${this.classPrefix}-fake-arrow--highlight`]: this.innerVisible,
            [`${this.classPrefix}-fake-arrow--disable`]: this.disabled
          }
        }
      });
    }
  },
  render() {
    const h = arguments[0];
    const renderTNodeJSX = useLNodeJSX();
    const renderDefaultTNode = useLNodeDefault();
    return h(SelectInput, helper([{}, {
      class: `${this.classPrefix}-tree-select`,
      props: {
        value: this.nodeInfo,
        inputValue: this.innerVisible ? this.innerInputValue : "",
        popupVisible: this.innerVisible,
        disabled: this.tDisabled,
        multiple: this.multiple,
        loading: this.loading,
        clearable: this.clearable,
        autoWidth: this.autoWidth,
        borderless: this.borderless,
        readonly: this.readonly,
        placeholder: this.inputPlaceholder,
        allowInput: this.filterable || isFunction(this.filter),
        minCollapsedNum: this.minCollapsedNum,
        popupProps: {
          overlayClassName: this.popupClass,
          ...this.popupProps
        },
        inputProps: {
          size: this.size,
          ...this.inputProps
        },
        tagInputProps: {
          size: this.size
        },
        tagProps: {
          maxWidth: 300,
          ...this.tagProps
        },
        label: () => renderTNodeJSX("prefixIcon"),
        suffixIcon: this.renderSuffixIcon,
        onClear: this.clear,
        onBlur: (value, context) => {
          this.onBlur?.({
            value,
            e: context.e
          });
          this.emit("blur", {
            value,
            e: context.e
          });
        },
        onFocus: (value, context) => {
          this.onFocus?.({
            value,
            e: context.e
          });
          this.emit("focus", {
            value,
            e: context.e
          });
        },
        onInputChange: this.inputChange,
        onTagChange: this.tagChange,
        onPopupVisibleChange: (state, context) => this.setInnerVisible(state, context),
        valueDisplay: () => renderTNodeJSX("valueDisplay", {
          params: this.multiple ? {
            value: this.nodeInfo,
            onClose: (value, context) => {
              this.tagChange(value, context);
            }
          } : {
            value: this.nodeInfo || {
              [this.realLabel]: "",
              [this.realValue]: void 0
            }
          }
        }),
        panel: () => h("div", {
          "class": [`${this.classPrefix}-select__dropdown-inner`, `${this.classPrefix}-select__dropdown-inner--size-${this.dropdownInnerSize}`]
        }, [this.loading && !this.tDisabled ? h("p", {
          "class": [`${this.classPrefix}-select-loading-tips`, `${this.classPrefix}-select__right-icon-polyfill`]
        }, [renderDefaultTNode("loadingText", {
          defaultNode: h("div", {
            "class": `${this.classPrefix}-select__empty`
          }, [this.global.loadingText])
        })]) : null, !this.loading ? h(Tree, {
          "props": {
            ...{
              ref: this.treeRef,
              key: this.treeKey,
              value: [...this.checked],
              hover: true,
              data: this.data,
              activable: !this.multiple,
              checkable: this.multiple,
              disabled: this.tDisabled || this.multiLimitDisabled,
              size: this.size,
              filter: this.filterByText,
              icon: !this.filterByText,
              actived: this.activated,
              expanded: this.expanded,
              activeMultiple: this.multiple,
              onChange: this.treeNodeChange,
              onActive: this.treeNodeActive,
              onExpand: this.treeNodeExpand,
              onLoad: this.treeNodeLoad,
              expandOnClickNode: true,
              empty: () => renderDefaultTNode("empty", {
                defaultNode: h("div", {
                  "class": `${this.classPrefix}-select__empty`
                }, [this.global.empty])
              }),
              ...this.treeProps
            }
          }
        }) : null]),
        collapsedItems: () => renderTNodeJSX("collapsedItems"),
        ...this.selectInputProps
      }
    }]));
  }
});

export { _TreeSelect as default };
//# sourceMappingURL=tree-select.js.map
