<!--实验室准入配置-->
<template>
  <div class="admissionConfiguration scrollbar-box">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">基本信息</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-submit-p" @click="upDataButton">提交</p>
    </div>
    <div class="basics">
      <el-form ref="form" :model="infoBoard" label-width="120px" :rules="rules">
        <el-form-item label="适用实验室:" class="form-item">
          <el-input
            style="width:320px;"
            maxlength="30"
            v-model="subjectData.subName"
            placeholder=""
            clearable
            size="small"
            disabled
          />
        </el-form-item>
        <el-form-item label="考勤方式" prop="authType" class="form-item" v-if="infoBoard.boardNum">
          <el-select v-model="infoBoard.authType" clearable>
            <el-option
              v-for="item in verifyWayList"
              :key="item.id"
              :label="item.authType"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考勤密码:" prop="authPwd" class="form-item" v-if="infoBoard.boardNum">
          <el-input
            maxlength="16"
            v-model="infoBoard.authPwd"
            placeholder=""
            clearable
            size="small"
          />
        </el-form-item>
      </el-form>
    </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.selected?'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.selected" src="@/assets/ZDimages/integratedManagement/icon_30.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  import {
    laboratorySubMaterialListData,
    laboratorySubMaterialAdd,
    laboratoryUserAuthAuthTypeList
  } from '@/api/integratedManagement/index'
  export default {
    name: 'admissionConfiguration',
    props: {
      subjectData: {}
    },
    data() {
      // 不能连续字符（如123、abc）连续3位或3位以上
      const LxStr = (rule, value, callback) => {
        const regex = /([a-zA-Z])\1{2}/;
        const regex2 = /(\d)\1{2}/;
        const result = value.match(regex);
        const result2 = value.match(regex2);
        let arr = value.split('')
        let flag = true
        for (let i = 1; i < arr.length - 1; i++) {
          let firstIndex = arr[i - 1].charCodeAt()
          let secondIndex = arr[i].charCodeAt()
          let thirdIndex = arr[i + 1].charCodeAt()
          thirdIndex - secondIndex == 1
          secondIndex - firstIndex == 1
          if ((thirdIndex - secondIndex == 1) && (secondIndex - firstIndex == 1)) {
            flag = false
          }
        }
        if (result||result2||!flag) {
          return callback(new Error('不能输入如:123,abc,111,aaa等形式的连续型字符'));
        }else{
          callback()
        }
      }
      return {
        //学生模板
        listStudent: [],
        verifyWayList: [],
        infoBoard:{},
        // 表单校验
        rules: {
          authType: [
            { required: true, message: '请选择考勤方式', trigger: 'blur' }
          ],
          authPwd: [
            { required: true, message: '考勤密码最少10位 最多16位，不能出现123 abc 这种连续字符，必须同时包含一个大写字母、一个小写字母、一个数字和一个特殊字符!@#*?&', trigger: 'blur' },
            { required: true, message: "不能输入如:123,abc,111,aaa等形式的连续型字符", validator: LxStr, trigger: "blur" },
            {
              pattern: /^(?=(?:.*[A-Z]){1})(?=(?:.*[a-z]){1})(?=(?:.*[0-9]){1})(?=(?:.*[!@#*?&]){1})(?!(.)\1)(.{10,16})$/,
              message: '考勤密码最少10位 最多16位，必须同时包含一个大写字母、一个小写字母、一个数字和一个特殊字符!@#*?&',
              trigger: 'blur'
            },
          ]
        }
      }
    },
    created() {

    },
    mounted() {
      this.laboratorySubMaterialListData()
      this.laboratoryUserAuthAuthTypeList()
    },
    methods: {
      /** 查询门禁授权类型 */
      laboratoryUserAuthAuthTypeList() {
        laboratoryUserAuthAuthTypeList().then(response => {
          this.$set(this,'verifyWayList',response.data);
        })
      },
      //提交接口
      upDataButton() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            let self = this
            let num = 0
            let newData = {
              subjectModelList: [{ subId: this.subjectData.subId }],
              studentList: [],
              boardModel:this.infoBoard,
            }
            for (let i = 0; i < self.listStudent.length; i++) {
              if (self.listStudent[i].selected) {
                let obj = {
                  materialId: self.listStudent[i].materialId,
                  materialType: self.listStudent[i].materialSuit
                }
                newData.studentList.push(obj)
                num++
              }
            }
            if (num == 0) {
              this.msgError('请选择准入条件')
              return
            }
            laboratorySubMaterialAdd(newData).then(response => {
              this.msgSuccess(response.message)
              this.$parent.clickPage(1)
            })
          }
        })
      },
      //点击事件
      forListClick(item) {
        let self = this;
        if(item.materialType==2&&item.relationType==2){
          if(!item.selected){
            let num = 0;
            for(let i=0;i<self.listStudent.length;i++){
              if(self.listStudent[i].materialType == 2 && self.listStudent[i].relationType == 2 && self.listStudent[i].selected){
                num++
              }
            }
            if(num > 0){
              self.msgError('只能勾选一个安全考试证书')
              return
            }else{
              item.selected = !item.selected
            }
          }else{
            item.selected = !item.selected
          }
        }else{
          item.selected = !item.selected
        }
      },
      //获取准入模板
      laboratorySubMaterialListData() {
        this.loading = true
        laboratorySubMaterialListData({ subId: this.subjectData.subId }).then(response => {
          this.$set(this, 'listStudent', response.data.listStudent)
          this.$set(this, 'infoBoard', response.data.infoBoard)
          // this.$set(this.form, 'isSignId', response.data.infoBoard.boardNum)
          // this.$set(this.form, 'authType', response.data.infoBoard.authType)
          // this.$set(this.form, 'authPwd', response.data.infoBoard.authPwd)
        })
      },
      //返回按钮
      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;
    .form-item {
      display: inline-block;
      margin-top: 40px;
    }
    .basics {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .tip {
        width: 14px;
        height: 14px;
        margin-left: 14px;
      }
    }
    .top-title-box {
      display: flex;
      border-bottom: 1px solid #E0E0E0;
      p {
        margin: 20px 0;
        line-height: 40px;
      }
      .title-p {
        font-size: 16px;
        flex: 1;
        color: #0045AF;
        padding-left:20px;
      }
      .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>
