<template>
  <div class="content-main finishedQualificationPage">
    <h3 style="margin-bottom: 20px;display: inline-block;" v-if="$route.query.from == 'zgApply'">{{$route.query.zglxDm == 1 ? '粮食类承储资格' : '食用植物油承储资格'}}认证</h3>
    <h3 style="margin-bottom: 20px;" v-else>{{$route.query.zgType.indexOf('粮食') != -1 ? '粮食类承储资格' : '食用植物油承储资格'}}认证 - {{titProcess}}</h3>
    <div style="display: inline-block;" v-if="$route.query.from == 'zgApply' && $route.query.sqzt == 4">
      <el-tooltip class="item" effect="light" :content="'撤销原因：'+$route.query.cxyy" placement="bottom-start"><span style="cursor: pointer;">（已撤销）</span></el-tooltip>
    </div>
    <p v-if="$route.query.from == 'zgApply' && $route.query.sqzt == 2" style="font-size: 14px;">
        <span class="titStyle">证书编号：</span>
        <span>{{ zgzbh }}</span>
        <span style="margin-left: 25px;" class="titStyle">有效期：</span>
        <span>{{ dateFormat($route.query.yxqkssj) }}至{{ dateFormat($route.query.yxqjzsj) }}</span>
        <span style="margin-left: 25px;" class="titStyle">总仓容（万吨）：</span>
        <span>{{ $route.query.kzzd1 }}</span>
        <span style="margin-left: 25px;" class="titStyle">仓房编号：</span>
        <span>{{ $route.query.kzzd4 }}</span>
    </p>
    <el-tabs type="card" v-model="activeName" @tab-click="activeClick">
        <el-tab-pane label="流程表单" name="流程表单">
            <process-qualification :fromId='fromId' :isSee='isSee' v-if="$route.query.from == 'zgApply'"></process-qualification>
            <process-qualification :fromId='fromId' @getZgzbh ='goZsbh' v-else></process-qualification>
            <el-row>
              <el-col :span='24' style="text-align: center;margin-top: 18px;">
                <el-button @click="back" class="outCancelButton" type="primary">返回</el-button>
              </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="流程图">
          <step-notic></step-notic>
          <img :src="imgSrc" alt="" class="imgStyle">
        </el-tab-pane>
        <el-tab-pane label="流转意见" name="流转意见">
          <table border="1" class="tabStyle">
            <tr align='center'>
                <td class="tabTit">序号</td>
                <td class="tabTit">流程步骤名称</td>
                <td class="tabTit">操作人</td>
                <td class="tabTit">操作时间</td>
                <td class="tabTit">状态</td>
                <td class="tabTit">意见/备注</td>
            </tr>
            <tr align='center' v-for="(item,index) in commentList" :key="index">
                <td>{{ index+1 }}</td>
                <td>{{item.activityName}}</td>
                <td>{{item.assigneeName}}</td>
                <td>{{item.startTime}}</td>
                <td>{{ item.event }}</td>
                <td>{{item.comment}}</td>
            </tr>
          </table>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {getLcImg,findByAlreadyDone,findSpRecord} from '@/api/publicfunction/taskManager';
import * as validate from "@/directives/validate"
import processQualification from '@/components/seeQualification/seeQualificationApply'
import stepNotic from './stepNotic'
export default {
 data() {
  return {
    activeName: '流程表单',
    fromId: '', 
    titProcess: '',
    imgSrc: '',
    //历史审批记录
    commentList:[],
    zgzbh: '',//证书编号
    isSee: ''
  }
},
components: {
  processQualification,stepNotic
},
methods: {
  activeClick(val) {
    if(val.name == '流程图'){
      if(this.$route.query.from == 'zgApply') {
        this.processImgFun(this.$route.query.lcslId)
      }else {
        this.processImgFun(this.$route.query.procInstId)
      }
    }
  },
  getInitInfo(taskId,procInstId) {//查询办理任务明细 --和审批信息(返回按钮和流转意见)
    if(this.$route.query.from == 'zgApply') {
      findSpRecord(this.$route.query.lcslId).then(res => {
          if(res.infoCode == 200) {
              this.commentList=res.data
          }else {
              this.$message({
                  message: res.msg,
                  type: 'error',
                  duration: 2000
              })
          }
      })
    }else {
      findByAlreadyDone(taskId,procInstId).then(res => {
        if(res.infoCode == 200) {
          this.commentList=res.data.commentList;
          if(this.$route.query.from != 'zgApply') {
            this.titProcess = res.data.commentList[res.data.commentList.length-1].activityName
          }
          // this.note = res.data.commentList[res.data.commentList.length-1].comment
        }else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      });
    }
  },
  processImgFun(lcId) {
    getLcImg(lcId).then(res => {
      if(res.infoCode == 200) {
        this.imgSrc = res.data 
      }else {
        this.$message({
          message: res.msg,
          type: 'error',
          duration: 2000
        })
      }
    })
  },
  goZsbh(val) {
    this.zgzbh = val
    console.log('zhenggggg',val)
  },
  back() {
    this.$router.back(-1)
  },
  // 时间格式化函数
  dateFormat(time) {
      if (time) {
          var day = time.split("T");
          //获取日期部分的年月日
          var days = day[0].split("-");
          return days[0] + "-" + days[1] + "-" + days[2];
      } else {
          return "空";
      }
  }
},
created() {
  if(this.$route.query.from == 'zgApply') {
    this.isSee = 'zgApply'
    this.fromId = this.$route.query.id
    this.zgzbh = this.$route.query.zgzbh
    this.getInitInfo()//查询办理任务明细 --和审批信息
  }else {
    let creditCode=this.$route.query.creditCode;
    let userCreditCode=this.$route.query.userCreditCode;
    let procInstId=this.$route.query.procInstId;
    let taskId=this.$route.query.taskId;
    this.fromId = procInstId//当前数据的id
    this.getInitInfo(taskId,procInstId)//查询办理任务明细 --和审批信息
  }
  
}
}
</script>
<style lang='scss'>
  .finishedQualificationPage {
    .tabStyle {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 14px;
        border: 1px solid #ccc;
        td, .thPad {
            padding: 10px;
        }
        .tabTit {
            font-weight: 500;
            font-size: 14px;
        }
    }
    .tdHeight{
      min-height: 100px;
    }
    .titStyle {
        font-weight: bold;
    }
  }
</style>
