<!-- 日期选择范围-->
<template>
  <div class="date-range">
    <el-input v-model="value[0]" @input="changefirst" ref="first" v-bind="filterAttrs(1)" :maxlength="maxlength" :minlength="minlength"></el-input>
    <el-col :span="2" class="text-center">{{middleText}}</el-col>
    <el-input
      v-model="value[1]"
      @input="changesecond"
      ref="second"
      :maxlength="maxlength"
      :minlength="minlength"
      v-bind="filterAttrs(2)"
    ></el-input>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  data () {
    return {}
  },
  props: {
    value: {
      type: Array,
      default: () => [null, null]
    },
    middleText: {
      type: String,
      default: '-'
    },
    maxlength: {
      type: String,
      default: '20'
    },
    minlength: {
      type: String,
      default: ''
    }
  },
  methods: {
    filterAttrs (num) {
      let obj = Object.create(null)
      obj.placeholder = num === 1 ? '请输入' : '请输入'
      for (let [key, value] of Object.entries(this.$attrs)) {
        let lastKey = key.substring(key.length - 1)
        let currentkey = key.substring(0, key.length - 1)
        if (lastKey === num.toString()) {
          obj[currentkey] = value
        }
      }
      return obj
    },
    changefirst (num) {
      // if (num && num !== 0) {
      //   num = num.toFixed(2)
      //   this.value[0] = num.toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      // } else {
      //   this.value[0] = ''
      // }
      this.$emit('input', this.value)
    },
    changesecond (num) {
      // if (num && num !== 0) {
      //   num = num.toFixed(2)
      //   this.value[1] = num.toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      // } else {
      //   this.value[1] = ''
      // }
      this.$emit('input', this.value)
    }
  }
}
</script>
<style lang="scss" scoped>
.date-range {
  display: flex;
  span {
    width: 24px;
    text-align: center;
  }
  .el-date-editor {
    flex: 1;
  }
}
</style>
