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

<script>
// 选择时间段(只有日期)组件
// timeReturned 返回值{startTime: Number,endTime: Number}
export default {
  name: "numberRange",
  props: ["title", "lower", "online", "disabled", "size", "width"],
  // 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 {};
  },
  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.lower = str;
      } else {
        this.online = str;
      }
    },
    numChange() {
      if (
        this.lower !== "" &&
        this.lower !== null &&
        this.online !== "" &&
        this.online !== null
      ) {
        if (parseInt(this.online) - parseInt(this.lower) <= 0) {
          this.$message.error(`${this.title}上限应大于${this.title}下限！`);
          this.lower = "";
          this.online = "";
          this.numReturned();
        } else {
          this.numReturned();
        }
      } else {
        this.numReturned();
      }
    },
    numReturned() {
      this.$emit("numReturned", {
        lower: this.lower == null ? "" : this.lower,
        online: this.online == null ? "" : this.online,
      });
    },
  },
};
</script>
<style lang="scss">
.ageInput.el-input {
  // width: 150px !important;
}
</style>
