<!--考试类型配置-->
<template>
  <div class="page-container basicConfiguration-examinationConfiguration">
    <div class="top-box">
      <el-form class="add-form-box" :model="newData" ref="form" label-width="">
        <el-form-item label="" prop="examTypeName">
          <div style="display: flex">
            <el-input v-model="newData.examTypeName" placeholder="输入考试类型名称" maxLength="20" style="width:500px;"></el-input>
            <p class="form-button" @click="addButton()">+ 添加</p>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <p class="title-p">考试类型名称</p>
    <div class="bottom-box scrollbar-box">
      <div class="for-box" v-for="(item,index) in dataList" :key="index">
        <div class="input-box" v-if="editorIndex === index">
          <el-input v-model="item.examTypeName" placeholder="输入考试类型名称"
                    maxLength="20" style="flex:1;margin:10px 0 10px 5px;"></el-input>
          <p @click="confirmButton()">确定</p>
        </div>
        <div class="text-box" v-else>
          <p>{{item.examTypeName}}</p>
          <p @click="editorButton(index)" v-if="item.examTypeCode != 'CLASSIFIED'&&item.examTypeCode != 'yzyh'&&item.examTypeCode != 'STUDENT'">修改</p>
          <p @click="delButton(index)" v-if="item.examTypeCode != 'CLASSIFIED'&&item.examTypeCode != 'yzyh'&&item.examTypeCode != 'STUDENT'">删除</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  import { examElExamTypeList,examElExamTypeBbatchSave } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'examinationConfiguration',
    props:{
      propsData:{},
    },
    data(){
      return{
        newData:{
          examTypeName:'',
        },
        dataList:[],
        editorIndex:null,
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      initialize(){
        examElExamTypeList({}).then(response => {
          this.$set(this,'dataList',this.sortExamTypeList(response.data));
        });
      },
      sortExamTypeList(list) {
        if (!Array.isArray(list)) return [];
        const bottomCodes = new Set(['CLASSIFIED', 'yzyh', 'STUDENT']);
        return [...list].sort((a, b) => {
          const weightA = bottomCodes.has(a.examTypeCode) ? 1 : 0;
          const weightB = bottomCodes.has(b.examTypeCode) ? 1 : 0;
          return weightA - weightB;
        });
      },
      //修改按钮
      editorButton(index){
        this.$set(this,'editorIndex',index);
      },
      //确定
      confirmButton(){
        if(!this.dataList[this.editorIndex].examTypeName){
          this.msgError('输入考试类型名称')
          return
        }
        this.$set(this,'editorIndex',null);
      },
      delButton(index){
        this.dataList.splice(index,1)
      },
      addButton(){
        if(!this.newData.examTypeName){
          this.msgError('输入考试类型名称')
          return
        }
        this.dataList.unshift({
          examTypeName:this.newData.examTypeName
        })
        this.$set(this.newData,'examTypeName','');
      },
      //重置
      resetButton(){
        let self = this;
        this.$confirm('确认重置?', "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          this.initialize();
        }).catch(() => {});
      },
      //提交
      submitButton(){
        let self = this;
        if(this.editorIndex!=null){
          this.msgError('请确认考试类型名称')
          return
        }
        this.$confirm('确认提交?', "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          let list = [];
          for(let i=0;i<self.dataList.length;i++){
            let obj = {
              id:self.dataList[i].id?self.dataList[i].id:'',
              examTypeName:self.dataList[i].examTypeName,
            }
            list.push(obj);
          }
          examElExamTypeBbatchSave(list).then(response => {
            self.msgSuccess(response.message);
            self.initialize();
          });
        }).catch(() => {});
      },
    },
  }
</script>

<style scoped lang="scss">
  .basicConfiguration-examinationConfiguration{
    display: flex;
    flex-direction: column;
    flex:1;
    overflow: hidden;
    .top-box{
      height:60px;
      margin:20px 0 0 40px;
      .form-button{
        height:40px;
        line-height:38px;
        margin:0 0 0 10px;
        padding:0 20px;
        border-radius:4px;
        background-color: #0183fa;
        border:1px solid #0183fa;
        color:#fff;
        cursor: pointer;
      }
    }
    .title-p{
      width:600px;
      line-height:60px;
      //background-color: #dedede;
      border-bottom:1px solid #dedede;
      margin-left:40px;
      padding-left:20px;
      font-weight:600;
    }
    .bottom-box{
      flex:1;
      padding:0 20px 0 20px;
      .for-box{
        width:600px;
        border-bottom:1px solid #dedede;
        padding:0 20px 0 0;
        margin-left:20px;
        .text-box{
          display: flex;
          p{
            font-size:14px;
          }
          p:nth-child(1){
            flex:1;
            line-height:60px;
            font-weight:600;
            margin-left:20px;
          }
          p:nth-child(2){
            height:40px;
            line-height:38px;
            margin:10px 0 0 10px;
            padding:0 20px;
            border-radius:4px;
            background-color: #0183fa;
            border:1px solid #0183fa;
            color:#fff;
            cursor: pointer;
          }
          p:nth-child(3){
            height:40px;
            line-height:38px;
            margin:10px 0 0 10px;
            padding:0 20px;
            border-radius:4px;
            background-color: #fff;
            border:1px solid #999;
            color:#999;
            cursor: pointer;
          }
        }
        .input-box{
          display: flex;
          p{
            font-size:14px;
          }
          p:nth-child(1){
            flex:1;
            line-height:60px;
          }
          p:nth-child(2){
            height:40px;
            line-height:38px;
            margin:10px 0 0 10px;
            padding:0 20px;
            border-radius:4px;
            background-color: #FF6666;
            border:1px solid #FF6666;
            color:#fff;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
