<template>
  <div class="input-interval">
<!--    <div class="el-date-editor el-range-editor el-input__inner">-->
<!--      <input autocomplete="off" name="l" class="el-range-input">-->
<!--      <span class="el-range-separator" style="width: 10%">至</span>-->
<!--      <input autocomplete="off" name="a" class="el-range-input">-->
<!--      <i class="el-input__icon el-range__close-icon el-icon-circle-close"></i>-->
<!--    </div>-->
    <el-input v-model="startValue"
              :placeholder="startPlaceholder"
              @blur="startBlur"
              :maxlength="maxlength[0]">
    </el-input>
    <slot name="range-separator">
      <span class="input-interval-separator">{{ rangeSeparator }}</span>
    </slot>
    <el-input v-model="endValue"
              :placeholder="endPlaceholder"
              :maxlength="maxlength[1]"
              @blur="endBlur">
    </el-input>
  </div>
</template>

<script>
import { regExp } from '@/validator/index'
export default {
  props: {
    // 输入框类型
    type: {
      type: String,
      default () {
        return 'text'
      }
    },
    // 输入框尺寸
    size: {
      type: String,
      default () {
        return null
      }
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 是否禁用
    readonly: {
      type: Boolean,
      default () {
        return false
      }
    },
    value: {
      type: Array,
      default () {
        return ['', '']
      }
    },
    // 输入框占位文本
    placeholder: {
      type: String,
      default () {
        return '请输入'
      }
    },
    rangeSeparator: {
      type: String,
      default: '至'
    },
    startPlaceholder: {
      type: String,
      default: '请输入'
    },
    endPlaceholder: {
      type: String,
      default: '请输入'
    },
    width: {
      type: String,
      default () {
        return '100%'
      }
    },
    maxlength: {
      type: Array,
      default () {
        return [8, 8]
      }
    }
  },
  computed: {
    startValue: {
      get () {
        return this.value[0]
      },
      set (val) {
        if (regExp.InputIntervalAmount.test(val)) {
          this.$emit('input', [val, this.value[1]])
        }
      }
    },
    endValue: {
      get () {
        return this.value[1]
      },
      set (val) {
        if (regExp.InputIntervalAmount.test(val)) {
          this.$emit('input', [this.value[0], val])
        }
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    endBlur () {
      if (!this.UtilJs.isEmpty(this.startValue) && this.UtilJs.isEmpty(this.endValue)) {
        this.endValue = this.startValue
      }
      if (!this.UtilJs.isEmpty(this.endValue) && this.UtilJs.isEmpty(this.startValue)) {
        this.startValue = this.endValue
      }
      if (!this.UtilJs.isEmpty(this.endValue) && !this.UtilJs.isEmpty(this.startValue)) {
        if (Number(this.endValue) < Number(this.startValue)) {
          this.startValue = this.endValue
        }
      }
    },
    startBlur () {
      if (!this.UtilJs.isEmpty(this.endValue) && this.UtilJs.isEmpty(this.startValue)) {
        this.startValue = '0'
      }
      if (!this.UtilJs.isEmpty(this.startValue) && this.UtilJs.isEmpty(this.endValue)) {
        this.endValue = this.startValue
      }
      if (!this.UtilJs.isEmpty(this.endValue) && !this.UtilJs.isEmpty(this.startValue)) {
        if (Number(this.endValue) < Number(this.startValue)) {
          this.endValue = this.startValue
        }
      }
    }
  },
  watch: {
  }
}
</script>

<style scoped>
.input-interval {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/*.input-interval-input.is-disabled {*/
/*  background-color: #f5f7fa;*/
/*  border-color: #dfe4ed;*/
/*}*/
span.input-interval-separator {
  margin: 0 8px;
  color: #666;
}
</style>
