<template>
  <div class="input-rang-box">
    <el-input v-model="startNum" @change="valChange" v-onlyInt></el-input> 至
    <el-input v-model="endNum" @change="valChange" v-onlyInt></el-input>
  </div>
</template>

<script>
export default {
  props: {
    value: { type: [String, Number], default: () => '' }
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  data() {
    return {
      startNum: '',
      endNum: '',
      inputData: this.value
    }
  },
  mounted() {
    if (this.value) {
      if (typeof this.value === 'number' || this.value.indexOf(',') == -1) {
        this.startNum = ''
        this.endNum = ''
        this.valChange()
      } else {
        this.startNum = this.value.split(',')[0]
        this.endNum = this.value.split(',')[1]
      }
    }
  },
  watch: {
    value(val) {
      this.inputData = val
    },
    inputData(val) {
      if (val) {
        if (typeof val === 'number' || val.indexOf(',') == -1) {
          this.startNum = ''
          this.endNum = ''
          this.valChange()
        } else {
          this.startNum = val.split(',')[0]
          this.endNum = val.split(',')[1]
        }
      }
    }
  },
  methods: {
    valChange() {
      if (this.startNum && this.endNum) {
        this.$emit('input', `${this.startNum},${this.endNum}`)
      } else {
        this.$emit('input', '')
      }
    }
  }
}
</script>

<style scoped lang="less">
.input-rang-box {
  display: flex;
  line-height: 35px;
}
</style>
