/**
 * 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 iconsVue = require('@ldesign/icons-vue');
var components_input_index = require('../input/index.js');
var hooks_useVmodel = require('../../hooks/use-vmodel.js');
var hooks_useGlobalIcon = require('../../hooks/use-global-icon.js');
var hooks_useConfig = require('../../hooks/use-config.js');
var hooks_lnode = require('../../hooks/lnode.js');
var components_rangeInput_props = require('./props.js');
require('../../utils/map-props.js');
require('vue');
require('../../utils/with-install.js');
require('lodash');
require('../../config.js');
require('../input/input.js');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../../chunks/helper2.js');
require('../../chunks/log.js');
require('../../chunks/_commonjsHelpers-2e6815bd.js');
require('../../utils/helper.js');
require('../config-provider/config-receiver.js');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('../../chunks/zh_CN.js');
require('../../utils/mixins.js');
require('../../utils/event.js');
require('../../utils/render-node.js');
require('../input/props.js');
require('../input/group.js');
require('../config-provider/useConfig.js');
require('lodash/isEmpty');
require('lodash/isFunction');
require('../../hooks/render-lnode.js');

function calcArrayValue(value) {
  if (Array.isArray(value)) return value;
  return [value, value];
}
var _RangeInput = VueCompositionAPI.defineComponent({
  name: "LRangeInput",
  components: {
    LInput: components_input_index.Input
  },
  props: components_rangeInput_props.RangeInputProps,
  setup(props2) {
    const instance = VueCompositionAPI.getCurrentInstance();
    const {
      value
    } = VueCompositionAPI.toRefs(props2);
    const {
      STATUS,
      SIZE
    } = hooks_useConfig.useCommonClassName();
    const classPrefix = hooks_useConfig.usePrefixClass();
    const {
      CloseCircleFilledIcon
    } = hooks_useGlobalIcon.useGlobalIcon({
      CloseCircleFilledIcon: iconsVue.CloseCircleFilledIcon
    });
    const COMPONENT_NAME = hooks_useConfig.usePrefixClass("range-input");
    const renderTNodeJSX = hooks_lnode.useLNodeJSX();
    const focused = VueCompositionAPI.ref(false);
    const isHover = VueCompositionAPI.ref(false);
    const calcFormat = VueCompositionAPI.computed(() => calcArrayValue(props2.format));
    const calcInputProps = VueCompositionAPI.computed(() => calcArrayValue(props2.inputProps));
    const calcPlaceholder = VueCompositionAPI.computed(() => calcArrayValue(props2.placeholder));
    const [innerValue, setInnerValue] = hooks_useVmodel["default"](value, props2.defaultValue, props2.onChange, "change");
    const isShowClearIcon = VueCompositionAPI.computed(() => {
      var _props2$value;
      return (props2.clearable && ((_props2$value = props2.value) === null || _props2$value === void 0 ? void 0 : _props2$value.length) && !props2.disabled || props2.showClearIconOnEmpty) && isHover.value;
    });
    const inputRefs = {
      firstInputRef: VueCompositionAPI.ref(),
      secondInputRef: VueCompositionAPI.ref()
    };
    function handleClear(context) {
      var _props2$onClear;
      (_props2$onClear = props2.onClear) === null || _props2$onClear === void 0 ? void 0 : _props2$onClear.call(props2, context);
      setInnerValue(["", ""], {
        ...context,
        trigger: "clear",
        position: "all"
      });
    }
    function handleEnter(rangeValue, context) {
      var _props2$onEnter;
      (_props2$onEnter = props2.onEnter) === null || _props2$onEnter === void 0 ? void 0 : _props2$onEnter.call(props2, rangeValue, context);
      instance.emit("enter", rangeValue, context);
    }
    function handleFocus(rangeValue, context) {
      var _props2$onFocus;
      focused.value = true;
      (_props2$onFocus = props2.onFocus) === null || _props2$onFocus === void 0 ? void 0 : _props2$onFocus.call(props2, rangeValue, context);
      instance.emit("focus", rangeValue, context);
    }
    function handleBlur(rangeValue, context) {
      var _props2$onBlur;
      focused.value = false;
      (_props2$onBlur = props2.onBlur) === null || _props2$onBlur === void 0 ? void 0 : _props2$onBlur.call(props2, rangeValue, context);
      instance.emit("blur", rangeValue, context);
    }
    function handleMouseEnter(e) {
      var _props2$onMouseenter;
      isHover.value = true;
      props2 === null || props2 === void 0 ? void 0 : (_props2$onMouseenter = props2.onMouseenter) === null || _props2$onMouseenter === void 0 ? void 0 : _props2$onMouseenter.call(props2, {
        e
      });
      instance.emit("monseenter", {
        e
      });
    }
    function handleMouseLeave(e) {
      var _props2$onMouseleave;
      isHover.value = false;
      props2 === null || props2 === void 0 ? void 0 : (_props2$onMouseleave = props2.onMouseleave) === null || _props2$onMouseleave === void 0 ? void 0 : _props2$onMouseleave.call(props2, {
        e
      });
      instance.emit("monseleave", {
        e
      });
    }
    const exposeObj = {
      firstInputElement: inputRefs.firstInputRef.value,
      secondInputElement: inputRefs.secondInputRef.value,
      focus: options => {
        var _inputRefs$value;
        const {
          position = "first"
        } = options || {};
        (_inputRefs$value = inputRefs[`${position}InputRef`].value) === null || _inputRefs$value === void 0 ? void 0 : _inputRefs$value.focus();
      },
      blur: options => {
        var _inputRefs$value2;
        const {
          position = "first"
        } = options || {};
        (_inputRefs$value2 = inputRefs[`${position}InputRef`].value) === null || _inputRefs$value2 === void 0 ? void 0 : _inputRefs$value2.blur();
      },
      select: options => {
        var _inputRefs$value3;
        const {
          position = "first"
        } = options || {};
        (_inputRefs$value3 = inputRefs[`${position}InputRef`].value) === null || _inputRefs$value3 === void 0 ? void 0 : _inputRefs$value3.select();
      }
    };
    return {
      ...exposeObj,
      COMPONENT_NAME,
      SIZE,
      STATUS,
      focused,
      classPrefix,
      inputRefs,
      calcInputProps,
      calcFormat,
      calcPlaceholder,
      innerValue,
      isShowClearIcon,
      handleMouseEnter,
      handleMouseLeave,
      handleEnter,
      handleFocus,
      handleBlur,
      setInnerValue,
      renderTNodeJSX,
      handleClear,
      CloseCircleFilledIcon
    };
  },
  render() {
    const h = arguments[0];
    const {
      COMPONENT_NAME,
      SIZE,
      STATUS,
      focused,
      handleMouseEnter,
      handleMouseLeave,
      handleEnter,
      handleFocus,
      handleBlur,
      setInnerValue,
      renderTNodeJSX,
      handleClear,
      classPrefix,
      inputRefs,
      calcInputProps,
      calcFormat,
      calcPlaceholder,
      innerValue,
      isShowClearIcon,
      CloseCircleFilledIcon
    } = this;
    const labelContent = renderTNodeJSX("label");
    const prefixIconContent = renderTNodeJSX("prefixIcon");
    const suffixContent = renderTNodeJSX("suffix");
    const suffixIconContent = renderTNodeJSX("suffixIcon");
    return h("div", {
      "class": [COMPONENT_NAME, {
        [SIZE[this.size]]: this.size !== "medium",
        [STATUS.disabled]: this.disabled,
        [STATUS.focused]: focused
      }],
      "on": {
        "mouseenter": handleMouseEnter,
        "mouseleave": handleMouseLeave
      }
    }, [h("div", {
      "class": `${COMPONENT_NAME}__inner`
    }, [prefixIconContent, labelContent ? h("div", {
      "class": `${classPrefix}-input__prefix`
    }, [labelContent]) : null, h("l-input", {
      "ref": inputRefs.firstInputRef,
      "class": `${COMPONENT_NAME}__inner-left`,
      "attrs": {
        "inputClass": {
          [`${classPrefix}-is-focused`]: this.activeIndex === 0
        },
        "placeholder": calcPlaceholder[0],
        "disabled": this.disabled,
        "readonly": this.readonly,
        "format": calcFormat[0],
        "value": innerValue === null || innerValue === void 0 ? void 0 : innerValue[0]
      },
      "on": {
        "click": _ref => {
          var _this$onClick;
          let {
            e
          } = _ref;
          return (_this$onClick = this.onClick) === null || _this$onClick === void 0 ? void 0 : _this$onClick.call(this, {
            e,
            position: "first"
          });
        },
        "clear": () => setInnerValue([], {
          position: "first",
          trigger: "input"
        }),
        "enter": (val, _ref2) => {
          let {
            e
          } = _ref2;
          return handleEnter([val, innerValue === null || innerValue === void 0 ? void 0 : innerValue[1]], {
            e,
            position: "first"
          });
        },
        "focus": (val, _ref3) => {
          let {
            e
          } = _ref3;
          return handleFocus([val, innerValue === null || innerValue === void 0 ? void 0 : innerValue[1]], {
            e,
            position: "first"
          });
        },
        "blur": (val, _ref4) => {
          let {
            e
          } = _ref4;
          return handleBlur([val, innerValue === null || innerValue === void 0 ? void 0 : innerValue[1]], {
            e,
            position: "first"
          });
        },
        "change": (val, _ref5) => {
          let {
            e
          } = _ref5;
          return setInnerValue([val, innerValue === null || innerValue === void 0 ? void 0 : innerValue[1]], {
            e,
            position: "first",
            trigger: "input"
          });
        }
      },
      "props": {
        ...calcInputProps[0]
      }
    }), h("div", {
      "class": `${COMPONENT_NAME}__inner-separator`
    }, [this.separator]), h("l-input", {
      "ref": inputRefs.secondInputRef,
      "class": `${COMPONENT_NAME}__inner-right`,
      "attrs": {
        "inputClass": {
          [`${classPrefix}-is-focused`]: this.activeIndex === 1
        },
        "placeholder": calcPlaceholder[1],
        "disabled": this.disabled,
        "readonly": this.readonly,
        "format": calcFormat[1],
        "value": innerValue === null || innerValue === void 0 ? void 0 : innerValue[1]
      },
      "on": {
        "click": _ref6 => {
          var _this$onClick2;
          let {
            e
          } = _ref6;
          return (_this$onClick2 = this.onClick) === null || _this$onClick2 === void 0 ? void 0 : _this$onClick2.call(this, {
            e,
            position: "second"
          });
        },
        "clear": () => setInnerValue([], {
          position: "second",
          trigger: "input"
        }),
        "enter": (val, _ref7) => {
          let {
            e
          } = _ref7;
          return handleEnter([innerValue === null || innerValue === void 0 ? void 0 : innerValue[0], val], {
            e,
            position: "second"
          });
        },
        "focus": (val, _ref8) => {
          let {
            e
          } = _ref8;
          return handleFocus([innerValue === null || innerValue === void 0 ? void 0 : innerValue[0], val], {
            e,
            position: "second"
          });
        },
        "blur": (val, _ref9) => {
          let {
            e
          } = _ref9;
          return handleBlur([innerValue === null || innerValue === void 0 ? void 0 : innerValue[0], val], {
            e,
            position: "second"
          });
        },
        "change": (val, _ref10) => {
          let {
            e
          } = _ref10;
          return setInnerValue([innerValue === null || innerValue === void 0 ? void 0 : innerValue[0], val], {
            e,
            position: "second",
            trigger: "input"
          });
        }
      },
      "props": {
        ...calcInputProps[1]
      }
    }), suffixContent ? h("div", {
      "class": `${COMPONENT_NAME}__suffix`
    }, [suffixContent]) : null, suffixIconContent && h("span", {
      "class": `${COMPONENT_NAME}__suffix ${COMPONENT_NAME}__suffix-icon`
    }, [isShowClearIcon ? h(CloseCircleFilledIcon, {
      "class": `${COMPONENT_NAME}__suffix-clear`,
      "on": {
        "click": handleClear
      }
    }) : suffixIconContent])]), this.tips && h("div", {
      "class": `${COMPONENT_NAME}__tips`
    }, [this.tips])]);
  }
});

exports["default"] = _RangeInput;
//# sourceMappingURL=range-input.js.map
