<!--违规设置-->
<template>
  <div class="app-container violation-site">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">违规设置</p>
      <p class="page-top-title-out-p" v-hasPermiRouter="['exam:violationSite:add']" @click="getList">重置</p>
      <p class="page-top-title-submit-p" v-hasPermiRouter="['exam:violationSite:add']" @click="submitForm">提交</p>
    </div>
    <el-form class="form-content scrollbar-box" ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="负面清单次数设置：" prop="violationNumber" label-width="240px">
        <el-input
          v-model="form.violationNumber"
          placeholder="请输入负面清单次数"
          maxLength="5"
          clearable
          size="small">
          <template slot="append">次</template>
        </el-input>
      </el-form-item>
      <el-form-item label="违规项设置：" label-width="240px">
        <div style="display: flex">
          <el-input
            v-model="violationName"
            placeholder="请输入违规项名称"
            clearable
            maxLength="14"
            size="small"
          />
          <p class="page-add-common-style-button"
             style="margin-left:20px;width:140px;"
             @click="addViolationMeth"
          ><i class="el-icon-plus"></i>添加违规项</p>
        </div>
      </el-form-item>
      <div v-for="(item,index) in form.violationMeth">
        <el-form-item :label="item.violationName+'：'" :rules="rules.violationVal" :prop="'violationMeth.'+ index +'.violationVal'" label-width="240px">
          <div class="violationMeth-for-box">
            <el-input
              v-model="item.violationVal"
              placeholder="请输入扣分值"
              clearable
              maxLength="5"
              size="small">
              <template slot="append">分</template>
            </el-input>
            <i class="el-icon-circle-close" @click="delViolationMeth(index)"></i>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { examViolationSiteList, examViolationSiteAdd } from "@/api/creditViolation/index";

export default {
  name: "Site",
  data() {
    return {
      //数据
      violationTypeList:[
        {violationVal:"警告"},{violationVal:"约谈"},{violationVal:"考试"},{violationVal:"学习"},{violationVal:"做题"}
      ],
      form:{
        violationType:[],
        violationNumber:"",
        violationMeth:[
          {
            violationName:"",
            violationVal:"",
          }
        ],
      },
      violationVal:"",
      violationName:"",
      // 表单校验
      rules: {
        violationNumber: [
          { required: true, message: "请输入负面清单次数", trigger: "blur" },
          { required: true, message: "请输入负面清单次数", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        violationVal: [
          { 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: {
    //添加违规项
    addViolationMeth(){
      let self = this;
      if(!this.violationName){
        this.msgError("请先输入违规项名称");
        return
      }
      for(let i=0;i<self.form.violationMeth.length;i++){
        if(self.violationName == self.form.violationMeth[i].violationName){
          self.msgError("已存在相同名称的违规项");
          return
        }
      }
      let obj = {
        violationName:this.violationName,
        violationVal:"",
      };
      this.form.violationMeth.push(obj);
      this.violationName = "";
    },
    //删除违规项
    delViolationMeth(index){
      this.form.violationMeth.splice(index,1);
    },
    /** 查询数据 */
    getList() {
      examViolationSiteList({}).then( response => {
        this.$set(this,'form',response.data)
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let obj = {
            violationMeth: [
              {
                violationVal: this.form.violationNumber,
                violationName: "负面清单次数",
                violationType: 0,
              }
            ]
          }
          this.form.violationMeth.forEach((item)=>{
            obj.violationMeth.push({
              violationVal:item.violationVal,
              violationName:item.violationName,
              violationType:1,
            })
          })
          examViolationSiteAdd(obj).then( response => {
            this.getList();
            this.msgSuccess("保存成功")
          });
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
  .violation-site {
    .form-content{
      overflow-y: scroll;
      padding:20px 20px 0;
      flex:1;
      .violationType-for-max-box{
        padding:0 240px;
        margin-bottom:2px;
        .violationType-for-min-box{
          display: inline-block;
          margin:0 20px 20px 0;
          div{
            display: flex;
            /*border:1px solid #dedede;*/
            background: #CCE6FE;
            border-radius:4px;
            color:#0183FA;
            padding:6px 10px;
            min-width:100px;
            *{
              margin:0;
              padding:0;
            }
            p{
              font-size:14px;
              flex:1;
              line-height:20px;
              text-align: center;
              font-weight:500;
            }
            i{
              margin-left:10px;
              cursor:pointer;
              line-height:20px;
              font-size:16px;
            }
            i:hover{
              color:#E65D6E;
            }
          }
        }
      }
      .violationMeth-for-box{
        display: flex;
        i{
          color:#666;
          margin-left:20px;
          cursor:pointer;
          line-height:40px;
          font-size:20px;
        }
        i:hover{
          color:#E65D6E;
        }
      }
      .annotation-span{
        margin-left:20px;
        font-size:14px;
        font-weight:500;
        color:#999999;
      }
    }
    .form-bottom-button-box{
      height:80px;
      padding:20px;
      display: flex;
      .null-p-button{
        flex:1;
      }
    }
  }
</style>
