
<template>
  <div class="all">
    <div class="flex-box main">
      <div class="flex-1 left">
        <ul class="ul">
          <!-- <li class="li fontColorB" :class="[isActive == 1 ? 'active-li' : '']" @click="active(1)">评分设置</li> -->
          <li class="li fontColorB" :class="[isActive == 2 ? 'active-li' : '']" @click="active(2)">绩效等级配置（默认）</li>
        </ul>
      </div>
      <div class="flex-5 right">
        <div v-show="isActive == 1">
          <el-form ref="detailForm" :model="ruleForm" :rules="rules" @submit.native.prevent label-width="150px">
            <div class="title">
              总分规则
              <span class="fontColorB">（量化指标和非量化指标）</span>
            </div>
            <el-form-item label="自定义" prop="dept_id">
              <el-select v-model="ruleForm.region" placeholder="请选择自定义" disabled style="width: 300px;">
                <el-option label="量化指标和非量化指标合并计算" value="shanghai"></el-option>
                <el-option label="量化指标和非量化指标分开计算" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <div class="title">量化指标</div>
            <el-form-item label="指标类型" prop="name">
              <el-select v-model="ruleForm.region" disabled style="width: 300px;"><el-option label="数字类型" value="shanghai"></el-option></el-select>
            </el-form-item>
            <el-form-item label="总分自动加和" prop="tel"><el-switch v-model="ruleForm.delivery" disabled></el-switch></el-form-item>
            <el-form-item label="录入方式" prop="company_id">
              <el-select v-model="ruleForm.region" disabled style="width: 300px;"><el-option label="文本框输入" value="shanghai"></el-option></el-select>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="isActive == 2">
          <el-form ref="detailForm" :model="ruleForm" :rules="rules" @submit.native.prevent label-width="150px">
            <div class="title">绩效等级配置</div>
<!--            <el-form-item label="绩效等级" prop="tel">
              <template slot="label">
                <span>绩效等级</span>
                <el-tooltip effect="dark" content="设置公司的等级名称及对应占比，考核结束后，将按照考核结果的排名，正态强制分布。如：排名前10%的员工绩效等级为3.75" placement="top">
                  <i class="el-icon-warning"></i>
                </el-tooltip>
              </template>
              <el-switch v-model="level_enable" disabled :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="录入方式" prop="company_id">
              <el-select v-model="ruleForm.region" disabled><el-option label="文本框输入" value="shanghai"></el-option></el-select>
            </el-form-item> -->
            <div style="height: 30px;"></div>
            <ClassSet ref="ClassSet" :inputs="inputs" :inputsStyle="{paddingLeft:'150px',width: '600px'}"></ClassSet>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer"><el-button type="primary" :loading="loading" @click="save()">保存设置</el-button></div>
  </div>
</template>

<script>
import ClassSet from '@/components/public/ClassSet';
export default {
  components:{ClassSet},
  name: 'BasicsSet',
  data() {
    return {
      loading:false,
      isActive: 2,
      ruleForm: {
        region:'shanghai',
        delivery:true
      },
      rules: {},
      inputs: [],//分值区间
      level_enable:true,//是否开启绩效等级
      isSave:true
    };
  },
  watch: {},
  created() {
    this.getAllSet();
  },
  mounted() {},
  methods: {
    // 获取全局设置
    getAllSet(){
      this.$axios('get','api/per/user/base_config').then(res=>{
            let data=res.data.data;
            let levels=data.level_scope.levels;
            this.level_enable=data.level_enable;
            var inputs=[];
            var max=0;//最大值
            if(levels){
              levels.forEach((item,index)=>{
                var obj;
                if(index==0){
                  obj={name:item.name,max:Number(item.value),min:0};
                }else{
                  obj={name:item.name,max:Number(item.value),min:max};//当不是第一个等级时，最小值为上一个的最大值
                }
                max=item.value;
                inputs.push(obj);
              })
              this.inputs=inputs
            }
      })
    },
    //保存
    save(){
        let is=true,level_scope=[];
        let isSave=this.$refs.ClassSet.isSave
        let inputsList=this.$refs.ClassSet.inputsList
        if(!isSave){
          return false
        }
        inputsList.some(item=>{
          if(!item.name){
            this.$message.error('等级的名称不能为空');
            is=false;
            return true;
          }
          if(item.max==0){
            this.$message.error('最大值不能为空或者0');
            is=false;
            return true;
          }
          level_scope.push({name:item.name,value:Number(item.max)});
        })

        var level_scopes={//参数的数据结构
          levels:level_scope
        };
        if(is){
          this.loading=true;
          this.$axios('post','api/per/user/set_base_config',{level_scope:JSON.stringify(level_scopes)}).then(res=>{
             this.$message.success('设置成功');
             this.getAllSet();
          }).finally(()=>{
             this.loading=false;
          })
        }
    },
    // 监听最大值输入
    InputBiur(e, index) {
      this.isSave=true
      var max = this.inputsList[index].max;
      var min = 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);
      }
      // // this.inputsList.some((item, i) => {
      // //   if (i == index) {
      //     this.inputsList.splice(i, 1); //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
      // //     return true;
      // //   }
      // // });
    },
    active(index) {
      this.isActive = index;
    }
  }
};
</script>
<style scoped="scoped">
.all {
  padding: 10px;
  min-height: calc(100vh - 210px);
  position: relative;

}
.title {
  font-weight: 600;
  margin-bottom: 10px;
  background-color: #f5f7fa;
  padding: 15px;
}
.main {
  min-height: calc(100% - 40px);
}
.title-f {
  margin-bottom: 20px;
}
.footer {
  background-color: #fff;
  border-top: 1px solid #ebebeb;
  height: 40px;
  text-align: center;
  padding-top: 10px;
}
.checkChild {
  background-color: #fbfdff;
  margin-left: 20px;
}
.left,
.right {
  height: 100%;
  overflow: auto;
}
.ul {
  border: 1px solid #ebebeb;
  height: 100%;
  border-bottom: none;
}
.li {
  padding: 15px;
  position: relative;
}
.li:hover {
  background-color: #f5f7fa;
}
.active-li {
  color: #409eff !important;
  background-color: #f5f7fa;
}
.active-li::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 100%;
  background-color: #409eff;
  left: 0;
  top: 0;
}
</style>
