<template>
  <el-input
      v-bind="$attrs"
      v-model="paramVal"
      :type="type"
      clearable
      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请输入${label}`"
      @keyup.enter.native="$emit('emitEnter')"
      :disabled="$util.isValue($attrs.disabled) ? $attrs.disabled : formView"
      @input="handleInput"
      @keypress="handleKeyPress"
      @focusout="handleFocusOut"
  >
    <template v-if="$slots.prefix" #prefix>
      <slot name="prefix"/>
    </template>
    <template v-if="$slots.suffix" #suffix>
      <slot name="suffix"/>
    </template>
    <template v-if="$slots.prepend" #prepend>
      <slot name="prepend"/>
    </template>
    <template v-if="$slots.append" #append>
      <slot name="append"/>
    </template>
  </el-input>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick,
  inject
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  props: {
    param: {},
    label: {},
    type: {
      type: String,
      default: 'text',
      validator(val: string) {
        return ['text', 'textarea', 'password'].includes(val)
      }
    },
    max: {default: null, type: Number},
    min: {default: null, type: Number},
    decimal: {default: 0, type: Number}
  },
  setup(props, { emit }) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      paramVal: <any>props.param,
      formView: inject('form-view', false),
    })
    watch(() => state.paramVal, (n) => {
      emit('emitParam', n)
    })
    watch(() => props.param, (n) => {
      state.paramVal = n
    })
    const handleInput = () => {
      const handleReg = (key) => {
        if (props.decimal === 0) {
          key = String(key).replace(/\D/g, "")
        } else {
          const pattern = new RegExp("(\\.\\d{" + props.decimal + "})\\d*")
          key = String(key).replace(/\./g, (match, index) => {
            return index === key.indexOf('.') ? match : '';
          }).replace(/^(\d+)\.(\d+)|[^0-9.]/g, (match, group1, group2) => {
            if (group1 && group2) {
              return group1 + "." + group2
            } else {
              return ""
            }
          }).replace(pattern, "$1")
        }
        return key
      }
      if (String(state.paramVal).startsWith('-')) {
        state.paramVal = '-' + handleReg(state.paramVal)
      } else {
        state.paramVal = handleReg(state.paramVal)
      }
      if (that.$util.isValue(state.paramVal)) {
        if (that.$util.isValue(props.max) && Number(state.paramVal) > props.max) {
          state.paramVal = props.max
        }
        if (that.$util.isValue(props.min) && Number(state.paramVal) < props.min) {
          state.paramVal = props.min
        }
      }
    }
    const handleKeyPress = (event) => {
      const keyCode = event.keyCode || event.which;
      if (keyCode !== 8 && keyCode !== 46 && keyCode !== 45 && (keyCode < 48 || keyCode > 57)) {
        event.preventDefault()
      }
    }
    const handleFocusOut = () => {
      if (state.paramVal === '-') {
        state.paramVal = ''
      } else if (that.$util.isValue(state.paramVal)) {
        state.paramVal = Number(state.paramVal)
      }
    }
    return {
      ...toRefs(state),
      handleInput,
      handleKeyPress,
      handleFocusOut
    }
  },
})
</script>

<style scoped lang="scss">
</style>
