"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../ui/src/comp.js");
const XEUtils = require("xe-utils");
require("../../ui/index.js");
const utils = require("../../ui/src/utils.js");
const dom = require("../../ui/src/dom.js");
const vn = require("../../ui/src/vn.js");
const util = require("./util.js");
const config = require("../../../../@vxe-ui/core/es/src/config.js");
const useFns = require("../../../../@vxe-ui/core/es/src/useFns.js");
const i18n = require("../../../../@vxe-ui/core/es/src/i18n.js");
const event = require("../../../../@vxe-ui/core/es/src/event.js");
const icon = require("../../../../@vxe-ui/core/es/src/icon.js");
const index_esm = require("../../../../@vxe-ui/core/es/index.esm.js");
const VxeNumberInputComponent = comp.defineVxeComponent({
  name: "VxeNumberInput",
  props: {
    modelValue: [String, Number],
    immediate: {
      type: Boolean,
      default: true
    },
    name: String,
    type: {
      type: String,
      default: "number"
    },
    clearable: {
      type: Boolean,
      default: () => config.getConfig().numberInput.clearable
    },
    readonly: {
      type: Boolean,
      default: null
    },
    disabled: {
      type: Boolean,
      default: null
    },
    placeholder: String,
    maxLength: {
      type: [String, Number],
      default: () => config.getConfig().numberInput.maxLength
    },
    autoComplete: {
      type: String,
      default: "off"
    },
    align: String,
    form: String,
    className: String,
    size: {
      type: String,
      default: () => config.getConfig().numberInput.size || config.getConfig().size
    },
    // number、integer、float
    min: {
      type: [String, Number],
      default: null
    },
    max: {
      type: [String, Number],
      default: null
    },
    step: [String, Number],
    exponential: {
      type: Boolean,
      default: () => config.getConfig().numberInput.exponential
    },
    showCurrency: {
      type: Boolean,
      default: () => config.getConfig().numberInput.showCurrency
    },
    currencySymbol: {
      type: String,
      default: () => config.getConfig().numberInput.currencySymbol
    },
    controlConfig: Object,
    // float
    digits: {
      type: [String, Number],
      default: null
    },
    autoFill: {
      type: Boolean,
      default: () => config.getConfig().numberInput.autoFill
    },
    editable: {
      type: Boolean,
      default: true
    },
    plusIcon: String,
    minusIcon: String,
    prefixIcon: String,
    suffixIcon: String,
    // 已废弃
    controls: {
      type: Boolean,
      default: null
    },
    // 已废弃
    maxlength: [String, Number],
    // 已废弃
    autocomplete: String
  },
  emits: [
    "update:modelValue",
    "input",
    "change",
    "keydown",
    "keyup",
    "wheel",
    "click",
    "focus",
    "blur",
    "clear",
    "lazy-change",
    "plus-number",
    "minus-number",
    "prefix-click",
    "suffix-click",
    // 已废弃
    "prev-number",
    "next-number"
  ],
  setup(props, context) {
    const { slots, emit } = context;
    const $xeForm = vue.inject("$xeForm", null);
    const formItemInfo = vue.inject("xeFormItemInfo", null);
    const xID = XEUtils.uniqueId();
    const { computeSize } = useFns.useSize(props);
    const reactData = vue.reactive({
      isFocus: false,
      isActivated: false,
      inputValue: ""
    });
    const internalData = {
      // dnTimeout: undefined,
      // ainTimeout: undefined,
      // isMouseDown: undefined,
      // isUM: undefined
    };
    const refElem = vue.ref();
    const refInputTarget = vue.ref();
    const refInputPanel = vue.ref();
    const computeFormReadonly = vue.computed(() => {
      const { readonly } = props;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.props.readonly;
        }
        return false;
      }
      return readonly;
    });
    const computeIsDisabled = vue.computed(() => {
      const { disabled } = props;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.props.disabled;
        }
        return false;
      }
      return disabled;
    });
    const computeDigitsValue = vue.computed(() => {
      const { type, digits } = props;
      let defDigits = digits;
      if (defDigits === null) {
        defDigits = config.getConfig().numberInput.digits;
        if (defDigits === null) {
          if (type === "amount") {
            defDigits = 2;
          }
        }
      }
      return XEUtils.toInteger(defDigits) || 1;
    });
    const computeControlOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().numberInput.controlConfig, props.controlConfig);
    });
    const computeDecimalsType = vue.computed(() => {
      const { type } = props;
      return type === "float" || type === "amount";
    });
    const computeStepValue = vue.computed(() => {
      const { type } = props;
      const digitsValue = computeDigitsValue.value;
      const decimalsType = computeDecimalsType.value;
      const step = props.step;
      if (type === "integer") {
        return XEUtils.toInteger(step) || 1;
      } else if (decimalsType) {
        return XEUtils.toNumber(step) || 1 / Math.pow(10, digitsValue);
      }
      return XEUtils.toNumber(step) || 1;
    });
    const computeIsClearable = vue.computed(() => {
      return props.clearable;
    });
    const computeInputReadonly = vue.computed(() => {
      const { editable } = props;
      const formReadonly = computeFormReadonly.value;
      return formReadonly || !editable;
    });
    const computeInpPlaceholder = vue.computed(() => {
      const { placeholder } = props;
      if (placeholder) {
        return utils.getFuncText(placeholder);
      }
      const globalPlaceholder = config.getConfig().numberInput.placeholder;
      if (globalPlaceholder) {
        return utils.getFuncText(globalPlaceholder);
      }
      return i18n.getI18n("vxe.base.pleaseInput");
    });
    const computeInpMaxLength = vue.computed(() => {
      const { type, maxLength, maxlength, min, max } = props;
      const digitsValue = computeDigitsValue.value;
      const maxDefLen = 16;
      if (!utils.eqEmptyValue(min) && !utils.eqEmptyValue(max)) {
        return `${max}`.length + (type === "integer" ? 0 : digitsValue + 1) + (XEUtils.toNumber(min) >= 0 ? 0 : 1);
      }
      if (maxLength || maxlength) {
        return XEUtils.toNumber(maxLength || maxlength);
      }
      return maxDefLen;
    });
    const computeInpImmediate = vue.computed(() => {
      const { immediate } = props;
      return immediate;
    });
    const computeNumValue = vue.computed(() => {
      const { type } = props;
      const { inputValue } = reactData;
      return type === "integer" ? XEUtils.toInteger(util.handleNumber(inputValue)) : XEUtils.toNumber(util.handleNumber(inputValue));
    });
    const computeNumLabel = vue.computed(() => {
      const { type, showCurrency, currencySymbol, autoFill } = props;
      const { inputValue } = reactData;
      const digitsValue = computeDigitsValue.value;
      if (type === "amount") {
        const num = XEUtils.toNumber(inputValue);
        let amountLabel = XEUtils.commafy(num, { digits: digitsValue });
        if (!autoFill) {
          const [iStr, dStr] = amountLabel.split(".");
          if (dStr) {
            const dRest = dStr.replace(/0+$/, "");
            amountLabel = dRest ? [iStr, ".", dRest].join("") : iStr;
          }
        }
        if (showCurrency) {
          return `${currencySymbol || i18n.getI18n("vxe.numberInput.currencySymbol") || ""}${amountLabel}`;
        }
        return amountLabel;
      }
      return XEUtils.toString(inputValue);
    });
    const computeIsDisabledSubtractNumber = vue.computed(() => {
      const { min } = props;
      const { inputValue } = reactData;
      const numValue = computeNumValue.value;
      if ((inputValue || inputValue === 0) && min !== null) {
        return numValue <= XEUtils.toNumber(min);
      }
      return false;
    });
    const computeIsDisabledAddNumber = vue.computed(() => {
      const { max } = props;
      const { inputValue } = reactData;
      const numValue = computeNumValue.value;
      if ((inputValue || inputValue === 0) && max !== null) {
        return numValue >= XEUtils.toNumber(max);
      }
      return false;
    });
    const refMaps = {
      refElem,
      refInput: refInputTarget
    };
    const computeMaps = {
      computeControlOpts
    };
    const $xeNumberInput = {
      xID,
      props,
      context,
      reactData,
      internalData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    let numberInputMethods = {};
    const handleNumberString = (val) => {
      if (XEUtils.eqNull(val)) {
        return "";
      }
      return `${val}`;
    };
    const getNumberValue = (val) => {
      const { exponential, autoFill } = props;
      const inpMaxLength = computeInpMaxLength.value;
      const digitsValue = computeDigitsValue.value;
      const decimalsType = computeDecimalsType.value;
      let restVal = "";
      if (decimalsType) {
        restVal = util.toFloatValueFixed(val, digitsValue);
        if (!autoFill) {
          restVal = handleNumberString(XEUtils.toNumber(restVal));
        }
      } else {
        restVal = handleNumberString(val);
      }
      if (exponential && (val === restVal || handleNumberString(val).toLowerCase() === XEUtils.toNumber(restVal).toExponential())) {
        return val;
      }
      return restVal.slice(0, inpMaxLength);
    };
    const triggerEvent = (evnt) => {
      const { inputValue } = reactData;
      numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
    };
    const handleChange = (val, inputValue, evnt) => {
      const value = utils.eqEmptyValue(val) ? null : Number(val);
      const isChange = value !== props.modelValue;
      if (isChange) {
        internalData.isUM = true;
        emit("update:modelValue", value);
      }
      if (reactData.inputValue !== inputValue) {
        vue.nextTick(() => {
          reactData.inputValue = inputValue || "";
        });
      }
      numberInputMethods.dispatchEvent("input", { value }, evnt);
      if (isChange) {
        numberInputMethods.dispatchEvent("change", { value }, evnt);
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
        }
      }
    };
    const emitInputEvent = (inputValue, evnt) => {
      const inpImmediate = computeInpImmediate.value;
      const value = utils.eqEmptyValue(inputValue) ? null : XEUtils.toNumber(inputValue);
      reactData.inputValue = inputValue;
      if (inpImmediate) {
        handleChange(value, inputValue, evnt);
      } else {
        numberInputMethods.dispatchEvent("input", { value }, evnt);
      }
    };
    const inputEvent = (evnt) => {
      const inputElem = evnt.target;
      const value = inputElem.value;
      emitInputEvent(value, evnt);
    };
    const changeEvent = (evnt) => {
      const inpImmediate = computeInpImmediate.value;
      if (!inpImmediate) {
        triggerEvent(evnt);
      }
      $xeNumberInput.dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
    };
    const focusEvent = (evnt) => {
      const inputReadonly = computeInputReadonly.value;
      if (!inputReadonly) {
        const { inputValue } = reactData;
        reactData.inputValue = utils.eqEmptyValue(inputValue) ? "" : `${XEUtils.toNumber(inputValue)}`;
        reactData.isFocus = true;
        reactData.isActivated = true;
        triggerEvent(evnt);
      }
    };
    const clickPrefixEvent = (evnt) => {
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const { inputValue } = reactData;
        numberInputMethods.dispatchEvent("prefix-click", { value: inputValue }, evnt);
      }
    };
    const clearValueEvent = (evnt, value) => {
      focus();
      handleChange(null, "", evnt);
      numberInputMethods.dispatchEvent("clear", { value }, evnt);
      $xeNumberInput.dispatchEvent("lazy-change", { value }, evnt);
    };
    const clickSuffixEvent = (evnt) => {
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const { inputValue } = reactData;
        numberInputMethods.dispatchEvent("suffix-click", { value: inputValue }, evnt);
      }
    };
    const updateModel = (val) => {
      const { autoFill } = props;
      const { inputValue } = reactData;
      const digitsValue = computeDigitsValue.value;
      const decimalsType = computeDecimalsType.value;
      if (utils.eqEmptyValue(val)) {
        reactData.inputValue = "";
      } else {
        let textValue = `${val}`;
        if (decimalsType) {
          textValue = util.toFloatValueFixed(val, digitsValue);
          if (!autoFill) {
            textValue = `${XEUtils.toNumber(textValue)}`;
          }
        }
        if (textValue !== inputValue) {
          reactData.inputValue = textValue;
        }
      }
    };
    const initValue = () => {
      const { autoFill } = props;
      const { inputValue } = reactData;
      const digitsValue = computeDigitsValue.value;
      const decimalsType = computeDecimalsType.value;
      if (decimalsType) {
        if (inputValue) {
          let textValue = "";
          let validValue = null;
          if (inputValue) {
            textValue = util.toFloatValueFixed(inputValue, digitsValue);
            validValue = XEUtils.toNumber(textValue);
            if (!autoFill) {
              textValue = `${validValue}`;
            }
          }
          if (inputValue !== validValue) {
            handleChange(validValue, textValue, { type: "init" });
          } else {
            reactData.inputValue = textValue;
          }
        }
      }
    };
    const validMaxNum = (num) => {
      return props.max === null || props.max === "" || XEUtils.toNumber(num) <= XEUtils.toNumber(props.max);
    };
    const validMinNum = (num) => {
      return props.min === null || props.min === "" || XEUtils.toNumber(num) >= XEUtils.toNumber(props.min);
    };
    const afterCheckValue = () => {
      const { type, min, max, exponential } = props;
      const { inputValue } = reactData;
      const inputReadonly = computeInputReadonly.value;
      if (!inputReadonly) {
        if (utils.eqEmptyValue(inputValue)) {
          let inpNumVal = null;
          let inpValue = inputValue;
          if (min || min === 0) {
            inpNumVal = XEUtils.toNumber(min);
            inpValue = `${inpNumVal}`;
          }
          handleChange(inpNumVal, `${inpValue || ""}`, { type: "check" });
          return;
        }
        if (inputValue || (min || max)) {
          let inpNumVal = type === "integer" ? XEUtils.toInteger(util.handleNumber(inputValue)) : XEUtils.toNumber(util.handleNumber(inputValue));
          if (!validMinNum(inpNumVal)) {
            inpNumVal = min;
          } else if (!validMaxNum(inpNumVal)) {
            inpNumVal = max;
          }
          if (exponential) {
            const inpStringVal = handleNumberString(inputValue).toLowerCase();
            if (inpStringVal === XEUtils.toNumber(inpNumVal).toExponential()) {
              inpNumVal = inpStringVal;
            }
          }
          const inpValue = getNumberValue(inpNumVal);
          handleChange(utils.eqEmptyValue(inpValue) ? null : Number(inpValue), inpValue, { type: "check" });
        }
      }
    };
    const blurEvent = (evnt) => {
      const { inputValue } = reactData;
      const inpImmediate = computeInpImmediate.value;
      const value = inputValue ? Number(inputValue) : null;
      if (!inpImmediate) {
        handleChange(value, handleNumberString(inputValue), evnt);
      }
      afterCheckValue();
      reactData.isFocus = false;
      reactData.isActivated = false;
      numberInputMethods.dispatchEvent("blur", { value }, evnt);
      if ($xeForm && formItemInfo) {
        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
      }
    };
    const numberChange = (isPlus, evnt) => {
      const { min, max, type } = props;
      const { inputValue } = reactData;
      const stepValue = computeStepValue.value;
      const numValue = type === "integer" ? XEUtils.toInteger(util.handleNumber(inputValue)) : XEUtils.toNumber(util.handleNumber(inputValue));
      const newValue = isPlus ? XEUtils.add(numValue, stepValue) : XEUtils.subtract(numValue, stepValue);
      let restNum;
      if (!validMinNum(newValue)) {
        restNum = min;
      } else if (!validMaxNum(newValue)) {
        restNum = max;
      } else {
        restNum = newValue;
      }
      emitInputEvent(getNumberValue(restNum), evnt);
    };
    const numberPlusEvent = (evnt) => {
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const isDisabledAddNumber = computeIsDisabledAddNumber.value;
      if (!isDisabled && !formReadonly && !isDisabledAddNumber) {
        numberChange(true, evnt);
      }
      reactData.isActivated = true;
      numberInputMethods.dispatchEvent("plus-number", { value: reactData.inputValue }, evnt);
      $xeNumberInput.dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
      numberInputMethods.dispatchEvent("next-number", { value: reactData.inputValue }, evnt);
    };
    const numberMinusEvent = (evnt) => {
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
      if (!isDisabled && !formReadonly && !isDisabledSubtractNumber) {
        numberChange(false, evnt);
      }
      reactData.isActivated = true;
      numberInputMethods.dispatchEvent("minus-number", { value: reactData.inputValue }, evnt);
      $xeNumberInput.dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
      numberInputMethods.dispatchEvent("prev-number", { value: reactData.inputValue }, evnt);
    };
    const numberKeydownEvent = (evnt) => {
      const isUpArrow = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ARROW_UP);
      const isDwArrow = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ARROW_DOWN);
      if (isUpArrow || isDwArrow) {
        evnt.preventDefault();
        if (isUpArrow) {
          numberPlusEvent(evnt);
        } else {
          numberMinusEvent(evnt);
        }
      }
    };
    const keydownEvent = (evnt) => {
      const { type, exponential, controls } = props;
      const controlOpts = computeControlOpts.value;
      const { isArrow } = controlOpts;
      const inputReadonly = computeInputReadonly.value;
      const isControlKey = dom.hasControlKey(evnt);
      const isShiftKey = evnt.shiftKey;
      const isAltKey = evnt.altKey;
      const keyCode = evnt.keyCode;
      const isEsc = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ESCAPE);
      const isUpArrow = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ARROW_UP);
      const isDwArrow = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ARROW_DOWN);
      if (!isControlKey && !isShiftKey && !isAltKey) {
        if (event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.SPACEBAR) || type === "integer" && keyCode === 110 || (!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90) || keyCode >= 186 && keyCode <= 188 || keyCode >= 191) {
          evnt.preventDefault();
        }
      }
      if (isEsc) {
        afterCheckValue();
      } else if (isUpArrow || isDwArrow) {
        if (utils.isEnableConf(controlOpts) && (controls === false ? controls : isArrow) && !inputReadonly) {
          numberKeydownEvent(evnt);
        }
      }
      triggerEvent(evnt);
    };
    const keyupEvent = (evnt) => {
      triggerEvent(evnt);
    };
    const stopDown = () => {
      const { dnTimeout } = internalData;
      if (dnTimeout) {
        clearTimeout(dnTimeout);
        internalData.dnTimeout = void 0;
      }
    };
    const stopAutoIncrement = () => {
      const { ainTimeout } = internalData;
      if (ainTimeout) {
        clearTimeout(ainTimeout);
        internalData.ainTimeout = void 0;
      }
    };
    const numberDownMinusEvent = (evnt) => {
      numberStopAll();
      internalData.ainTimeout = setTimeout(() => {
        numberMinusEvent(evnt);
        numberDownMinusEvent(evnt);
      }, 60);
    };
    const numberDownPlusEvent = (evnt) => {
      numberStopAll();
      internalData.ainTimeout = setTimeout(() => {
        numberPlusEvent(evnt);
        numberDownPlusEvent(evnt);
      }, 60);
    };
    const numberStopAll = () => {
      stopDown();
      stopAutoIncrement();
    };
    const numberClickEvent = (evnt) => {
      if (internalData.isMouseDown) {
        internalData.isMouseDown = false;
      } else {
        numberStopAll();
        const isAddNumber = dom.hasClass(evnt.currentTarget, "is--plus");
        if (isAddNumber) {
          numberPlusEvent(evnt);
        } else {
          numberMinusEvent(evnt);
        }
      }
    };
    const numberMousedownEvent = (evnt) => {
      numberStopAll();
      internalData.isMouseDown = true;
      if (evnt.button === 0) {
        const isAddNumber = dom.hasClass(evnt.currentTarget, "is--plus");
        if (isAddNumber) {
          numberPlusEvent(evnt);
        } else {
          numberMinusEvent(evnt);
        }
        internalData.dnTimeout = setTimeout(() => {
          if (isAddNumber) {
            numberDownPlusEvent(evnt);
          } else {
            numberDownMinusEvent(evnt);
          }
        }, 500);
      }
    };
    const wheelEvent = (evnt) => {
      const { controls } = props;
      const controlOpts = computeControlOpts.value;
      const { isWheel } = controlOpts;
      const inputReadonly = computeInputReadonly.value;
      if (utils.isEnableConf(controlOpts) && (controls === false ? controls : isWheel) && !inputReadonly) {
        if (reactData.isActivated) {
          evnt.stopPropagation();
          evnt.preventDefault();
          const delta = evnt.deltaY;
          if (delta > 0) {
            numberMinusEvent(evnt);
          } else if (delta < 0) {
            numberPlusEvent(evnt);
          }
        }
      }
      triggerEvent(evnt);
    };
    const clickEvent = (evnt) => {
      triggerEvent(evnt);
    };
    const handleGlobalMousedownEvent = (evnt) => {
      const { isActivated } = reactData;
      const el = refElem.value;
      const panelElem = refInputPanel.value;
      const isDisabled = computeIsDisabled.value;
      const inputReadonly = computeInputReadonly.value;
      const inpImmediate = computeInpImmediate.value;
      if (!isDisabled && !inputReadonly && isActivated) {
        reactData.isActivated = dom.getEventTargetNode(evnt, el).flag || dom.getEventTargetNode(evnt, panelElem).flag;
        if (!reactData.isActivated) {
          if (!inpImmediate) {
            const { inputValue } = reactData;
            const value = inputValue ? Number(inputValue) : null;
            handleChange(value, handleNumberString(inputValue), evnt);
          }
          afterCheckValue();
        }
      }
    };
    const handleGlobalKeydownEvent = (evnt) => {
      const { clearable } = props;
      const isDisabled = computeIsDisabled.value;
      const inputReadonly = computeInputReadonly.value;
      if (!isDisabled && !inputReadonly) {
        const isTab = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.TAB);
        const isDel = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.DELETE);
        let isActivated = reactData.isActivated;
        if (isTab) {
          if (isActivated) {
            afterCheckValue();
          }
          isActivated = false;
          reactData.isActivated = isActivated;
        }
        if (isDel && clearable) {
          if (isActivated) {
            clearValueEvent(evnt, null);
          }
        }
      }
    };
    const handleGlobalBlurEvent = () => {
      const { isActivated } = reactData;
      if (isActivated) {
        afterCheckValue();
      }
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, event.createEvent(evnt, { $numberInput: $xeNumberInput }, params));
    };
    numberInputMethods = {
      dispatchEvent,
      focus() {
        const inputReadonly = computeInputReadonly.value;
        if (!inputReadonly) {
          const inputElem = refInputTarget.value;
          reactData.isActivated = true;
          inputElem.focus();
        }
        return vue.nextTick();
      },
      blur() {
        const inputElem = refInputTarget.value;
        inputElem.blur();
        reactData.isActivated = false;
        return vue.nextTick();
      },
      select() {
        const inputElem = refInputTarget.value;
        inputElem.select();
        reactData.isActivated = false;
        return vue.nextTick();
      }
    };
    Object.assign($xeNumberInput, numberInputMethods);
    const renderPrefixIcon = () => {
      const { prefixIcon } = props;
      const prefixSlot = slots.prefix;
      return prefixSlot || prefixIcon ? vue.h("div", {
        class: "vxe-number-input--prefix",
        onClick: clickPrefixEvent
      }, [
        vue.h("div", {
          class: "vxe-number-input--prefix-icon"
        }, prefixSlot ? vn.getSlotVNs(prefixSlot({})) : [
          vue.h("i", {
            class: prefixIcon
          })
        ])
      ]) : index_esm.renderEmptyElement();
    };
    const renderSuffixIcon = () => {
      const { suffixIcon } = props;
      const { inputValue } = reactData;
      const suffixSlot = slots.suffix;
      const isDisabled = computeIsDisabled.value;
      const isClearable = computeIsClearable.value;
      return vue.h("div", {
        class: ["vxe-number-input--suffix", {
          "is--clear": isClearable && !isDisabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
        }]
      }, [
        isClearable ? vue.h("div", {
          class: "vxe-number-input--clear-icon",
          onClick: clearValueEvent
        }, [
          vue.h("i", {
            class: icon.getIcon().INPUT_CLEAR
          })
        ]) : index_esm.renderEmptyElement(),
        suffixSlot || suffixIcon ? vue.h("div", {
          class: "vxe-number-input--suffix-icon",
          onClick: clickSuffixEvent
        }, suffixSlot ? vn.getSlotVNs(suffixSlot({})) : [
          vue.h("i", {
            class: suffixIcon
          })
        ]) : index_esm.renderEmptyElement()
      ]);
    };
    const renderInput = () => {
      const { type, name, autocomplete, autoComplete } = props;
      const { inputValue, isFocus } = reactData;
      const isDisabled = computeIsDisabled.value;
      const numLabel = computeNumLabel.value;
      const inputReadonly = computeInputReadonly.value;
      const inpMaxLength = computeInpMaxLength.value;
      const inpPlaceholder = computeInpPlaceholder.value;
      return vue.h("div", {
        key: "ni",
        class: "vxe-number-input--input-wrapper"
      }, [
        renderPrefixIcon(),
        vue.h("div", {
          class: "vxe-number-input--input-inner"
        }, [
          vue.h("input", {
            ref: refInputTarget,
            class: "vxe-number-input--input",
            value: !isFocus && type === "amount" ? numLabel : inputValue,
            name,
            type: "text",
            placeholder: inpPlaceholder,
            maxlength: inpMaxLength,
            readonly: inputReadonly,
            disabled: isDisabled,
            autocomplete: autoComplete || autocomplete,
            onKeydown: keydownEvent,
            onKeyup: keyupEvent,
            onClick: clickEvent,
            onInput: inputEvent,
            onChange: changeEvent,
            onFocus: focusEvent,
            onBlur: blurEvent
          })
        ]),
        renderSuffixIcon()
      ]);
    };
    const renderMinusBtn = () => {
      const { minusIcon } = props;
      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
      return vue.h("button", {
        key: "prev",
        class: ["vxe-number-input--minus-btn is--minus", {
          "is--disabled": isDisabledSubtractNumber
        }],
        type: "button",
        onClick: numberClickEvent,
        onMousedown: numberMousedownEvent,
        onMouseup: numberStopAll,
        onMouseleave: numberStopAll
      }, [
        vue.h("i", {
          class: minusIcon || icon.getIcon().NUMBER_INPUT_MINUS_NUM
        })
      ]);
    };
    const renderPlusBtn = () => {
      const { plusIcon } = props;
      const isDisabledAddNumber = computeIsDisabledAddNumber.value;
      return vue.h("button", {
        key: "next",
        class: ["vxe-number-input--plus-btn is--plus", {
          "is--disabled": isDisabledAddNumber
        }],
        type: "button",
        onClick: numberClickEvent,
        onMousedown: numberMousedownEvent,
        onMouseup: numberStopAll,
        onMouseleave: numberStopAll
      }, [
        vue.h("i", {
          class: plusIcon || icon.getIcon().NUMBER_INPUT_PLUS_NUM
        })
      ]);
    };
    const renderSideControl = () => {
      return vue.h("div", {
        key: "cplr",
        class: "vxe-number-input--side-control"
      }, [
        renderPlusBtn(),
        renderMinusBtn()
      ]);
    };
    const renderVN = () => {
      const { className, controls, type, align, prefixIcon, suffixIcon } = props;
      const { inputValue, isActivated } = reactData;
      const vSize = computeSize.value;
      const controlOpts = computeControlOpts.value;
      const { layout, showButton } = controlOpts;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const numLabel = computeNumLabel.value;
      const prefixSlot = slots.prefix;
      const suffixSlot = slots.suffix;
      if (formReadonly) {
        return vue.h("div", {
          ref: refElem,
          class: ["vxe-number-input--readonly", `type--${type}`, className]
        }, numLabel);
      }
      const inputReadonly = computeInputReadonly.value;
      const isClearable = computeIsClearable.value;
      const isControls = utils.isEnableConf(controlOpts) && (controls === false ? controls : showButton);
      return vue.h("div", {
        ref: refElem,
        class: ["vxe-number-input", `type--${type}`, `ctl--${layout === "right" || layout === "left" ? layout : "default"}`, className, {
          [`size--${vSize}`]: vSize,
          [`is--${align}`]: align,
          "is--controls": isControls && !inputReadonly,
          "is--prefix": !!prefixSlot || prefixIcon,
          "is--suffix": !!suffixSlot || suffixIcon,
          "is--disabled": isDisabled,
          "is--active": isActivated,
          "show--clear": isClearable && !isDisabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
        }],
        spellcheck: false
      }, isControls ? layout === "right" ? [
        renderInput(),
        renderSideControl()
      ] : layout === "left" ? [
        renderSideControl(),
        renderInput()
      ] : [
        renderMinusBtn(),
        renderInput(),
        renderPlusBtn()
      ] : [
        renderInput()
      ]);
    };
    $xeNumberInput.renderVN = renderVN;
    vue.watch(() => props.modelValue, (val) => {
      if (!internalData.isUM) {
        updateModel(val);
      }
      internalData.isUM = false;
    });
    vue.watch(() => props.type, () => {
      Object.assign(reactData, {
        inputValue: props.modelValue
      });
      initValue();
    });
    vue.onMounted(() => {
      updateModel(props.modelValue);
      const targetElem = refInputTarget.value;
      if (targetElem) {
        targetElem.addEventListener("wheel", wheelEvent, { passive: false });
      }
      event.globalEvents.on($xeNumberInput, "mousedown", handleGlobalMousedownEvent);
      event.globalEvents.on($xeNumberInput, "keydown", handleGlobalKeydownEvent);
      event.globalEvents.on($xeNumberInput, "blur", handleGlobalBlurEvent);
    });
    vue.onBeforeUnmount(() => {
      reactData.isFocus = false;
      numberStopAll();
      afterCheckValue();
      const targetElem = refInputTarget.value;
      if (targetElem) {
        targetElem.removeEventListener("wheel", wheelEvent);
      }
      event.globalEvents.off($xeNumberInput, "mousedown");
      event.globalEvents.off($xeNumberInput, "keydown");
      event.globalEvents.off($xeNumberInput, "blur");
    });
    initValue();
    return $xeNumberInput;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = VxeNumberInputComponent;
