<!--准入审核详情-->
<template>
  <div class="info-page" v-if="pageType">
    <div class="top-title-box">
      <p>准入信息</p>
      <p class="button-p reset-button-one" @click="backPage">返回</p>
    </div>
    <!--<div class="item-max-box" style="margin-top:30px;">-->
      <!--<div class="item-title-box">{{subjectData.labSecurityApply.userType == '11'?'教师信息(关联教师信息材料)：':(subjectData.labSecurityApply.userType == '22'?'学生信息(关联学生信息材料)：':'')}}</div>-->
      <!--<div class="item-user-box">-->
        <!--<div>姓名：{{subjectData.labSecurityApply.userName}}</div>-->
        <!--<div>{{subjectData.labSecurityApply.userType == '11'?'工号：':(subjectData.labSecurityApply.userType == '22'?'学号：':'')}}{{subjectData.labSecurityApply.userNumber}}</div>-->
        <!--<div>学院：{{subjectData.labSecurityApply.deptName}}</div>-->
        <!--<div v-if="subjectData.labSecurityApply.userType == '22'">专业：{{subjectData.labSecurityApply.major}}</div>-->
      <!--</div>-->
    <!--</div>-->
    <div class="admittance_info">
      <li>申请实验室:<i>{{subjectData.labSecurityApply.laboratoryDeptName}}-{{subjectData.labSecurityApply.subjectName}}</i></li>
      <li>实验室负责人:<i>{{subjectData.fzrsysUser[0].nick_name}}</i></li>
      <li>申请时间:<i>{{subjectData.labSecurityApply.creatTime}} {{subjectData.labSecurityApply.hi}}</i></li>
      <li>有效期:<i>{{subjectData.labSecurityApply.validBeginTime}} 至 {{subjectData.labSecurityApply.validEndTime}}</i></li>
      <li>申请状态:<i>{{subjectData.labSecurityApply.auditStatus == 0?'待审核':(subjectData.labSecurityApply.auditStatus == 1?'已驳回':(subjectData.labSecurityApply.auditStatus == 2?'已通过':''))}}</i></li>
      <li v-if="isLook">审核时间:<i>{{subjectData.labSecurityApply.auditTime}}</i></li>
      <li v-if="isLook">审核人:<i>{{subjectData.labSecurityApply.auditName}}</i></li>
      <li v-if="isLook">审核备注:<i>{{subjectData.labSecurityApply.rejectCause}}</i></li>
    </div>
    <div class="admittance_materials">
      <p class="admittance_materials_title">准入材料</p>
      <div v-for="(item,index) in subjectData.listTemp" :key="index">
        <div class="item-title-box" v-if="item.materialType==2&&item.relationType==1"><i style="color: #F56C6C;">*</i>身份信息：(关联学生信息材料)</div>
        <div class="identity" v-if="item.materialType==2&&item.relationType==1">
          <li>姓名:<i>{{subjectData.sysUser.nickName}}</i></li>
          <li>学号:<i>{{subjectData.sysUser.userName}}</i></li>
          <li>卡号:<i>{{subjectData.sysUser.cardNum}}</i></li>
          <li>联系方式:<i>{{subjectData.sysUser.phonenumber}}</i></li>
          <li>导师:<i>{{subjectData.sysUser.tutorUserName}}</i></li>
          <li>班级:<i>{{subjectData.sysUser.grade}}</i></li>
          <li>学院:<i>{{subjectData.labSecurityApply.deptName}}</i></li>
          <li>专业:<i>{{subjectData.sysUser.major}}</i></li>
          <li>申请备注:<i>{{subjectData.labSecurityApply.applyCause}}</i></li>
        </div>
        <div class="item-title-box" v-if="item.materialType==1"><i style="color: #F56C6C;">*</i>{{item.materialName}}</div>
        <div class="file_list"  v-for="(minItem,minIndex) in item.upList">
          <el-checkbox  @change="checkedImg(minItem)" v-if="isLook" >{{minItem.name}}</el-checkbox>
          <i v-if="!isLook" >{{minItem.name}}</i>
          <i class="file_list_look" @click="lookFile(minItem)">查看</i>
<!--          <a class="file_list_look" :href="item2.dataUrl.split(';')[1].replace(/,/g,'')" target="_blank">查看</a>-->
          <i v-if="isLook" class="file_list_look" @click="handleExport(1,minItem)">下载</i>
        </div>
      </div>
      <div class="item-title-box" v-if="subjectData.labSecurityApply.auditStatus!=2">审核备注:</div>
      <el-input type="textarea" style="margin-top: 20px" v-model="rejectCause" placeholder="请输入审核备注" maxlength="50" v-if="subjectData.labSecurityApply.auditStatus!=2"/>
     <div class="btn_list">
       <p v-if="isLook" class="button-p reset-button-one" style="width:100px;" @click="handleExport(2,'')">打包下载</p>
       <p v-if="isLook&&subjectData.labSecurityApply.auditStatus!=2" class="inquire-button-one" style="width:100px;" @click="backPage()">确定</p>
       <p v-if="!isLook" class="button-p reset-button-one" style="width:100px;" @click="auditClick(1)">驳回</p>
       <p v-if="!isLook" class="inquire-button-one" style="width:100px;" @click="auditClick(2)">通过</p>
     </div>
    </div>
    <div v-for="(item,index) in subjectData.listTemp" :key="index">
<!--      <div class="item-max-box" style="margin-top:30px;" v-if="item.materialType==2&&item.relationType==1">
        <div class="item-title-box">{{subjectData.labSecurityApply.userType == '11'?'教师信息(关联教师信息材料)：':(subjectData.labSecurityApply.userType == '22'?'学生信息(关联学生信息材料)：':'')}}</div>
        <div class="item-user-box">
          <div>
            <p>姓名：</p>
            <p>{{subjectData.labSecurityApply.userName}}</p>
          </div>
          <div>
            <p>{{subjectData.labSecurityApply.userType == '11'?'工号：':(subjectData.labSecurityApply.userType == '22'?'学号：':'')}}</p>
            <p>{{subjectData.labSecurityApply.userNumber}}</p>
          </div>
          <div>
            <p>学院：</p>
            <p>{{subjectData.labSecurityApply.deptName}}</p>
          </div>
          <div v-if="subjectData.labSecurityApply.userType == '22'">
            <p>专业：</p>
            <p>{{subjectData.labSecurityApply.userMajor}}</p>
          </div>
        </div>
      </div>-->
<!--      <div class="item-max-box" v-if="item.materialType==2&&item.relationType==2&&subjectData.labSecurityApply.userType == '22'">
        <div class="item-title-box">安全考试证书：</div>
        <img v-if="subjectData.listcert[0]" class="item-img-box" :src="subjectData.listcert[0].cert_url">
        <p v-if="!subjectData.listcert[0]" style="margin-left:40px;color:#999;font-size:14px;">暂无证书</p>
      </div>
      <div class="item-max-box" v-if="item.materialType==1">
        <div class="item-title-box">{{item.materialName}}：</div>
        <div class="item-for-text-box">
          <p :class="iframeSrc[index].forIndex == minIndex ?'color-p':''" v-for="(minItem,minIndex) in item.upList" @click="forClick(minItem,minIndex,index)">{{minItem.name}}</p>
        </div>
        <iframe
          class="item-html-box"
          :src="iframeSrc[index].url" scrolling="auto" frameborder="0">
        </iframe>
      </div>-->
    </div>

    <!-- 添加或修改安全准入申请材料配置对话框 -->
    <el-dialog title="准入资格审核-未通过" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="未通过材料" prop="materialName">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="item.id" style="display: block" v-for="(item,index) in subjectData.listTemp" :key="index">{{item.materialName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="未通过原因" prop="rejectCause">
          <el-input type="textarea" v-model="form.rejectCause" placeholder="请输入未通过原因" maxlength="100"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="laboratoryApply(1)">确 定</el-button>
        <!--<el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
let Base64 = require('js-base64').Base64;
import {downloadwBatch, getDetails, laboratoryApply} from "@/api/laboratory/approval";
import {optionHazard} from "@/api/laboratory/hazard";
  export default {
    name: "info-page",
    props:{
      infoData: {},
    },
    data() {
      return {
        pageType:false,
        forIndex:0,
        subjectData:{},
        iframeSrc:[],
        open:false,
        form:{},
        checkList:[],
        rejectCause:'',//审核备注
        isLook:false,//判断是查看还是审核
        //打包下载查询参数
        packDown:{
          userName:'',
          userNumber:'',
          subjectName:'',
          fileList:'',

        },
        mrList:[],
        // 表单校验
        rules: {
          name: [
            { required: true, message: "请输入检查项名称", trigger: "blur" },
            { required: true, message: "请输入检查项名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          code: [
            { required: true, message: "请输入条款号", trigger: "blur" },
            { required: true, message: "请输入条款号", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
      };
    },
    created() {

      if(this.infoData.type==0){
        this.isLook=false;

      }else if(this.infoData.type==1){
        this.isLook=true;
      }
      this.getDetails();


    },
    methods: {
      lookFile(item){
        let visitUrl=window.location.href.split('://')[0]+'://'+process.env.VUE_APP_BASE_API+'/admin/'+item.url;
        console.log(visitUrl)
        window.open(localStorage.getItem('filePreviewUrl') + '/onlinePreview?url='+encodeURIComponent(Base64.encode(visitUrl)));

      },
      /** 导出按钮操作 */
      handleExport(type,item) {
        console.log(item)
        if(type==1){//单个
          this.packDown.userName=this.subjectData.sysUser.nickName
          this.packDown.userNumber=this.subjectData.sysUser.userName
          this.packDown.subjectName=this.subjectData.labSecurityApply.subjectName
          let visitUrl=item.name+';'+item.url+',';

          this.packDown.fileList=visitUrl

          this.download('/laboratory/apply/downloadwBatch', {
            ...this.packDown
          }, this.packDown.userName+'_'+this.packDown.userNumber+'_'+this.packDown.subjectName+`.zip`)





        }else if(type==2){// 打包下载
          console.log(this.mrList)
          if(this.mrList.length<=0){
            this.msgInfo("请先勾选需要打包下载的文件！");
          }else{
            let list=[];
            this.mrList.forEach(function (item){
                list.push(item+',')
            })
            console.log(list)
            this.packDown.userName=this.subjectData.sysUser.nickName
            this.packDown.userNumber=this.subjectData.sysUser.userName
            this.packDown.subjectName=this.subjectData.labSecurityApply.subjectName
            this.packDown.fileList= list.join('@@')



            this.download('/laboratory/apply/downloadwBatch', {
              ...this.packDown
            }, this.packDown.userName+'_'+this.packDown.userNumber+'_'+this.packDown.subjectName+`.zip`)
          }

        }


      },
      checkedImg(item){
        console.log(item)
        if(event.target.checked==false){
          this.mrList.splice(this.mrList.indexOf(item.url),1);
        }else{
          this.mrList.push(item.name+';'+item.url)
        }
        console.log(this.mrList)


      },
      //审核按钮
      auditClick(type){
        let self = this;
        if(type == 1){
          this.open = true;
        }else if(type == 2){
          this.$confirm('是否确认审核?', "", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            self.laboratoryApply(type);
          }).then(() => {}).catch(() => {});
        }
      },
      laboratoryApply(type){
        let obj = {
          id:this.infoData.list.id,
          auditStatus:type,
          rejectCause:this.rejectCause
        };
        if(type == 1){
          obj.rejectCause = this.form.rejectCause;
          obj.rejectMaterial = this.checkList + '';
        }
        laboratoryApply(obj).then(response => {
          this.msgSuccess("操作成功");
          this.$parent.tableClick(1);
        })
      },
      //点击切换文件
      forClick(item,index,bigIndex){
        this.iframeSrc[bigIndex].forIndex = index;
        this.iframeSrc[bigIndex].url = this.urlJudge(item.url)
      },
      //获取数据
      getDetails(){
        let self = this;
        getDetails({id:this.infoData.list.id}).then(response => {
          let dataList = [];
          for(let i=0;i<response.data.listTemp.length;i++){
            if(response.data.listTemp[i].materialType == 2 && response.data.listTemp[i].materialType == 2){
              dataList.unshift(response.data.listTemp[i]);
            }
          }
          for(let i=0;i<response.data.listTemp.length;i++){
            if(response.data.listTemp[i].materialType == 1){
              dataList.push(response.data.listTemp[i]);
            }
          }
          for(let i=0;i<response.data.listTemp.length;i++){
            if(response.data.listTemp[i].materialType == 2 && response.data.listTemp[i].materialType == 1){
              dataList.unshift(response.data.listTemp[i]);
            }
          }
          this.$set(response.data,'listTemp',dataList);
          let newList = [];
          for(let i=0;i<response.data.listTemp.length;i++){
            if(response.data.listTemp[i].materialType == 1){
              let maxList = [];
              for(let o=0;o<response.data.listTemp[i].listMr.length;o++){
                let bigList = response.data.listTemp[i].listMr[o].dataUrl.split(',');
                for(let x=0;x<bigList.length;x++){
                  if(bigList[x]){
                    let minList = bigList[x].split(';');
                    let obj = {
                      name:minList[0],
                      url:minList[1],
                    };
                    maxList.push(obj);
                  }
                }
              }
              response.data.listTemp[i].upList = maxList;
              let obj ={};
              if(maxList.length>0){
                 obj = {
                  forIndex:0,
                  url:this.urlJudge(maxList[0].url)
                }
              }
              newList.push(obj);
            }else{
              let obj = {
                forIndex:"",
                url:""
              }
              newList.push(obj);
            }
          }
          this.$set(this,"iframeSrc",newList);
          this.$set(this,"subjectData",response.data);
          //审核备注
          if(this.isLook){

            this.rejectCause=response.data.labSecurityApply.rejectCause
          }
          this.$forceUpdate()
          this.pageType = true;
        })
      },
      //返回
      backPage(){
        if(this.isLook){
          this.$parent.tableClick(2);
        }else{
          this.$parent.tableClick(1);
        }

      },
    }
  };
</script>

<style scoped lang="scss">
  .info-page {
    flex:1;
    display: flex!important;
    flex-direction: column;
    /*box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);*/
    /*border-radius:10px;*/
    .top-title-box{
      display: flex;
      border-bottom: 1px solid #E0E0E0;
      /*padding-top:20px;*/
      p:nth-child(1){
        flex: 1;
        line-height:60px;
        color: #0045AF;
        font-size:18px;
        margin:0 0 0 40px;
      }
      p:nth-child(2){
        margin-right:20px;
      }
      p:nth-child(3){
        margin-right:20px;
      }
      p:nth-child(4){
        margin-right:20px;
      }
    }
    /*准入信息*/
    .admittance_info{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-left: 80px;
      box-sizing: border-box;
      >li{
        list-style-type:none;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 500;
        color: #999999;
        line-height: 70px;
        margin-right: 20px;
        >i{
          margin-left: 10px;
          display: inline-block;
          font-style:normal;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 500;
          color: #333333;
          line-height: 70px;
        }
      }
    }
    /*准入材料*/
    .admittance_materials{
      padding-left: 40px;
      box-sizing: border-box;
      .admittance_materials_title{
        flex: 1;
        line-height:60px;
        color: #0045AF;
        font-size:18px;

        border-bottom: 1px solid #E0E0E0;
        margin-top: 0;
      }
      .identity{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-left: 40px;
        box-sizing: border-box;
        >li{
          list-style-type:none;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 500;
          color: #999999;
          line-height: 70px;
          margin-right: 20px;
          >i{
            margin-left: 10px;
            display: inline-block;
            font-style:normal;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 500;
            color: #333333;
            line-height: 70px;
          }
        }
      }
      .file_list{
        padding-left: 80px;
        box-sizing: border-box;
        >i{
          font-style: normal;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #0183FA;
          line-height: 70px;
        }
        .file_list_look{
          padding-left: 40px;
          cursor: pointer;
          font-style: normal;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #0183FA;
          line-height: 70px;
        }

      }
      .btn_list{
        text-align: center;
        margin-top: 40px;
        >p{
          margin-right: 20px;
        }
      }
    }
    .item-max-box{
      .item-title-box{
        margin-left:50px;
        font-size:16px;
        line-height:80px;
      }
      .item-user-box{
        display: flex;
        margin-left:65px;
        div{
          display: flex;
          margin-right:60px;
          font-size:14px;
        }
      }
      .item-img-box{
        width:240px;
        margin-left:50px;
      }
      .item-for-text-box{
        margin-left:77px;
        p{
          display: inline-block;
          font-size:14px;
          line-height:40px;
          margin:0 57px 0 0;
        }
        .color-p{
          color:#0045AF;
        }
      }
      .item-html-box{
        margin:20px 0 40px 58px;
        width:900px;
        height:900px;
        background: #F5F5F5;
      }
    }
  }
</style>
