import { pushScopeId, popScopeId, defineComponent, computed, resolveComponent, createElementBlock, openBlock, normalizeClass, createVNode, withCtx, unref, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
import '../../../../utils/index.mjs';
import { ArrowUp, ArrowDown, CircleClose } from '@element-plus/icons-vue';
import { numIntervalEmits, numIntervalProps } from './numberInterval.mjs';
import { isString, isNumber } from '../../../../utils/src/is.mjs';

const _withScopeId = (n) => (pushScopeId("data-v-4e6f4d6f"), n = n(), popScopeId(), n);
const _hoisted_1 = { class: "gm-flex gm-h-full gm-w-full gm-items-center gm-justify-center gm-text-[14px]" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "GmNumberInterval"
  },
  __name: "NumberInterval",
  props: numIntervalProps,
  emits: numIntervalEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const defaultModelVal = props.modelValue;
    const newModelValue = computed(() => {
      if (Array.isArray(props.modelValue)) {
        return props.modelValue;
      } else if (isString(props.modelValue)) {
        try {
          if (props.modelSeparator) {
            const modelVal = props.modelValue;
            const modelValArr = modelVal.split(props.modelSeparator);
            return modelValArr;
          } else {
            throw new Error("modelSeparator \u503C\u4E0D\u80FD\u4E3A\u7A7A");
          }
        } catch (error) {
          console.error(error);
        }
      }
      return props.modelValue || [];
    });
    const minVal = computed({
      get() {
        if (newModelValue.value[0] || isNumber(newModelValue.value[0])) {
          return Number(newModelValue.value[0]);
        }
        return void 0;
      },
      set(val) {
        const modelVal = [val, maxVal.value];
        if (isString(props.modelValue) && props.modelSeparator) {
          const newVal = modelVal.join(props.modelSeparator);
          emit("update:modelValue", newVal);
        } else {
          emit("update:modelValue", modelVal);
        }
      }
    });
    const maxVal = computed({
      get() {
        if (newModelValue.value[1] || isNumber(newModelValue.value[1])) {
          return Number(newModelValue.value[1]);
        }
        return void 0;
      },
      set(val) {
        const modelVal = [minVal.value, val];
        if (isString(props.modelValue) && props.modelSeparator) {
          const newVal = modelVal.join(props.modelSeparator);
          emit("update:modelValue", newVal);
        } else {
          emit("update:modelValue", modelVal);
        }
      }
    });
    const showClear = computed(() => {
      if (!props.clearable) {
        return false;
      } else {
        if (isString(props.modelValue) && props.modelValue) {
          return true;
        } else if (Array.isArray(props.modelValue) && props.modelValue.length) {
          return true;
        } else {
          return false;
        }
      }
    });
    const updateHandle = () => {
      const modelVal = [minVal.value, maxVal.value];
      if (isString(props.modelValue) && props.modelSeparator) {
        const newVal = modelVal.join(props.modelSeparator);
        emit("change", newVal);
      } else {
        emit("change", modelVal);
      }
    };
    const changeHandle = () => {
      updateHandle();
    };
    const clear = () => {
      emit("update:modelValue", defaultModelVal);
      emit("change", defaultModelVal);
    };
    __expose({
      clear
    });
    return (_ctx, _cache) => {
      const _component_gm_icon = resolveComponent("gm-icon");
      const _component_gm_input_number = resolveComponent("gm-input-number");
      const _component_gm_col = resolveComponent("gm-col");
      const _component_gm_row = resolveComponent("gm-row");
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["gm-number-interval gm-w-full", !_ctx.multiple ? "gm-number-interval-single" : ""])
        },
        [
          createVNode(_component_gm_row, { gutter: 5 }, {
            default: withCtx(() => [
              createVNode(_component_gm_col, { span: 11 }, {
                default: withCtx(() => [
                  createVNode(_component_gm_input_number, {
                    modelValue: minVal.value,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => minVal.value = $event),
                    class: "gm-w-full",
                    "controls-position": "right",
                    controls: _ctx.controls,
                    min: _ctx.min,
                    max: _ctx.max,
                    placeholder: _ctx.minPlaceholder,
                    disabled: _ctx.disabled || _ctx.disabledMin,
                    onChange: changeHandle
                  }, {
                    "decrease-icon": withCtx(() => [
                      createVNode(_component_gm_icon, null, {
                        default: withCtx(() => [
                          createVNode(unref(ArrowDown))
                        ]),
                        _: 1
                        /* STABLE */
                      })
                    ]),
                    "increase-icon": withCtx(() => [
                      createVNode(_component_gm_icon, null, {
                        default: withCtx(() => [
                          createVNode(unref(ArrowUp))
                        ]),
                        _: 1
                        /* STABLE */
                      })
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["modelValue", "controls", "min", "max", "placeholder", "disabled"])
                ]),
                _: 1
                /* STABLE */
              }),
              createVNode(_component_gm_col, { span: 2 }, {
                default: withCtx(() => [
                  createElementVNode("div", _hoisted_1, [
                    createElementVNode(
                      "span",
                      null,
                      toDisplayString(_ctx.separator),
                      1
                      /* TEXT */
                    )
                  ])
                ]),
                _: 1
                /* STABLE */
              }),
              createVNode(_component_gm_col, {
                span: 11,
                class: "gm-relative"
              }, {
                default: withCtx(() => [
                  createVNode(_component_gm_input_number, {
                    modelValue: maxVal.value,
                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => maxVal.value = $event),
                    class: "gm-w-full",
                    "controls-position": "right",
                    controls: _ctx.controls,
                    min: _ctx.min,
                    max: _ctx.max,
                    placeholder: _ctx.maxPlaceholder,
                    disabled: _ctx.disabled || _ctx.disabledMax,
                    onChange: changeHandle
                  }, {
                    "decrease-icon": withCtx(() => [
                      createVNode(_component_gm_icon, null, {
                        default: withCtx(() => [
                          createVNode(unref(ArrowDown))
                        ]),
                        _: 1
                        /* STABLE */
                      })
                    ]),
                    "increase-icon": withCtx(() => [
                      createVNode(_component_gm_icon, null, {
                        default: withCtx(() => [
                          createVNode(unref(ArrowUp))
                        ]),
                        _: 1
                        /* STABLE */
                      })
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["modelValue", "controls", "min", "max", "placeholder", "disabled"]),
                  showClear.value ? (openBlock(), createElementBlock("div", {
                    key: 0,
                    class: "gm-number-interval-close gm-absolute gm-right-2 gm-top-[50%] gm-translate-y-[-50%] gm-cursor-pointer gm-items-center",
                    onClick: clear
                  }, [
                    createVNode(_component_gm_icon, null, {
                      default: withCtx(() => [
                        createVNode(unref(CircleClose))
                      ]),
                      _: 1
                      /* STABLE */
                    })
                  ])) : createCommentVNode("v-if", true)
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            _: 1
            /* STABLE */
          })
        ],
        2
        /* CLASS */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=NumberInterval.vue2.mjs.map
