<template>
  <div class="gradeManageRecord-infoPage scrollbar-box" v-if="infoData">
    <div class="title-max-box">
      <p>基本信息</p>
      <p class="reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="top-subject-box">
      <p :style="'color:'+infoData.fiedColor+';border:1px solid ;'+infoData.fiedColor+';'">{{infoData.levelName}}</p>
      <p>{{infoData.subName}}</p>
      <p>{{infoData.typeName}}</p>
    </div>
    <div class="top-info-box">
      <div class="info-text-box">
        <div>
          <p>学院：</p>
          <p>{{infoData.ruleName}}</p>
        </div>
      </div>
      <div class="info-text-box">
        <div>
          <p>执行周期：</p>
          <p>{{infoData.subName}}</p>
        </div>
      </div>
      <div class="info-text-box">
        <div>
          <p>执行方式：</p>
          <p>{{infoData.status==1?'未执行':(infoData.status==2?'已执行':'')}}</p>
        </div>
      </div>
      <div class="info-text-box">
        <div>
          <p>执行截止时间：</p>
          <p :class="infoData.status == 0?'tableTypeColorA':''">{{infoData.nickName}}</p>
        </div>
      </div>
      <!--<div class="info-text-box">-->
      <!--<div>-->
      <!--<p>执行人身份：</p>-->
      <!--<p>{{infoData.userPosition}}</p>-->
      <!--</div>-->
      <!--</div>-->
      <!--<div class="info-text-box">-->
      <!--<div>-->
      <!--<p>截止执行时间：</p>-->
      <!--<p>{{infoData.endTime}}</p>-->
      <!--</div>-->
      <!--</div>-->
    </div>
    <div class="top-info-box">
      <div class="info-text-box">
        <div>
          <p>规则名称：</p>
          <p>{{infoData.ruleName}}</p>
        </div>
      </div>
      <div class="info-text-box">
        <div>
          <p>规则描述：</p>
          <p>{{infoData.subName}}</p>
        </div>
      </div>
    </div>
    <div class="title-max-box">
      <p>执行信息</p>
    </div>
    <!--<div class="bottom-item-box">-->
    <!--<p>实际执行时间：</p>-->
    <!--<p>{{infoData.carryTime}}</p>-->
    <!--</div>-->
    <!--<div class="bottom-item-box" v-if="infoData.detail">-->
    <!--<p>执行描述：</p>-->
    <!--<p>{{infoData.detail.remark}}</p>-->
    <!--</div>-->
    <div class="bottom-item-box" v-if="infoData.detail">
      <p>指定执行人员：</p>
      <p>{{infoData.detail.remark}}</p>
    </div>
    <div class="bottom-for-box" v-if="infoData.detail">
      <p class="left-name-p">执行材料：</p>
      <div class="right-max-box" v-if="infoData.detail.imgUrl">
        <p :class="iframeIndex == index ?'colorA':'colorB'" v-for="(item,index) in infoData.detail.imgUrlList" :key="index" @click="iframeClick(item,index)">{{item.name}}</p>
        <!--<a :href="item.url" v-for="(item,index) in infoData.detail.imgUrlList" :key="index">{{item.name}}</a>-->
      </div>
    </div>
    <iframe
      class="iframe-box"
      :src="iframeSrc" scrolling="auto" frameborder="0">
    </iframe>
  </div>
</template>

<script>
import { gradeManageWorkInfo } from "@/api/laboratory/gradeManageWork";
  export default {
    name: "infoPage",
    props:{
      recordId:{},
    },
    data() {
      return {
        iframeSrc:"",
        iframeIndex:0,
        infoData:null
      }
    },
    created() {

    },
    mounted(){
      this.gradeManageWorkInfo();
    },
    methods: {
      //点击切换文件
      iframeClick(item,index){
        this.iframeSrc = this.urlJudge(item.url);
        this.iframeIndex = index;
      },
      gradeManageWorkInfo(){
        gradeManageWorkInfo(this.recordId).then( response => {
          if(response.data.detail.imgUrl){
            response.data.detail.imgUrlList = [];
            let nameList = response.data.detail.imgName.split(',')
            let urlList = response.data.detail.imgUrl.split(',')
            for(let i=0;i<urlList.length;i++){
              if(urlList[i] !='' && urlList[i] != undefined){
                let obj = {
                  name:nameList[i],
                  url:urlList[i],
                };
                response.data.detail.imgUrlList.push(obj)
              }
            }
            if(response.data.detail.imgUrlList[0]){
              this.iframeSrc = this.urlJudge(response.data.detail.imgUrlList[0].url);
              this.iframeIndex = 0;
            }
          }
          this.infoData = response.data;
        });
      },
      //返回
      backPage(){
        this.$parent.pageTypeClick(1);
      },
    }

  }
</script>

<style lang="scss" scoped>
  .gradeManageRecord-infoPage{
    flex:1;
    display: flex!important;
    flex-direction: column;
    padding:0 20px!important;
    margin:5px 20px 20px 10px!important;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1)!important;
    border-radius:10px;
    *{
      margin:0;
      padding:0;
    }
    .title-max-box{
      display: flex;
      border-bottom:1px solid #dedede;
      p:nth-child(1){
        flex:1;
        font-size:18px;
        line-height:80px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin-top:20px;
      }
    }
    .top-subject-box{
      display: flex;
      margin:30px 0 0 50px;
      p:nth-child(1){
        line-height:30px;
        padding:0 16px;
        border-radius:6px;
        font-size:14px;
        font-weight:500;
        margin-right:18px;
      }
      p:nth-child(2){
        line-height:30px;
        font-size:16px;
        color:#333;
        margin-right:18px;
      }
      p:nth-child(3){
        line-height:30px;
        font-size:14px;
        color:#333;
        font-weight:500;
      }
    }
    .top-info-box{
      display: flex;
      .info-text-box{
        /*display: inline-block;*/
        flex:1;
        /*width:280px;*/
        margin-top:30px;
        div{
          display: flex;
          p{
            font-size:14px;
            font-weight: 500;
          }
          p:nth-child(1){
            width:120px;
            text-align: right;
            color:#999;
          }
          p:nth-child(2){
            flex:1;
            color:#333;
          }
          .tableTypeColorA{
            color:#FF6464!important;
          }
        }
      }
    }
    .bottom-item-box{
      display: flex;
      margin-top:30px;
      p{
        font-size:14px;
        font-weight:500;
      }
      p:nth-child(1){
        width:120px;
        text-align: right;
        color: #999;
      }
      p:nth-child(2){
        flex:1;
        color:#333;
      }
    }
    .bottom-for-box{
      display: flex;
      margin-top:30px;
      .left-name-p{
        width:120px;
        text-align: right;
        line-height:30px;
        font-weight: 500;
        font-size:14px;
        color:#999999;
      }
      .right-max-box{
        flex:1;
        p{
          font-weight: 500;
          display: inline-block;
          padding: 0 20px;
          line-height:30px;
          font-size:14px;
          cursor: pointer;
          border-radius:4px;
          margin:0 20px 20px 0;
        }
        .colorA{
          background: rgba(204,230,254,1);
          color:#0183FA;
        }
        .colorB{
          background: #e0e0e0;
          color:#999;
        }
      }
    }
    .iframe-box{
      margin:20px 40px;
      width:1100px;
      height:800px;
    }
  }
</style>
