<template>
  <div class="wl-input" data-weiling-mobile-ui-wl-input>
    <input
      ref="inputRef"
      v-model="formValue"
      @focus="onFocus"
      @blur="onBlur"
      @input="onInput"
      :maxlength="maxlength"
      :placeholder="placeholder"
    />
    <p class="max-len" v-if="maxlength">{{ formValue.length }}/{{ maxlength }}</p>
    <WlSvgIcon
      type="closeFill"
      width="16"
      height="16"
      color="#919699"
      v-if="formValue && clearable"
      @click.stop="onClear"
    />
  </div>
</template>

<script lang="ts">
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2023-06-29 19:49:26
 */
export default {
  name: "WlInput",
};
</script>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { onDebounce } from "@mobileUI/utils";
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";

type TInputType =
  | "button"
  | "checkbox"
  | "file"
  | "hidden"
  | "image"
  | "password"
  | "radio"
  | "reset"
  | "submit"
  | "text"
  | "number"
  | "digit";

type Props = {
  modelValue: string | number;
  placeholder?: string;
  placeholderFontSize?: string;
  clearable?: boolean;
  needDebounce?: boolean;
  inputType?: TInputType;
  maxlength?: string;
  inputHeight?: string;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
  placeholder: "",
  placeholderFontSize: "14px",
  clearable: false,
  needDebounce: true,
  inputType: "text",
  maxlength: "",
  textIndent: 10,
  inputHeight: "44px",
});

const formValue = ref("");
const inputRef = ref<HTMLElement>(null);

const emit = defineEmits<{
  (e: "onBlur");
  (e: "onFocus");
  (e: "onClear");
  (e: "onChange", val: string);
  (e: "update:modelValue", val: string);
}>();

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 + "";
});

defineExpose({
  onTriggerFocus,
});
</script>

<style lang="scss">
.wl-input[data-weiling-mobile-ui-wl-input] {
  width: 100%;
  height: v-bind(inputHeight);
  @extend %flex-between;

  > input {
    width: 100%;
    padding: 0;
    flex: 1;
    font-size: v-bind(placeholderFontSize);
    -webkit-appearance: none;
    border: 0;
    background-color: transparent;
    caret-color: var(--wl-primary-color);
  }

  .max-len {
    flex-shrink: 0;
    color: #646566;
    font-size: j(12);
    padding: 0 j(10);
  }
}
</style>
