<template>
  <div>
    <el-input :value="first"
              @input="doInputFirst"
              placeholder="请输入区间值"/>
    <el-input :value="second"
              @input="doInputSecond"
              placeholder="请输入区间值"/>
  </div>
</template>

<script>
export default {
  name: "SectionInput",
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  computed: {
    first() {
      if (this.value) {
        let arr = this.value.split(",")
        if (arr.length > 0) {
          return arr[0]
        }
      }
      return ''
    },
    second() {
      if (this.value) {
        let arr = this.value.split(",")
        if (arr.length > 1) {
          return arr[1]
        }
      }
      return ''
    },
  },
  methods: {
    doInputFirst(value) {
      let arr = this.value.split(',')
      if (arr.length > 0) {
        arr[0] = value
      } else {
        arr = [value]
      }
      this.$emit('changeValue', arr.join(","))
    },
    doInputSecond(value) {
      let arr = this.value.split(',')
      if (arr.length > 1) {
        arr[1] = value
      } else if (arr.length === 0) {
        arr = ['', value]
      } else {
        arr.push(value)
      }
      this.$emit('changeValue', arr.join(","))
    },
  }
}
</script>

<style scoped>

</style>
