<template>
  <div class="inputs" :style="inputsStyle">
    <div class="flex-box inputs-h">
      <div class="flex-3" style="margin-right: 20px;">等级名称</div>
      <div class="flex-5">分数区间范围</div>
    </div>
    <div class="flex-box inputs-m" v-for="(item, index) in inputsList" :key="index">
      <div class="flex-3" style="margin-right: 20px;"><el-input :disabled="readOnly" v-model="item.name" placeholder="请输入" ></el-input></div>
      <div class="flex-5 flex-box-ce">
        <el-input v-model.number="item.min"  disabled style="width: 80px;"></el-input>
        <span class="inputs-text">
          <span>≤</span>
            分数 <
        </span>
        <el-input
         :disabled="readOnly"
          v-model.number="item.max"
          style="width: 80px"
          :min="item.min"
          
          @input="checkCountry($event, index)"
          :id="index + 'input'"
          placeholder="请输入"
          @blur="InputBiur($event, index)"
        ></el-input>
        <i class="el-icon-delete" v-if="inputsList.length!=1 && !readOnly" @click="deleteInput(index)"></i>
      </div>
    </div>
    <div v-if="!readOnly" class="fontColorC" style="font-size: 12px;margin: 10px 0;text-align: center;">等级从劣到优设置</div>
    <div v-if="!readOnly" class="blue inputs-add">
      <span @click="addInput()">
        <i class="el-icon-circle-plus-outline"></i>
        添加等级
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ClassSet',
  props: {
    readOnly: {//只读
      type: Boolean,
      default: false,
    },
    inputs: {
      type: Array,
      default: () => {
        return [];
      }
    },
    inputsStyle: {
      type: Object,
      default: () => {
        return { paddingLeft: '0px', width: '450px' };
      }
    }
  },
  data() {
    return {
      inputsList: [{ name: 'C', min: 0, max: 60 }, { name: 'B', min: 60, max: 80 }, { name: 'A', min: 80, max: 100 }], //分值区间
      isSave: true
    };
  },
  watch: {
    inputs(val) {
      if (val.length > 0) {
        this.inputsList = val;
      }
    }
  },
  methods: {
    checkCountry(e, index) {
      //解决v-model与oninput同时使用失效问题
      var dom = document.getElementById(index + 'input');
      var value = dom.value;
      //写你自己的输入规则
      value = value.replace(/[^\d]/g, '');
      dom.value = value; //输入框赋值
      this.$set(this.inputsList[index], 'max', dom.value);
    },
    // 监听最大值输入
    InputBiur(e, index) {
      this.isSave = true;
      var max = Number(this.inputsList[index].max);
      var min = Number(this.inputsList[index].min);
      if (max == 0) {
        return false;
      }
      if (min >= max) {
        this.$message.error('不能小于或等于' + min);
        this.$set(this.inputsList[index], 'max', 0);
        this.isSave = false;
        return false;
      }
      if (this.inputsList[index + 1]) {
        this.$set(this.inputsList[index + 1], 'min', max);
      }
    },
    addInput() {
      if (this.inputsList.length == 10) {
        this.$message.error('最高10个级别');
        return false;
      }
      var max = this.inputsList[this.inputsList.length - 1].max;
      this.inputsList.push({ name: '', min: max, max: 0 });
    },
    deleteInput(index) {
      // if (index == 0) {
      //   this.$message.error('至少保留一个等级');
      //   return false;
      // }
      var min = this.inputsList[index].min; //获取当前元素最小值
      this.inputsList.splice(index, 1);
      if (index != this.inputsList.length) {
        //当删除不是最后一位时
        this.$set(this.inputsList[index], 'min', min);
      }
    }
  }
};
</script>

<style scoped="scoped">
.inputs {
  font-size: 14px;
}
.inputs-h {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.inputs-m {
  margin-bottom: 5px;
}
.inputs-text {
  margin: 0 10px;
}
.el-icon-delete {
  margin-left: 10px;
  font-size: 24px;
  color: #777777;
  cursor: pointer;
}
.el-icon-delete:hover {
  color: #f56c6c;
}
.inputs-add {
  margin: 10px 0 20px 0;
}
.inputs-add span {
  cursor: pointer;
}
</style>
