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

'use strict';

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

var VueCompositionAPI = require('@vue/composition-api');
var utils_renderNode = require('../../utils/render-node.js');
var utils_ripple = require('../../utils/ripple.js');
var components_configProvider_configReceiver = require('../config-provider/config-receiver.js');
var components_checkbox_index = require('../checkbox/index.js');
var hooks_useLazyLoad = require('../../hooks/use-lazy-load.js');
var components_configProvider_useConfig = require('../config-provider/useConfig.js');
var hooks_useCommonClassname = require('../../hooks/use-common-classname.js');
var components_select_utils = require('./utils.js');
var components_select_props = require('./props.js');
require('vue');
require('lodash');
require('../../chunks/set-style.js');
require('../../config.js');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('../../chunks/zh_CN.js');
require('../../utils/map-props.js');
require('../../utils/with-install.js');
require('../checkbox/group.js');
require('../../chunks/helper.js');
require('lodash/intersection');
require('../../chunks/log.js');
require('../../chunks/_commonjsHelpers-2e6815bd.js');
require('../../utils/event.js');
require('../../utils/helper.js');
require('lodash/camelCase');
require('../../utils/mixins.js');
require('../checkbox/checkbox.js');
require('../checkbox/props.js');
require('../../chunks/observe.js');
require('lodash/cloneDeep');

const keepAnimationMixins = components_configProvider_configReceiver.getKeepAnimationMixins();
var _Option = VueCompositionAPI.defineComponent({
  name: "LOption",
  components: {
    TCheckbox: components_checkbox_index.Checkbox
  },
  directives: {
    Ripple: utils_ripple["default"]
  },
  mixins: [keepAnimationMixins],
  props: {
    ...components_select_props.SelectOptionProps,
    isCreatedOption: Boolean,
    multiple: Boolean,
    rowIndex: Number,
    trs: Map,
    scrollType: String,
    isVirtual: Boolean,
    bufferSize: Number,
    index: Number
  },
  setup(props2, context) {
    const selectProvider = VueCompositionAPI.inject("tSelect");
    const optionNode = VueCompositionAPI.ref(null);
    const {
      sizeClassNames,
      statusClassNames
    } = hooks_useCommonClassname["default"]();
    const {
      classPrefix
    } = components_configProvider_useConfig.useConfig("classPrefix");
    const {
      value,
      label,
      disabled,
      panelElement,
      scrollType,
      bufferSize,
      index,
      multiple,
      isCreatedOption
    } = VueCompositionAPI.toRefs(props2);
    const {
      hasLazyLoadHolder = null,
      tRowHeight = null
    } = hooks_useLazyLoad["default"](panelElement, optionNode, VueCompositionAPI.reactive({
      type: scrollType,
      bufferSize,
      rowIndex: props2.rowIndex
    }));
    const isHover = VueCompositionAPI.ref(false);
    const formDisabled = VueCompositionAPI.ref(void 0);
    const isDisabled = VueCompositionAPI.computed(() => formDisabled.value || disabled.value || selectProvider.isReachMaxLimit.value);
    const isSelected = VueCompositionAPI.computed(() => {
      var _selectProvider$selec;
      return multiple.value ? (_selectProvider$selec = selectProvider.selectValue.value) === null || _selectProvider$selec === void 0 ? void 0 : _selectProvider$selec.includes(props2.value) : selectProvider.selectValue.value === props2.value;
    });
    const mouseEvent = v => {
      isHover.value = v;
    };
    const labelText = VueCompositionAPI.computed(() => label.value || value.value);
    const classes = VueCompositionAPI.computed(() => [`${classPrefix.value}-select-option`, sizeClassNames[selectProvider && selectProvider.size.value], {
      [statusClassNames.disabled]: isDisabled.value,
      [statusClassNames.selected]: isSelected.value,
      [`${classPrefix.value}-select-option__hover`]: (isHover.value || selectProvider.hoverIndex.value === index.value) && !isDisabled.value && !isSelected.value
    }]);
    const handleClick = e => {
      if (multiple.value || isDisabled.value) return;
      e.stopPropagation();
      if (isCreatedOption.value) {
        var _selectProvider$handl;
        (_selectProvider$handl = selectProvider.handleCreate) === null || _selectProvider$handl === void 0 ? void 0 : _selectProvider$handl.call(selectProvider, value.value);
        if (selectProvider.multiple.value) {
          const newValue = components_select_utils.getNewMultipleValue(selectProvider.selectValue.value, value.value);
          selectProvider.handleValueChange(newValue.value, {
            e,
            trigger: "check"
          }, value.value);
          return;
        }
      }
      selectProvider.handleValueChange(value.value, {
        e,
        trigger: "check"
      }, value.value);
      selectProvider.handlePopupVisibleChange(false, {
        e
      });
    };
    const handleCheckboxClick = (val, context2) => {
      const newValue = components_select_utils.getNewMultipleValue(selectProvider.selectValue.value, value.value);
      selectProvider.handleValueChange(newValue.value, {
        e: context2.e,
        trigger: val ? "check" : "uncheck"
      }, value.value);
      if (!selectProvider.reserveKeyword.value) selectProvider.handlerInputChange("");
    };
    VueCompositionAPI.onMounted(() => {
      const {
        trs,
        rowIndex,
        scrollType: scrollType2,
        isVirtual
      } = props2;
      if (scrollType2 === "virtual") {
        if (isVirtual) {
          trs.set(rowIndex, optionNode.value);
          context.emit("onRowMounted");
        }
      }
    });
    VueCompositionAPI.onBeforeUnmount(() => {
      if (props2.isVirtual) {
        const {
          trs,
          rowIndex
        } = props2;
        trs.delete(rowIndex);
      }
    });
    return {
      isHover,
      isSelected,
      mouseEvent,
      classes,
      selectProvider,
      labelText,
      optionNode,
      tRowHeight,
      hasLazyLoadHolder,
      handleClick,
      handleCheckboxClick
    };
  },
  render() {
    const h = arguments[0];
    const {
      classes,
      multiple,
      labelText,
      isSelected,
      disabled,
      selectProvider,
      handleCheckboxClick,
      mouseEvent
    } = this;
    const children = utils_renderNode.renderContent(this, "default", "content");
    const optionChild = children || h("span", [labelText]);
    if (this.hasLazyLoadHolder) {
      return h("li", {
        "ref": "optionNode",
        "class": classes,
        "on": {
          "mouseenter": () => mouseEvent(true),
          "mouseleave": () => mouseEvent(false),
          "click": this.handleClick
        },
        "directives": [{
          name: "ripple",
          value: this.keepAnimation.ripple
        }]
      }, [h("span", {
        "style": {
          height: `${this.tRowHeight}px`,
          border: "none"
        }
      })]);
    }
    return h("li", {
      "ref": "optionNode",
      "class": classes,
      "on": {
        "mouseenter": () => mouseEvent(true),
        "mouseleave": () => mouseEvent(false),
        "click": this.handleClick
      },
      "directives": [{
        name: "ripple",
        value: this.keepAnimation.ripple
      }]
    }, [multiple ? h("t-checkbox", {
      "attrs": {
        "checked": isSelected,
        "disabled": disabled || !isSelected && selectProvider.isReachMaxLimit.value
      },
      "on": {
        "change": handleCheckboxClick
      }
    }, [optionChild]) : h("span", [optionChild])]);
  }
});

exports["default"] = _Option;
//# sourceMappingURL=option.js.map
