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

import { defineComponent, getCurrentInstance, toRefs, ref, computed } from '@vue/composition-api';
import { CloseCircleFilledIcon } from '@ldesign/icons-vue';
import { Input } from '../input/index.js';
import useVModel from '../../hooks/use-vmodel.js';
import { useGlobalIcon } from '../../hooks/use-global-icon.js';
import { useCommonClassName, usePrefixClass } from '../../hooks/use-config.js';
import { useLNodeJSX } from '../../hooks/lnode.js';
import { RangeInputProps } from './props.js';
import '../../utils/map-props.js';
import 'vue';
import '../../utils/with-install.js';
import 'lodash';
import '../../config.js';
import '../input/input.js';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../chunks/helper2.js';
import '../../chunks/defineProperty-838e4192.js';
import '../../chunks/index.js';
import '../../chunks/log.js';
import '../../chunks/_commonjsHelpers-2e6815bd.js';
import '../../utils/helper.js';
import '../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';
import '../../utils/mixins.js';
import '../../utils/event.js';
import '../../utils/render-node.js';
import '../input/props.js';
import '../input/group.js';
import '../input/style/css.js';
import '../input/type.js';
import '../config-provider/useConfig.js';
import 'lodash/isEmpty';
import 'lodash/isFunction';
import '../../hooks/render-lnode.js';

function calcArrayValue(value) {
  if (Array.isArray(value)) return value;
  return [value, value];
}
var _RangeInput = defineComponent({
  name: "LRangeInput",
  components: {
    LInput: Input
  },
  props: RangeInputProps,
  setup(props2) {
    const instance = getCurrentInstance();
    const {
      value
    } = toRefs(props2);
    const {
      STATUS,
      SIZE
    } = useCommonClassName();
    const classPrefix = usePrefixClass();
    const {
      CloseCircleFilledIcon: CloseCircleFilledIcon$1
    } = useGlobalIcon({
      CloseCircleFilledIcon: CloseCircleFilledIcon
    });
    const COMPONENT_NAME = usePrefixClass("range-input");
    const renderTNodeJSX = useLNodeJSX();
    const focused = ref(false);
    const isHover = ref(false);
    const calcFormat = computed(() => calcArrayValue(props2.format));
    const calcInputProps = computed(() => calcArrayValue(props2.inputProps));
    const calcPlaceholder = computed(() => calcArrayValue(props2.placeholder));
    const [innerValue, setInnerValue] = useVModel(value, props2.defaultValue, props2.onChange, "change");
    const isShowClearIcon = 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: ref(),
      secondInputRef: 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: CloseCircleFilledIcon$1
    };
  },
  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])]);
  }
});

export { _RangeInput as default };
//# sourceMappingURL=range-input.js.map
