/**
 * ldesign v0.2.3
 * (c) 2022年9月24日 swimly
 * @license MIT
 */

import { h as helper } from '../../chunks/helper.js';
import { defineComponent, toRefs, inject, computed, onMounted, onBeforeUnmount } from '@vue/composition-api';
import isFunction from 'lodash/isFunction';
import { useLNodeJSX } from '../../hooks/lnode.js';
import { renderLNodeJSXDefault } from '../../utils/render-node.js';
import { useConfig, usePrefixClass } from '../config-provider/useConfig.js';
import _Option from './option.js';
import useVirtualScroll from '../../hooks/use-virtual-scroll.js';
import '../../chunks/_commonjsHelpers.js';
import 'lodash/isEmpty';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../hooks/render-lnode.js';
import 'lodash/isString';
import 'lodash/isObject';
import 'vue';
import '../config-provider/context.js';
import 'lodash';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';
import '../../utils/ripple.js';
import '../../chunks/set-style.js';
import '../../config.js';
import '../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import './props.js';
import '../checkbox/index.js';
import '../checkbox/group.js';
import 'lodash/intersection';
import '../checkbox/checkbox.js';
import '../checkbox/props.js';
import '../../utils/helper.js';
import '../../utils/event.js';
import '../../utils/mixins.js';
import '../../utils/map-props.js';
import '../../utils/with-install.js';
import '../checkbox/style';
import '../checkbox/type.js';
import '../../hooks/use-lazy-load.js';
import '../../chunks/observe.js';
import './utils.js';
import '../../hooks/use-common-classname.js';

const sizeClassMap = {
  small: "s",
  medium: "m",
  large: "l"
};
var SelectPanel = defineComponent({
  name: "LSelectPanel",
  components: {
    LOption: _Option
  },
  props: ["inputValue", "panelTopContent", "panelBottomContent", "size", "options", "empty", "filter", "loading", "loadingText", "multiple", "scroll", "creatable", "filterable"],

  setup(props) {
    var _props$scroll5;

    const {
      options,
      inputValue
    } = toRefs(props);
    const renderTNode = useLNodeJSX();
    const {
      t,
      global
    } = useConfig("select");
    const selectProvider = inject("tSelect");
    const COMPONENT_NAME = usePrefixClass("select");
    const panelContentRef = computed(() => selectProvider.getOverlayElm());
    const {
      type,
      rowHeight = 28,
      bufferSize = 20,
      isFixedRowHeight = false,
      threshold = 100
    } = props.scroll || {};
    const displayOptions = computed(() => {
      if (!inputValue.value || !(props.filterable || isFunction(props.filter))) return options.value;

      const filterMethods = option => {
        var _option$label;

        if (isFunction(props.filter)) {
          return props.filter(`${props.inputValue}`, option);
        }

        return ((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.indexOf(`${props.inputValue}`)) > -1;
      };

      const res = [];
      let groupIndex = 0;
      props.options.forEach(option => {
        if (option.group && option.children) {
          res.push({ ...option,
            children: option.children.filter(filterMethods).reduce((pre, cur) => {
              pre.push({ ...cur,
                index: groupIndex
              });
              groupIndex += 1;
              return pre;
            }, [])
          });
        }

        if (filterMethods(option)) {
          res.push({ ...option,
            index: res.length
          });
        }
      });
      return res;
    });

    const getDisplayOptions = () => displayOptions.value;

    const isCreateOptionShown = computed(() => props.creatable && props.filterable && props.inputValue);
    const isEmpty = computed(() => !(displayOptions.value.length > 0));
    const isVirtual = computed(() => {
      var _props$scroll, _props$options, _props$scroll2;

      return ((_props$scroll = props.scroll) === null || _props$scroll === void 0 ? void 0 : _props$scroll.type) === "virtual" && ((_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.length) > (((_props$scroll2 = props.scroll) === null || _props$scroll2 === void 0 ? void 0 : _props$scroll2.threshold) || 100);
    });
    const {
      trs = null,
      visibleData = null,
      handleScroll: handleVirtualScroll = null,
      scrollHeight = null,
      translateY = null,
      handleRowMounted = null
    } = type === "virtual" ? useVirtualScroll({
      container: panelContentRef,
      data: displayOptions,
      fixedHeight: isFixedRowHeight,
      lineHeight: rowHeight,
      bufferSize,
      threshold
    }) : {};
    let lastScrollY = -1;

    const onInnerVirtualScroll = e => {
      if (!isVirtual.value) {
        return;
      }

      const target = e.target || e.srcElement;
      const top = target.scrollTop;

      if (Math.abs(lastScrollY - top) > 5) {
        handleVirtualScroll();
        lastScrollY = top;
      } else {
        lastScrollY = -1;
      }
    };

    onMounted(() => {
      var _props$scroll3;

      if (((_props$scroll3 = props.scroll) === null || _props$scroll3 === void 0 ? void 0 : _props$scroll3.type) === "virtual") {
        selectProvider.getOverlayElm().addEventListener("scroll", onInnerVirtualScroll);
      }
    });
    onBeforeUnmount(() => {
      var _props$scroll4;

      if (((_props$scroll4 = props.scroll) === null || _props$scroll4 === void 0 ? void 0 : _props$scroll4.type) === "virtual") {
        selectProvider.getOverlayElm().removeEventListener("scroll", onInnerVirtualScroll);
      }
    });
    return {
      t,
      global,
      isEmpty,
      renderTNode,
      selectProvider,
      isCreateOptionShown,
      trs,
      isVirtual,
      onInnerVirtualScroll,
      visibleData,
      scrollHeight,
      translateY,
      scrollType: (_props$scroll5 = props.scroll) === null || _props$scroll5 === void 0 ? void 0 : _props$scroll5.type,
      handleRowMounted,
      bufferSize,
      threshold,
      displayOptions,
      getDisplayOptions,
      componentName: COMPONENT_NAME
    };
  },

  methods: {
    renderEmptyContent() {
      const h = this.$createElement;
      const {
        empty,
        t,
        global
      } = this;

      if (empty && typeof empty === "string") {
        return h("div", {
          "class": `${this.componentName}__empty`
        }, [empty]);
      }

      return renderLNodeJSXDefault(this, "empty", h("div", {
        "class": `${this.componentName}__empty`
      }, [t(global.empty)]));
    },

    renderLoadingContent() {
      const h = this.$createElement;
      const {
        loadingText,
        t,
        global
      } = this;

      if (loadingText && typeof loadingText === "string") {
        return h("div", {
          "class": `${this.componentName}__loading-tips`
        }, [loadingText]);
      }

      return renderLNodeJSXDefault(this, "loadingText", h("div", {
        "class": `${this.componentName}__loading-tips`
      }, [t(global.loadingText)]));
    },

    renderCreateOption() {
      const h = this.$createElement;
      const {
        inputValue,
        trs,
        scrollType,
        isVirtual,
        handleRowMounted,
        bufferSize
      } = this;
      const on = isVirtual ? {
        onRowMounted: handleRowMounted
      } : {};
      return h("ul", {
        "class": [`${this.componentName}__create-option`, `${this.componentName}__list`]
      }, [h("l-option", helper([{
        "attrs": {
          "isCreatedOption": true,
          "value": inputValue,
          "label": inputValue,
          "trs": trs,
          "scrollType": scrollType,
          "isVirtual": isVirtual,
          "bufferSize": bufferSize
        },
        "class": `${this.componentName}__create-option--special`
      }, {
        "on": on
      }]))]);
    },

    renderOptionsContent(options) {
      const h = this.$createElement;
      const {
        multiple,
        trs,
        scrollType,
        isVirtual,
        handleRowMounted,
        bufferSize
      } = this;
      const on = isVirtual ? {
        onRowMounted: handleRowMounted
      } : {};
      return h("ul", {
        "class": `${this.componentName}__list`
      }, [options.map((item, index) => {
        if (item.group) {
          return h("l-option-group", {
            "attrs": {
              "label": item.group,
              "divider": item.divider
            }
          }, [this.renderOptionsContent(item.children)]);
        }

        const scrollProps = isVirtual ? {
          rowIndex: item.$index,
          trs,
          scrollType,
          isVirtual,
          bufferSize
        } : {
          key: index
        };
        return h("l-option", helper([{
          "class": item.class,
          "style": item.style,
          "props": { ...{ ...item,
              ...scrollProps
            }
          },
          "attrs": {
            "multiple": multiple
          },
          "scopedSlots": {
            default: item.slots
          },
          "key": `${item.$index || ""}_${index}`
        }, {
          "on": on
        }]));
      })]);
    },

    renderPanelContent() {
      let innerStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      const h = this.$createElement;
      const {
        renderTNode,
        isEmpty,
        isCreateOptionShown,
        size,
        loading,
        isVirtual,
        visibleData,
        displayOptions
      } = this;
      return h("div", {
        "class": [`${this.componentName}__dropdown-inner`, `${this.componentName}__dropdown-inner--size-${sizeClassMap[size]}`],
        "style": innerStyle
      }, [renderTNode("panelTopContent"), isCreateOptionShown && this.renderCreateOption(), loading && this.renderLoadingContent(), !loading && isEmpty && !isCreateOptionShown && this.renderEmptyContent(), !loading && !isEmpty && this.renderOptionsContent(isVirtual && visibleData ? visibleData : displayOptions), renderTNode("panelBottomContent")]);
    }

  },

  render() {
    const h = arguments[0];
    const {
      translateY,
      scrollHeight,
      isVirtual
    } = this;

    if (isVirtual) {
      const cursorTranslate = `translate(0, ${scrollHeight}px)`;
      const cursorTranslateStyle = {
        position: "absolute",
        width: "1px",
        height: "1px",
        transition: "transform 0.2s",
        transform: cursorTranslate,
        "-ms-transform": cursorTranslate,
        "-moz-transform": cursorTranslate,
        "-webkit-transform": cursorTranslate
      };
      const translate = `translate(0, ${translateY}px)`;
      const virtualStyle = {
        transform: translate,
        "-ms-transform": translate,
        "-moz-transform": translate,
        "-webkit-transform": translate
      };
      return h("div", [h("div", {
        "style": { ...cursorTranslateStyle
        }
      }), this.renderPanelContent(virtualStyle)]);
    }

    return this.renderPanelContent();
  }

});

export { SelectPanel as default };
//# sourceMappingURL=select-panel.js.map
