<template>
  <el-input v-bind="$attrs" v-on="$listeners" v-model="currentValue" @keyup.native="onKeyup"></el-input>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { isRegExp } from '@/utils/types'

/**
 * 封装 element-ui 组件库 Input 输入框
 * @see https://element.eleme.cn/#/zh-CN/component/input
 */
@Component({
  name: 'EtInput',
})
export default class extends Vue {
  @Prop({ type: [String, Number] }) value!: string | number
  @Prop({ default: null, type: RegExp }) filterReg!: RegExp

  get currentValue() {
    return this.value
  }

  set currentValue(value: string | number) {
    /**
     * 在 Input 值改变时触发
     * @event input
     * @property {string | number} value
     */
    this.$emit('input', value)
  }

  onKeyup() {
    if (isRegExp(this.filterReg) && this.filterReg.test(String(this.currentValue))) {
      this.currentValue = String(this.currentValue).replace(this.filterReg, '')
    }
  }
}
</script>
