/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var helper = require('../../chunks/helper.js');
var VueCompositionAPI = require('@vue/composition-api');
var isFunction = require('lodash/isFunction');
var hooks_lnode = require('../../hooks/lnode.js');
var utils_renderNode = require('../../utils/render-node.js');
var components_configProvider_useConfig = require('../config-provider/useConfig.js');
var hooks_useVirtualScroll = require('../../hooks/use-virtual-scroll.js');
var components_select_option = require('./option.js');
require('lodash/isEmpty');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../../hooks/render-lnode.js');
require('lodash');
require('vue');
require('../config-provider/context.js');
require('../../chunks/zh_CN.js');
require('../../utils/ripple.js');
require('../../chunks/set-style.js');
require('../../config.js');
require('../config-provider/config-receiver.js');
require('lodash/mergeWith');
require('../checkbox/index.js');
require('../../utils/map-props.js');
require('../../utils/with-install.js');
require('../checkbox/group.js');
require('lodash/intersection');
require('../../chunks/log.js');
require('../../chunks/_commonjsHelpers-2e6815bd.js');
require('../../utils/event.js');
require('../../utils/helper.js');
require('../../utils/mixins.js');
require('../checkbox/checkbox.js');
require('../checkbox/props.js');
require('../../hooks/use-lazy-load.js');
require('../../chunks/observe.js');
require('../../hooks/use-common-classname.js');
require('./utils.js');
require('lodash/cloneDeep');
require('./props.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);

const sizeClassMap = {
  small: "s",
  medium: "m",
  large: "l"
};
var SelectPanel = VueCompositionAPI.defineComponent({
  name: "LSelectPanel",
  components: {
    TOption: components_select_option["default"]
  },
  props: ["inputValue", "panelTopContent", "panelBottomContent", "size", "options", "empty", "filter", "loading", "loadingText", "multiple", "scroll", "creatable", "filterable"],
  setup(props) {
    var _props$scroll5;
    const {
      options,
      inputValue
    } = VueCompositionAPI.toRefs(props);
    const renderTNode = hooks_lnode.useLNodeJSX();
    const {
      t,
      global
    } = components_configProvider_useConfig.useConfig("select");
    const selectProvider = VueCompositionAPI.inject("tSelect");
    const COMPONENT_NAME = components_configProvider_useConfig.usePrefixClass("select");
    const panelContentRef = VueCompositionAPI.computed(() => selectProvider.getOverlayElm());
    const {
      type,
      rowHeight = 28,
      bufferSize = 20,
      isFixedRowHeight = false,
      threshold = 100
    } = props.scroll || {};
    const displayOptions = VueCompositionAPI.computed(() => {
      if (!inputValue.value || !(props.filterable || isFunction__default["default"](props.filter))) return options.value;
      const filterMethods = option => {
        var _option$label;
        if (isFunction__default["default"](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 = isCreateOptionShown.value ? 1 : 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: groupIndex + res.length
        });
      });
      return res;
    });
    const getDisplayOptions = () => {
      const arr = [];
      if (isCreateOptionShown.value) arr.push({
        label: String(inputValue.value),
        value: String(inputValue.value),
        isCreated: true
      });
      arr.push(...displayOptions.value);
      return arr;
    };
    const isCreateOptionShown = VueCompositionAPI.computed(() => !!(props.creatable && props.filterable && props.inputValue));
    const isEmpty = VueCompositionAPI.computed(() => !(displayOptions.value.length > 0));
    const isVirtual = VueCompositionAPI.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" ? hooks_useVirtualScroll["default"]({
      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;
      }
    };
    VueCompositionAPI.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);
    });
    VueCompositionAPI.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 utils_renderNode.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 utils_renderNode.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("t-option", helper.helper([{
        "attrs": {
          "index": 0,
          "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("t-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("t-option", helper.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();
  }
});

exports["default"] = SelectPanel;
//# sourceMappingURL=select-panel.js.map
