import { defineComponent, ref, computed, watch, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createElementVNode, createVNode, renderSlot, Fragment, createTextVNode, toDisplayString } from 'vue';
import '../../../utils/index.mjs';
import { Form } from 'ant-design-vue';
import { isNil } from 'lodash-es';
import { numberRangeEmits, numberRangeProps } from './number-range.mjs';
import '../../index.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';
import { LlInputNumber } from '../../input-number/index.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlNumberRange" },
  __name: "number-range",
  props: numberRangeProps,
  emits: numberRangeEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace("number-range");
    const formItemContext = Form.useInjectFormItemContext();
    const minValue = ref(void 0);
    const maxValue = ref(void 0);
    const getMin = computed(
      () => typeof props.minMaxRange[0] === "number" && !isNaN(props.minMaxRange[0]) ? props.minMaxRange[0] : props.min
    );
    const getMax = computed(
      () => typeof props.minMaxRange[1] === "number" && !isNaN(props.minMaxRange[1]) ? props.minMaxRange[1] : props.max
    );
    const setValue = () => {
      const arr = [minValue.value, maxValue.value];
      emits("update:value", arr);
      emits("change", arr);
      formItemContext.onFieldChange();
    };
    const handleMinChange = (e) => {
      if (!isNil(e)) {
        minValue.value = e;
      } else {
        minValue.value = void 0;
      }
      setValue();
    };
    const handleMaxChange = (e) => {
      if (!isNil(e)) {
        maxValue.value = e;
      } else {
        maxValue.value = void 0;
      }
      setValue();
    };
    const handleMinBlur = () => {
      if (props.calibrateSize) {
        if (maxValue.value || maxValue.value === 0) {
          if (minValue.value && minValue.value > maxValue.value) {
            minValue.value = maxValue.value;
          }
        }
      }
      setValue();
      formItemContext.onFieldBlur();
    };
    const handleMaxBlur = () => {
      if (props.calibrateSize) {
        if (minValue.value || minValue.value === 0) {
          if (maxValue.value && maxValue.value < minValue.value) {
            maxValue.value = minValue.value;
          }
        }
      }
      setValue();
      formItemContext.onFieldBlur();
    };
    watch(
      () => props.value,
      (n) => {
        if (n && n.length) {
          if (!isNil(n[0])) {
            minValue.value = n[0];
          } else {
            minValue.value = void 0;
          }
          if (!isNil(n[1])) {
            maxValue.value = n[1];
          } else {
            maxValue.value = void 0;
          }
        } else {
          minValue.value = void 0;
          maxValue.value = void 0;
        }
      },
      {
        immediate: true,
        deep: true
      }
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass([
            unref(bem).b(),
            _ctx.disabled ? unref(bem).is("disabled") : "",
            unref(bem).is(_ctx.isGray ? "gray-number-range" : "")
          ])
        },
        [
          createCommentVNode(" \u5DE6\u8FB9InputNumber "),
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(bem).m("input"))
            },
            [
              createVNode(unref(LlInputNumber), {
                value: minValue.value,
                "onUpdate:value": _cache[0] || (_cache[0] = ($event) => minValue.value = $event),
                placeholder: _ctx.startPlaceholder || _ctx.placeholder[0],
                precision: props.precision,
                min: getMin.value,
                max: getMax.value,
                disabled: props.disabled,
                controls: false,
                bordered: false,
                step: props.step,
                size: _ctx.size,
                style: { "width": "100%" },
                onChange: handleMinChange,
                onBlur: handleMinBlur
              }, null, 8, ["value", "placeholder", "precision", "min", "max", "disabled", "step", "size"])
            ],
            2
            /* CLASS */
          ),
          createCommentVNode(" \u95F4\u9694\u7B26 "),
          createElementVNode(
            "span",
            {
              class: normalizeClass(unref(bem).m("separator"))
            },
            [
              _ctx.$slots.separator ? renderSlot(_ctx.$slots, "separator", { key: 0 }) : (openBlock(), createElementBlock(
                Fragment,
                { key: 1 },
                [
                  createTextVNode(
                    toDisplayString(_ctx.separator || "-"),
                    1
                    /* TEXT */
                  )
                ],
                64
                /* STABLE_FRAGMENT */
              ))
            ],
            2
            /* CLASS */
          ),
          createCommentVNode(" \u53F3\u8FB9InputNumber "),
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(bem).m("input"))
            },
            [
              createVNode(unref(LlInputNumber), {
                value: maxValue.value,
                "onUpdate:value": _cache[1] || (_cache[1] = ($event) => maxValue.value = $event),
                placeholder: _ctx.endPlaceholder || _ctx.placeholder[1],
                precision: props.precision,
                min: getMin.value,
                max: getMax.value,
                disabled: props.disabled,
                controls: false,
                bordered: false,
                step: props.step,
                size: _ctx.size,
                style: { "width": "100%" },
                onChange: handleMaxChange,
                onBlur: handleMaxBlur
              }, null, 8, ["value", "placeholder", "precision", "min", "max", "disabled", "step", "size"])
            ],
            2
            /* CLASS */
          )
        ],
        2
        /* CLASS */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=number-range.vue2.mjs.map
