<template>
  <div>
    <el-button-group>
      <el-button size="small"  :disabled="disabled" @click.stop="openScope">
        {{btRemark}}
      </el-button>
      <el-button size="small" icon="el-icon-delete" :disabled="disabled" @click.stop="clearScope"/>
    </el-button-group>

    <el-dialog
        :visible.sync="showScope"
        :show-close="false"
        width="600px"
        :title="title"
        center
        :before-close="onBeforeClose"
    >
      <el-form>
        <el-form-item>
          <el-input
              v-model="minValue"
              size="medium"
              clearable
              @input="onMinInput"
              :disabled="disabled"
              style="width: 200px;"
          >
            <template #prepend>最小值</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
              v-model="maxValue"
              size="medium"
              clearable
              @input="onMaxInput"
              :disabled="disabled"
              style="width: 200px;"
          >
            <template #append>最大值</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button size="small" @click="onBeforeClose">取消</el-button>
            <el-button type="primary" size="small" @click="submit">确定</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {onlyNumberFilter} from "@/utils";
export default {
  name: "numberRangeSelector",
  props:{
    title:{
      type: String,
      default: ''
    },
    min:{
      type: Number,
      default: null
    },
    max:{
      type: Number,
      default: null
    },
    disabled:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      showScope:false,
      minValue:this.min,
      maxValue:this.max,
    }
  },
  computed: {
    text(){
      return this.min !== null && this.max !== null ? `分值区间 ${this.min} - ${this.max}` : ''
    },
    btRemark(){
      return !!this.text ? this.text : '分值区间'
    },

  },
  methods: {
    onMaxInput(v){
      this.maxValue = onlyNumberFilter(v)
    },
    onMinInput(v){
      this.minValue = onlyNumberFilter(v)
    },
    submit(){
      let min = null
      let max = null
      if(this.minValue !== null && this.maxValue !== null && this.minValue !== '' && this.maxValue !== ''){
        min = Number(this.minValue)
        max = Number(this.maxValue)
        if(!Number.isInteger(min) || !Number.isInteger(max)) {
          this.$message.error('只支持整数区间')
          return
        }
      }else {
        this.minValue = null
        this.maxValue = null
      }
      this.$emit("update:min",min)
      this.$emit("update:max",max)
      this.$emit("scopeSubmit")
      this.showScope = false
    },
    clearScope(){
      this.minValue = null
      this.maxValue = null
      this.$emit("update:min",this.minValue)
      this.$emit("update:max",this.maxValue)
      this.$emit("scopeSubmit")
    },
    onBeforeClose(){
      this.showScope = false
      this.minValue = this.min
      this.maxValue = this.max
    },
    openScope(){
      this.showScope = true
    },
  }

}
</script>


<style scoped lang="scss">

</style>