import { defineComponent, useCssVars, ref, watchEffect, openBlock, createElementBlock, withDirectives, createElementVNode, vModelText, toDisplayString, createCommentVNode, createBlock, withModifiers } from "vue";
import { o as onDebounce } from "./index4.js";
import { _ as _sfc_main$1 } from "./index5.js";
var index_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = {
  class: "wl-input",
  "data-weiling-mobile-ui-wl-input": ""
};
const _hoisted_2 = ["maxlength", "placeholder"];
const _hoisted_3 = {
  key: 0,
  class: "max-len"
};
const __default__ = {
  name: "WlInput"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    modelValue: { default: "" },
    placeholder: { default: "" },
    placeholderFontSize: { default: "14px" },
    clearable: { type: Boolean, default: false },
    needDebounce: { type: Boolean, default: true },
    inputType: { default: "text" },
    maxlength: { default: "" },
    inputHeight: { default: "44px" }
  },
  emits: ["onBlur", "onFocus", "onClear", "onChange", "update:modelValue"],
  setup(__props, { expose, emit }) {
    const props = __props;
    useCssVars((_ctx) => ({
      "6b4e8da8": __props.inputHeight,
      "714c989a": __props.placeholderFontSize
    }));
    const formValue = ref("");
    const inputRef = ref(null);
    const onClear = () => {
      emit("update:modelValue", "");
    };
    const onBlur = () => emit("onBlur");
    const onFocus = () => emit("onFocus");
    const formatNumber = (value, is_float) => {
      value += "";
      const regExp = is_float ? /[^-0-9.]/g : /[^-0-9]/g;
      value = value.replace(regExp, "");
      if (value.indexOf(".") !== -1) {
        let arr = value.split(".");
        let firstNum = arr[0];
        arr[0] = "";
        value = firstNum + `${arr.length > 1 && is_float ? "." + arr.join("") : ""}`;
      }
      if (value.lastIndexOf("-") !== 0 && value.lastIndexOf("-") !== -1) {
        const arr = value.split("-");
        value = value.startsWith("-") ? "-" + arr.join("") : arr.join("");
      }
      return value.replace(regExp, "");
    };
    const onDebounceSave = onDebounce(() => {
      emit("onChange", formValue.value);
      emit("update:modelValue", formValue.value);
    }, 500);
    const onInput = () => {
      let val = formValue.value;
      if (["number", "digit"].includes(props.inputType)) {
        val = formatNumber(val, props.inputType === "number");
      }
      formValue.value = val;
      if (props.needDebounce) {
        onDebounceSave();
      } else {
        emit("onChange", val);
        emit("update:modelValue", val);
      }
    };
    const onTriggerFocus = () => {
      inputRef.value.focus();
    };
    watchEffect(() => {
      formValue.value = props.modelValue + "";
    });
    expose({
      onTriggerFocus
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        withDirectives(createElementVNode("input", {
          ref_key: "inputRef",
          ref: inputRef,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formValue.value = $event),
          onFocus,
          onBlur,
          onInput,
          maxlength: __props.maxlength,
          placeholder: __props.placeholder
        }, null, 40, _hoisted_2), [
          [vModelText, formValue.value]
        ]),
        __props.maxlength ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(formValue.value.length) + "/" + toDisplayString(__props.maxlength), 1)) : createCommentVNode("", true),
        formValue.value && __props.clearable ? (openBlock(), createBlock(_sfc_main$1, {
          key: 1,
          type: "closeFill",
          width: "16",
          height: "16",
          color: "#919699",
          onClick: withModifiers(onClear, ["stop"])
        }, null, 8, ["onClick"])) : createCommentVNode("", true)
      ]);
    };
  }
});
export { _sfc_main as _ };
