<!--信用分设置-->
<template>
  <div class="app-container Markconfig">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">信用分设置</p>
      <p class="page-top-title-button-p" style="width:100px;" v-hasPermiRouter="['exam:markConfig:edit']" @click="addObj">添加分值段</p>
      <p class="page-top-title-out-p" v-hasPermiRouter="['exam:markConfig:edit']" @click="getList">重置</p>
      <p class="page-top-title-submit-p" v-hasPermiRouter="['exam:markConfig:edit']" @click="submitForm">保存</p>
    </div>
    <el-form class="form-content scrollbar-box" ref="form" :model="form" :rules="rules" v-if="pageType">
      <div style="display: flex">
        <el-form-item label="信用分合格分值：" prop="thresholdQualify" label-width="160px">
          <el-input
            v-model="form.thresholdQualify"
            placeholder="请输入信用分合格分值"
            maxLength="5"
            clearable
            style="width:180px;">
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="黑名单分值：" prop="thresholdBlacklist" label-width="120px">
          <el-input
            v-model="form.thresholdBlacklist"
            placeholder="请输入黑名单分值"
            maxLength="5"
            clearable
            style="width:180px;">
            <template slot="append">分</template>
          </el-input>
          <span class="annotation-span" style="margin-left:20px;">信用分小于等于设定的分值即进入黑名单</span>
        </el-form-item>
      </div>
      <el-form-item label="信用分值段设置：" prop="thresholdQualify" label-width="160px" style="margin-bottom:10px;">
        <span class="annotation-span">可设置多个分值段，系统根据设置自动处理</span>
      </el-form-item>
      <div class="max-add-for-box">
        <div class="max-add-for-box-min" v-for="(item,index) in form.ranges">
          <p class="position-del-p el-icon-circle-close" v-if="index!=0" @click="delObj(index)"></p>
          <div class="for-interval-flex-box">
            <p class="for-interval-title-p min-p-color">信用分值区间</p>
            <el-form-item label="" :rules="rules.start" :prop="'ranges.'+ index +'.start'" style="margin-bottom:15px;">
              <el-input
                v-model="item.start"
                placeholder="请输入最小值"
                maxLength="5"
                clearable
                size="small">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
            <p class="for-interval-p">~</p>
            <el-form-item label="" :rules="rules.end" :prop="'ranges.'+ index +'.end'" style="margin-bottom:15px;">
              <el-input
                v-model="item.end"
                placeholder="请输入最大值"
                maxLength="5"
                clearable
                size="small">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="for-check-max-box">
            <el-form-item label="" :rules="rules.checkListTwo" :prop="'ranges.'+ index +'.checkListTwo'">
              <p class="min-p-color" style="margin-bottom:10px;">处理方式</p>
              <el-form-item label="">
                <el-checkbox-group v-model="item.checkList" style="display: inline-block;width:270px;">
                  <el-checkbox label="warn">警告<span style="color:#999;">（系统推送警告消息）</span></el-checkbox>
                </el-checkbox-group>
                <el-checkbox-group v-model="item.checkList" style="display: inline-block;width:270px;">
                  <el-checkbox label="meet">约谈<span style="color:#999;">（线下约谈）</span></el-checkbox>
                </el-checkbox-group>
                <el-checkbox-group v-model="item.checkListTwo" style="display: inline-block;width:270px;">
                  <el-checkbox label="exam">考试</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div style="display: flex;">
                <div class="for-check-box" style="min-width:210px;max-width:520px;">
                  <el-checkbox-group v-model="item.checkListTwo" @change="(data)=>checkClickOne(data,item,'xx')" style="height:40px;line-height:40px;width:80px;">
                    <el-checkbox label="learn">学习</el-checkbox>
                  </el-checkbox-group>
                  <p v-if="item.learnStatusType">学习时长：</p>
                  <el-form-item label="" :rules="rules.learnMinute" :prop="'ranges.'+ index +'.learnMinute'" v-if="item.learnStatusType">
                    <el-input
                      style="width:150px;"
                      v-model="item.learnMinute"
                      placeholder="请输入"
                      maxLength="5"
                      clearable
                      size="small">
                      <template slot="append">分</template>
                    </el-input>
                  </el-form-item>
                </div>
                <div class="for-check-box" style="margin-left:60px;">
                  <el-checkbox-group v-model="item.checkListTwo" @change="(data)=>checkClickTwo(data,item,'zt')" style="height:40px;line-height:40px;width:80px;">
                    <el-checkbox label="exercise">做题</el-checkbox>
                  </el-checkbox-group>
                  <p v-if="item.practiceStatusType">题目数量：</p>
                  <el-form-item label="" :rules="rules.numberTopics" :prop="'ranges.'+ index +'.numberTopics'" v-if="item.practiceStatusType">
                    <el-input
                      style="width:150px;"
                      v-model="item.numberTopics"
                      placeholder="请输入"
                      maxLength="5"
                      clearable
                      size="small">
                      <template slot="append">道</template>
                    </el-input>
                  </el-form-item>
                  <p v-if="item.practiceStatusType" style="margin-left:20px;">正确率：</p>
                  <el-form-item label="" :rules="rules.numberAccuracy" :prop="'ranges.'+ index +'.numberAccuracy'" v-if="item.practiceStatusType">
                    <el-input
                      style="width:150px;"
                      v-model="item.numberAccuracy"
                      placeholder="请输入"
                      maxLength="5"
                      clearable
                      size="small">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="" :rules="rules.expires" :prop="'ranges.'+ index +'.expires'" style="margin-bottom:0;">
              <p class="interval-title-p min-p-color">处理天数时限</p>
              <el-input
                v-model="item.expires"
                placeholder="请输入"
                maxLength="5"
                clearable
                style="width:200px;">
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { examMarkConfigList, examMarkConfigAdd, examMarkConfigEdit } from "@/api/creditViolation/index";
import { creditCreditConfigQuery,creditCreditConfigAdd } from "@/api/creditViolation/newIndex";

export default {
  name: "Markconfig",
  data() {
    return {
      //页面状态
      pageType:false,
      // 遮罩层
      loading: true,
      //数据
      form:{},
      // 表单校验
      rules: {
        thresholdQualify: [
          { required: true, message: "请输入信用分合格分值", trigger: "blur" },
          { required: true, message: "请输入信用分合格分值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        gainSafeCertList: [
          { required: true, message: "请选择信用分合格分值获取条件", trigger: "blur" }
        ],
        thresholdBlacklist: [
          { required: true, message: "请输入黑名单分值", trigger: "blur" },
          { required: true, message: "请输入黑名单分值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        start: [
          { required: true, message: "请输入最小值", trigger: "blur" },
          { required: true, message: "请输入最小值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        end: [
          { required: true, message: "请输入最大值", trigger: "blur" },
          { required: true, message: "请输入最大值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        checkListTwo: [
          { required: true, message: "请在考试/学习/做题中至少选择一种", trigger: "blur" }
        ],
        learnHour: [
          { required: true, message: "请输入小时", trigger: "blur" },
          { required: true, message: "请输入小时", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        learnMinute: [
          { required: true, message: "请输入分钟", trigger: "blur" },
          { required: true, message: "请输入分钟", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        numberTopics: [
          { required: true, message: "请输入数量", trigger: "blur" },
          { required: true, message: "请输入数量", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        numberAccuracy: [
          { required: true, message: "请输入百分比", trigger: "blur" },
          { required: true, message: "请输入百分比", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        expires: [
          { required: true, message: "请输入处理天数时限", trigger: "blur" },
          { required: true, message: "请输入处理天数时限", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //勾选学习
    checkClickOne(data,item,name){
      if(name == 'xx'){
        let num = 0;
        for(let i=0;i<data.length;i++){
          if('learn' == data[i]){
            num++
          }
        }
        item.learnStatusType = num != 0;
      }
    },
    //勾选做题
    checkClickTwo(data,item,name){
      if(name == 'zt'){
        let num = 0;
        for(let i=0;i<data.length;i++){
          if('exercise' == data[i]){
            num++
          }
        }
        item.practiceStatusType = num != 0;
      }
    },
    //添加分值段
    addObj(){
      let obj = {
        start:"",//最小信用分
        end:"",//最大信用分
        checkList:[],//处理方式
        checkListTwo:[],//处理方式
        warn:"",//警告
        meet:"",//约谈
        exam:"",//考试
        learn:"",//学习
        learnStatusType:false,
        learnHour:"",//学习小时
        learnMinute:"",//学习分钟
        exercise:"",//做题
        practiceStatusType:false,
        numberTopics:"",//做题数量
        numberAccuracy:"",//做题准确率
        expires:"",//天数
      };
      this.form.ranges.push(obj);
    },
    //删除分段数据
    delObj(index){
      this.form.ranges.splice(index,1);
    },
    /** 查询数据 */
    getList() {
      this.pageType = false;
      creditCreditConfigQuery().then( response => {
        let mod = {
          thresholdQualify:response.data.thresholdQualify,
          thresholdBlacklist:response.data.thresholdBlacklist,
          ranges:[],
        }
        for(let i=0;i<response.data.ranges.length;i++){
          let obj = {
            start:response.data.ranges[i].start,
            end:response.data.ranges[i].end,
            expires:response.data.ranges[i].expires,
            checkList:[],
            checkListTwo:[],
          }
          let learn = false;
          let exercise = false;
          for(let o=0;o<response.data.ranges[i].means.length;o++){
            if(response.data.ranges[i].means[o].meansCode == 'learn'){
              learn = true;
            }else if(response.data.ranges[i].means[o].meansCode == 'exercise'){
              exercise = true;
            }
          }
          for(let o=0;o<response.data.ranges[i].means.length;o++){
            if(response.data.ranges[i].means[o].meansCode == 'warn'){
              if(response.data.ranges[i].means[o].configValue == 1){
                obj.checkList.push('warn')
              }
            }else if(response.data.ranges[i].means[o].meansCode == 'meet'){
              if(response.data.ranges[i].means[o].configValue == 1){
                obj.checkList.push('meet')
              }
            }else if(response.data.ranges[i].means[o].meansCode == 'exam'){
              if(response.data.ranges[i].means[o].configValue == 1){
                obj.checkListTwo.push('exam')
              }
            }else if(response.data.ranges[i].means[o].meansCode == 'learn'){
              if(learn){
                if(response.data.ranges[i].means[o].configValue != 0){
                  obj.checkListTwo.push('learn')
                  obj.learnMinute = response.data.ranges[i].means[o].configValue;
                  obj.learnStatusType = true;
                }else {
                  obj.learnMinute = "";
                  obj.learnStatusType = false;
                }
              }else{
                obj.learnMinute = "";
                obj.learnStatusType = false;
              }
            }else if(response.data.ranges[i].means[o].meansCode == 'exercise'){
              if(exercise){
                if(response.data.ranges[i].means[o].configValue != 0){
                  obj.checkListTwo.push('exercise')
                  obj.numberTopics = response.data.ranges[i].means[o].configValue;
                  obj.numberAccuracy = response.data.ranges[i].means[o].configValueTwo;
                  obj.practiceStatusType = true;
                }else{
                  obj.numberTopics = "";
                  obj.numberAccuracy = "";
                  obj.practiceStatusType = false;
                }
              }else{
                obj.numberTopics = "";
                obj.numberAccuracy = "";
                obj.practiceStatusType = false;
              }
            }
          }
          mod.ranges.push(obj);
        }
        this.$set(this,'form',mod);
        this.pageType = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      let self = this;
      this.$refs["form"].validate(valid => {
        if (valid) {
          for(let i=0;i<self.form.ranges.length;i++){
            if(self.form.ranges[i].start >= self.form.ranges[i].end){
              this.msgError('信用分值区间,最小值不能大于等于最大值')
              return
            }
          }
          let newObj = JSON.parse(JSON.stringify(this.form));
          let mod = {
            thresholdQualify:newObj.thresholdQualify,
            thresholdBlacklist:newObj.thresholdBlacklist,
            ranges:[],
          };
          for(let i=0;i<newObj.ranges.length;i++){
            let obj = {
              sort:i,
              start:newObj.ranges[i].start,
              end:newObj.ranges[i].end,
              expires:newObj.ranges[i].expires,
              means:[],
            };
            let meet = false;
            let warn = false;
            let exam = false;
            let learn = false;
            let exercise = false;
            for(let o=0;o<newObj.ranges[i].checkList.length;o++){
              if(newObj.ranges[i].checkList[o] == 'warn'){
                warn = true;
              }else if(newObj.ranges[i].checkList[o] == 'meet'){
                meet = true;
              }
            }
            for(let o=0;o<newObj.ranges[i].checkListTwo.length;o++){
              if(newObj.ranges[i].checkListTwo[o] == 'exam'){
                exam = true;
              }else if(newObj.ranges[i].checkListTwo[o] == 'learn'){
                learn = true;
              }else if(newObj.ranges[i].checkListTwo[o] == 'exercise'){
                exercise = true;
              }
            }
            //警告
            if(warn){
              obj.means.push({
                meansCode:'warn',
                configValue:1
              })
            }else{
              obj.means.push({
                meansCode:'warn',
                configValue:0
              })
            }
            //约谈
            if(meet){
              obj.means.push({
                meansCode:'meet',
                configValue:1
              })
            }else{
              obj.means.push({
                meansCode:'meet',
                configValue:0
              })
            }
            //考试
            if(exam){
              obj.means.push({
                meansCode:'exam',
                configValue:1
              })
            }else{
              obj.means.push({
                meansCode:'exam',
                configValue:0
              })
            }
            //学习
            if(learn){
              obj.means.push({
                meansCode:'learn',
                configValue:newObj.ranges[i].learnMinute
              })
            }else{
              obj.means.push({
                meansCode:'learn',
                configValue:0
              })
            }
            //做题
            if(exercise){
              obj.means.push({
                meansCode:'exercise',
                configValue:newObj.ranges[i].numberTopics,
                configValueTwo:newObj.ranges[i].numberAccuracy,
              })
            }else{
              obj.means.push({
                meansCode:'exercise',
                configValue:0,
                configValueTwo:0
              })
            }
            mod.ranges.push(obj)
          }
          creditCreditConfigAdd(mod).then( response => {
            this.msgSuccess("保存成功");
          });
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
  .Markconfig {
    .title-p{
      margin:0;
      line-height:80px;
      font-size:18px;
      color:#0045AF;
      border-bottom:2px solid #E0E0E0;
    }
    .form-content{
      overflow-y: scroll;
      flex:1;
      padding-top:22px;
      .interval-flex-box{
        margin-left:220px;
        display: flex;
        .interval-title-p{
          width:100px;
          line-height:40px;
          font-size:14px;
          margin:0;
        }
        .interval-p{
          width:40px;
          text-align: center;
          line-height:40px;
          margin:0;
        }
      }
      .min-p-color{
        color:#606266;
        font-size:14px;
        margin:0;
      }
      .check-box{
        display: flex;
      }
      .annotation-span{
        font-size:14px;
        font-weight:500;
        line-height:40px;
        color:#999999;
      }
      .max-add-for-box{
        margin-left:140px;
        .max-add-for-box-min{
          border:1px solid #dedede;
          width:1200px;
          margin:20px 20px;
          border-radius:4px;
          padding:20px 20px 40px 20px;
          position: relative;
          .position-del-p{
            position: absolute;
            right:10px;
            top:10px;
            font-size:24px;
            color:#999;
            cursor:pointer;
          }
          .position-del-p:hover{
            color: #E65D6E;
          }
          .for-interval-flex-box{
            display: flex;
            .for-interval-title-p{
              width:100px;
              line-height:40px;
              font-size:14px;
              margin:0;
            }
            .for-interval-p{
              width:40px;
              text-align: center;
              line-height:40px;
              margin:0;
            }
          }
          .for-check-max-box{
            .for-check-box{
              display: flex;
              p{
                margin:0;
                font-size:14px;
                color:#606266;
                font-weight:500;
                line-height:40px;
              }
            }
          }
        }
      }
    }
    .form-bottom-button-box{
      height:80px;
      padding:20px;
      display: flex;
      .null-p-button{
        flex:1;
      }
    }
  }
</style>
