<template>
  <div class="fl ageInput">
    <el-input
      type="text"
      :size="size"
      :style="{ width: width }"
      v-model="lowerNum"
      @change="numChange()"
      @input="accountInput($event, 1)"
      :placeholder="title + '下限'"
    /><samp style="padding: 0 3px; margin: 0">至</samp>
    <el-input
      type="text"
      :size="size"
      @input="accountInput($event, 2)"
      :style="{ width: width }"
      v-model="onlineNum"
      :placeholder="title + '上限'"
      @change="numChange()"
    />
  </div>
</template>

<script>
// 选择时间段(只有日期)组件
// timeReturned 返回值{startTime: Number,endTime: Number}
export default {
  name: "numBerRange",
  props: {
    title: {
      type: String,
      default: "",
    },
    lower: {
      type: String,
      default: "",
    },
    online: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "mini",
    },
    width: {
      type: String,
      default: "170px",
    },
  },
  data() {
    return {
      isEdit: this.disabled,
      lowerNum: this.lower,
      onlineNum: this.online,
    };
  },
  watch: {
    disabled(a, b) {
      this.isEdit = a;
      //  console.log(a, b,this.isEdit);
    },
  },
  mounted() {},
  methods: {
    accountInput(val, type) {
      //账号的实时输入
      //console.log(val);
      let codeReg = new RegExp("[0-9]+"), //正则 英文+数字；
        len = val.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      if (type === 1) {
        this.lowerNum = str;
      } else {
        this.onlineNum = str;
      }
    },
    numChange() {
      if (
        this.lowerNum !== "" &&
        this.lowerNum !== null &&
        this.onlineNum !== "" &&
        this.onlineNum !== null
      ) {
        if (parseInt(this.onlineNum) - parseInt(this.lowerNum) <= 0) {
          this.$message.error(`${this.title}上限应大于${this.title}下限！`);
          this.lowerNum = "";
          this.onlineNum = "";
          this.numReturned();
        } else {
          this.numReturned();
        }
      } else {
        this.numReturned();
      }
    },
    numReturned() {
      this.$emit("numReturned", {
        lower: this.lowerNum == null ? "" : this.lowerNum,
        online: this.onlineNum == null ? "" : this.onlineNum,
      });
    },
  },
};
</script>
<style lang="scss">
.ageInput.el-input {
  // width: 150px !important;
}
</style>
