<!--实验室准入配置-->
<template>
    <div class="admissionConfiguration scrollbar-box">
      <div class="top-title-box">
        <p class="title-p">基本信息</p>
        <p class="right-button reset-button-one" @click="backPage">返回</p>
        <!--<p class="el-icon-close right-icon color_one" @click="backPage"></p>-->
      </div>
      <div class="name-box">
        <p>适用实验室：{{subjectData.name}}</p>
      </div>
      <div class="top-title-box">
        <p class="title-p">准入信息配置</p>
      </div>
      <div class="max-for-box">
        <div class="for-box" v-for="(item,index) in listStudent" :key="index" :class="item.checkType?'for-border-two':'for-border-one'" @click="forListClick(item)">
          <div><span>{{item.materialName}}</span><span>{{item.materialDescribe}}</span></div>
          <img class="position-img" v-if="item.checkType" src="@/assets/ZDimages/icon_30.png" alt="">
        </div>
      </div>
<!--      <div class="top-title-box">
        <p class="title-p">教职工准入</p>
      </div>
      <div class="max-for-box">
        <div class="for-box" v-for="(item,index) in listTeacher" :key="index" :class="item.checkType?'for-border-two':'for-border-one'" @click="forListClick(item)">
          <div><span>{{item.materialName}}</span><span>{{item.materialDescribe}}</span></div>
          <img class="position-img" v-if="item.checkType" src="@/assets/ZDimages/icon_30.png" alt="">
        </div>
      </div>-->
      <p class="inquire-button-one button-p" @click="upDataButton">{{newUpDataType?'提交':'修改'}}</p>
    </div>
</template>

<script>
  import { listTemplate, subjectmaterial, addlist } from "@/api/laboratory/admissionConfiguration";
    export default {
      name: "admissionConfiguration",
      props:{
        subjectData:{},
      },
      data() {
        return {
          //学生模板
          listStudent:[],
          //老师模板
          listTeacher:[],
          newUpDataType:false,
        }
      },
      created() {
        this.subjectmaterial();

      },
      mounted(){
      },
      methods:{
        //获取当前实验室准入配置
        subjectId(){
          let self = this;
          listTemplate({subjectId:this.subjectData.id}).then( response => {
            for(let i=0;i<response.data.listStudent.length;i++){
              for(let o=0;o<self.listStudent.length;o++){
                if(response.data.listStudent[i].id == self.listStudent[o].id){
                  self.listStudent[o].checkType = true;
                }
              }
            }
            for(let i=0;i<response.data.listTeacher.length;i++){
              for(let o=0;o<self.listTeacher.length;o++){
                if(response.data.listTeacher[i].id == self.listTeacher[o].id){
                  self.listTeacher[o].checkType = true;
                }
              }
            }
            if(!response.data.listStudent[0] && !response.data.listTeacher[0]){
              this.newUpDataType = true;
            }else{
              this.newUpDataType = false;
            }
          });
        },
        //提交接口
        upDataButton(){
          let self = this;
          let num = 0;
          let newData = {
            labSubjectList:[],
            studentList:[],
            teacherList:[],
          };
          newData.labSubjectList.push({id:this.subjectData.id});
          for(let i=0;i<self.listStudent.length;i++){
            if(self.listStudent[i].checkType){
              let obj = {
                materialId:self.listStudent[i].id,
                materialType:self.listStudent[i].materialSuit
              };
              newData.studentList.push(obj);
              num++
            }
          }
          for(let i=0;i<self.listTeacher.length;i++){
            if(self.listTeacher[i].checkType){
              let obj = {
                materialId:self.listTeacher[i].id,
                materialType:self.listTeacher[i].materialSuit
              };
              newData.teacherList.push(obj);
              num++
            }
          }
          if(num == 0){
            this.msgError("请选择准入条件");
            return
          }
          addlist(newData).then( response => {
            this.msgSuccess(this.newUpDataType?"提交成功":"修改成功");
            this.$parent.clickPage(1);
          });
        },
        //点击事件
        forListClick(item){
          item.checkType = !item.checkType;
        },
        //获取准入模板
        subjectmaterial(){
          this.loading = true;
          subjectmaterial().then( response => {
            for(let i=0;i<response.data.listStudent.length;i++){
              response.data.listStudent[i].checkType = false;
            }
            for(let i=0;i<response.data.listTeacher.length;i++){
              response.data.listTeacher[i].checkType = false;
            }
            this.$set(this,'listStudent',response.data.listStudent);
            this.$set(this,'listTeacher',response.data.listTeacher);
            this.subjectId();
          });
        },
        //返回按钮
        backPage(){
          this.$parent.clickPage(1);
        },
      }
    }
</script>

<style lang="scss" scoped>
  .admissionConfiguration{
    flex:1;
    overflow-y: scroll;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius:10px!important;
    margin:5px 20px 20px 10px!important;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
    .top-title-box{
      display: flex;
      border-bottom:1px solid #E0E0E0;
      margin:0 20px;
      p{
        margin:20px 0;
        line-height: 40px;
      }
      .title-p{
        font-size:18px;
        flex:1;
        color:#0045AF;
      }
      .right-icon{
        width:40px;
        text-align: center;
      }
      .right-icon:hover{
        cursor: pointer;
        background: rgba(0,0,0,0.1);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
      }
    }
    .name-box{
      margin:32px 0 0 35px;
      font-size:16px;
      p{
        margin:0;
      }
    }
    .max-for-box{
      .for-box{
        display: inline-block;
        width:400px;
        height:60px;
        margin:32px 0 0 40px;
        cursor: pointer;
        border-radius:10px;
        overflow: hidden;
        position: relative;
        div{
          display: flex;
          line-height:60px;
          span:nth-child(1){
            margin:0 18px 0 18px;
            font-size:16px;
            color:#333;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          span:nth-child(2){
            font-size:14px;
            color:#999999;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
        .position-img{
          position: absolute;
          right:0;
          bottom:0;
        }
      }
      .for-border-one{
        border:1px solid #E0E0E0;
      }
      .for-border-two{
        border:1px solid #349cfb;
      }
    }
    .button-p{
      width:80px;
      margin:40px auto;
    }
  }
</style>
