<!--准入申请详情-->
<!--准入审核详情-->
<template>

  <div class="info-page" v-if="pageType">
    <div class="top-title-box">
      <p>准入信息</p>
      <p class="button-p reset-button-one" style="margin-top: 10px" @click="backPage">返回</p>
    </div>
    <div class="admittance_info">
      <li>申请实验室:<i>{{subjectData.labSecurityApply.deptName}}-{{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="subjectData.labSecurityApply.auditStatus == 2 && subjectData.labSecurityApply.auditStatus != 0">审核时间:<i>{{subjectData.labSecurityApply.auditTime}}</i></li>
      <li v-if="subjectData.labSecurityApply.auditStatus == 1 && subjectData.labSecurityApply.auditStatus != 0">审核时间:<i>{{subjectData.labSecurityApply.rejectTime}}</i></li>
      <li>审核人:<i>{{subjectData.fzrsysUser[0].nick_name}}</i></li>
      <li v-if="subjectData.labSecurityApply.auditStatus != 0">审核备注:<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-max-box" v-if="item.materialType==2&&item.relationType==1">
          <div class="item-title-box" style="margin-left: 0;">
            <p>*</p>
            <p>身份信息：</p>
            <p>(关联学生信息材料)</p>
          </div>
          <div class="identity">
            <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>
        <div class="item-max-box" v-if="item.materialType==2&&item.relationType==2">
          <div class="item-title-box" style="margin-left: 0;">
            <p>*</p>
            <p>安全考试证书</p>
            <p>(已同步证书信息)：</p>
          </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" style="margin-left: 0;">
            <p>*</p>
            <p>{{item.materialName}}：</p>
            <p></p>
          </div>
          <div class="file_list" v-for="(minItem,minIndex) in item.upList">
            <i >{{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>-->
          </div>
        </div>
      </div>
      <div class="btn_list">
        <p  class="inquire-button-one" style="width:100px;" v-if="subjectData.labSecurityApply.auditStatus == 1" @click="backPageEdit()">重新申请</p>
      </div>
    </div>
  </div>
</template>

<script>
let Base64 = require('js-base64').Base64;
import { getDetails } from "@/api/laboratory/approval";
export default {
  name: "info-page",
  props:{
    infoData: {},
  },
  data() {
    return {
      pageType:false,
      forIndex:0,
      subjectData:{},
      iframeSrc:"",
    };
  },
  created() {
    console.log(this.infoData)
    this.getDetails();
  },


  methods: {
    lookFile(item){
      window.open(window.location.href.split('://')[0]+'://'+process.env.VUE_APP_BASE_API+'/admin/'+item.url)
      // let visitUrl=window.location.href.split('://')[0]+'://'+process.env.VUE_APP_BASE_API+'/admin/'+item.url;
      // console.log(visitUrl)
      // window.open(window.location.href.split('://')[0]+'://'  + process.env.VUE_APP_BASE_FILE_API + '/onlinePreview?url='+encodeURIComponent(Base64.encode(visitUrl)));
    },
    //点击切换文件
    forClick(item,index,bigIndex){
      this.iframeSrc[bigIndex].url = this.urlJudge(item.url);
      this.iframeSrc[bigIndex].forIndex = index;
    },
    //获取数据
    getDetails(){
      let self = this;
      getDetails({id:this.infoData.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);
        this.$forceUpdate()
        this.pageType = true;
      })
    },
    //返回
    backPage(){
      this.$parent.pageClick(1);
    },
    //重新提交
    backPageEdit(){
      let obj = JSON.parse(JSON.stringify(this.subjectData));
      console.log(obj)
      this.$parent.pageClick(4,obj);
    }
  }
};
</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{
        display: inline-block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        width:300px;
        font-style: normal;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #0183FA;
        line-height: 40px;
      }
      .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: 40px;
      }

    }
    .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;
      p{
        margin:0;
      }
    }
    .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;
    }
  }
}
.item-max-box{

  .item-title-box{
    display: flex;
    margin-left: 0px;
    p{
      font-size:16px;
      line-height:80px;
    }
    p:nth-child(1){
      color:red;
      margin-right:10px;
    }
    p:nth-child(2){
      color:#333;
    }
    p:nth-child(3){
      color:#999;
    }
  }
  .item-user-box{
    display: flex;

    div{
      display: flex;
      margin-right:60px;
      p{
        font-size:14px;
      }
      p:nth-child(1){
        color:#999;
      }
      p:nth-child(2){
        color:#666;
      }
    }
  }
  .item-title-text{
    margin-left:15px;
    font-size:14px;
    line-height:20px;
    color:#999;
  }
  .item-input-box{
    display: flex;
    margin:20px 0 0 15px;
    input{
      width:390px;
      height:40px;
      padding:0 20px;
      margin-right:20px;
    }
  }
  .item-input-for-box{
    margin:20px 0 0 5px;
    .item-input-for-big{
      display: inline-block;
      border-radius:6px;
      background: rgba(1,131,250,0.2);
      margin:0 10px 10px;
      .item-input-for-min{
        display: flex;
        p{
          flex:1;
          padding:0 20px;
          margin:0;
          line-height:30px;
          color:#0183FA;
        }
        i{
          line-height:30px;
          color:#0183FA;
          margin-right: 8px;
          cursor: pointer;
        }
        a{
          line-height:30px;
          color:#0183FA;
          margin-right: 8px;
          cursor: pointer;
        }
        img{
          width:16px;
          height:16px;
          margin:7px 7px;
          cursor: pointer;
        }
      }
    }
  }
  .item-img-box{
    width:240px;
    margin-left:15px;
  }
}
</style>
