<template>
  <div class="el-inputVaild">
    <el-input
      ref="input"
      :style="{ width: width }"
      :class="className"
      v-model="num"
      :disabled="disabled"
      :placeholder="placeholder"
      :max="max"
      :min="min"
      @blur="handleBlur"
      @focus="handleFocus"
      @input="handleInputChange"
      :prefix-icon="prefixIcon"
      :suffix-icon="suffixIcon"
      :clearable="clearable"
    >
    </el-input>
  </div>
</template>

<script>
import ElInput from 'element-ui/packages/input';
import Focus from 'element-ui/src/mixins/focus';
export default {
  name: 'ElInputVaild',
  mixins: [Focus('input')],
  components: {
    ElInput
  },
  props: {
    width: String,
    placeholder: String,
    // deleteAll设置未true后需要要设置，否则会自动变为最小值
    min: {
      type: Number,
      default: 0
    },
    // 如果要有小数比如0.1，最小值需要设置成-1
    max: {
      type: Number,
      default: 20000000
    },
    // 因为可以删除完返回‘’
    value: {
      type: [Number, String]
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否可点击
    deleteAll: {
      type: Boolean,
      default: false
    },
    // 是否可删除完，默认是不能，可以省去提交的时候的校验
    isInt: {
      type: Boolean,
      default: true
    },
    // 是否要为整数
    precision: {
      type: Number,
      default: 2
    },
    // 数字精度 也既是小数点位数
    className: String,
    // 自定义class样式
    // 输入框尾部图标
    suffixIcon: String,
    // 输入框头部图标
    prefixIcon: String,
    clearable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      num: '',
      currentValue: 0
    };
  },
  methods: {
    handleInputChange(param) {
      let val = param;
      if (this.isInt) {
        if (val.indexOf('.') > -1) {
          val = val.split('.')[0];
        }
        val = val.replace(/[^(0)*(\d+)]/g, '');
      } else {
        if (val === '.') {
          val = 0;
        }
        val = val.replace(/[^(\-)*(\d+).]/g, ''); // 清除"数字"和"."和"-"以外的字符
        val = val.replace(/\.{2,}/g, '.'); // 只保留第一个. 清除多余的
        val = val.replace(/\-{2,}/g, '-'); // 只保留第一个- 清除多余的
        val = val
          .replace('.', '$#$')
          .replace(/\./g, '')
          .replace('$#$', '.');
        val = val.replace(/^(\-)*(\d+)\.(\d{1,2}).*$/, '$1$2.$3'); // 只能输入两个小数
      }
      if (val.indexOf('.') < 0 && val !== '' && val !== '-') {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        val = parseFloat(val);
      }
      this.setCurrentValue(val);
    },
    setCurrentValue(val) {
      let newVal = val;
      if (!this.deleteAll && !newVal && newVal !== 0) {
        newVal = this.min;
      }
      if (this.deleteAll && !newVal && newVal !== 0) {
        newVal = undefined;
      }
      if (newVal !== '0.') {
        if (newVal >= this.max) newVal = this.max;
        if (newVal <= this.min) newVal = this.min;
      }
      const oldVal = this.currentValue;
      this.num = newVal;
      this.$emit('input', newVal);
      this.$emit('change', newVal, oldVal);
      this.currentValue = newVal;
    },
    handleBlur(event) {
      this.$emit('blur', event);
    },
    handleFocus(event) {
      this.$emit('focus', event);
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          if (Number(newVal) <= this.max) {
            this.num = newVal;
          } else {
            this.num = this.min;
            this.$emit('input', this.min);
          }
        } else {
          if (Number(this.num) !== Number(this.value)) {
            this.num = this.value;
          }
        }
      }
    }
  }
};
</script>
