<template>
  <div class="content-main toDoQualificationPage">
    <h3 style="margin-bottom: 20px;">{{$route.query.zgType.indexOf('粮食') != -1 ? '粮食类承储资格' : '食用植物油承储资格'}}认证 - {{$route.query.actName}}</h3>
    <el-tabs type="card" v-model="activeName" @tab-click="activeClick">
        <el-tab-pane label="流程表单" name="流程表单">
            <process-qualification :fromId='fromId' style="margin-bottom: 20px;" ref="modifyPage"></process-qualification>
            <el-form ref="formNote" :rules="rules" :model="formNote" label-width="80px">
              <el-row v-if="passLc">
                <el-col :span="8">
                  <el-form-item label="证书编号" prop="zgzbh">
                    <el-input v-model="formNote.zgzbh" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div style="height: 1px;background: #ccc;margin-bottom: 20px;margin-top: 0px;"></div>
              <el-row v-if="isShow">
                <el-col :span="20">
                  <el-form-item label="审批意见" prop="note">
                    <el-input type="textarea" resize="none" v-model="formNote.note" :autosize='{minRows: 4, maxRows: 4}'></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-row>
              <el-col :span='24' style="text-align: center;margin-top: 18px;">
                <el-button type="primary" class="outCancelButton" @click="addSubmit(button.button,index)" :loading="button.sgin" v-for="(button,index) in buttonList" :key ="button.button">{{ button.button}}</el-button>
                <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 {findByFormKeyByTaskId,startExamine,getLcImg,upDateDb} 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: '',
    curInd: 0,
    imgSrc: '',
    commentList:[],
    buttonList:[],
    isShow:true,
    passLc: false,
    rules: {
      note:[
        { required: true, message: "请输入审批意见", trigger: "blur" },
        {
          trigger: "blur",
          validator: validate.validateTenBai
        }
      ],
      zgzbh: [
        { required: true, message: "请输入证书编号", trigger: "blur" },
        { trigger: "blur",validator: validate.validateNumLetter},
        {
          trigger: "blur",
          validator: validate.validateTwo
        }
      ]
    },
    formNote: {
      note:"",
      zgzbh: ''
    }
  }
},
components: {
  processQualification,stepNotic
},
methods: {
  activeClick(val) {
    if(val.name == '流程图'){
      this.processImgFun()
    }
  },
  getInitInfo(taskId,procInstId) {//查询办理任务明细 --和审批信息
    findByFormKeyByTaskId(taskId,procInstId).then(res => {
      if(res.infoCode == 200) {
        this.commentList=res.data.commentList;
        this.buttonList=res.data.buttonList;
        // this.titProcess = res.data.commentList[res.data.commentList.length-1].activityName
      }else {
        this.$message({
          message: res.msg,
          type: 'error',
          duration: 2000
        })
      }
    });
  },
  processImgFun() {
    getLcImg(this.$route.query.procInstId).then(res => {
      if(res.infoCode == 200) {
        this.imgSrc = res.data
      }else {
        this.$message({
          message: res.msg,
          type: 'error',
          duration: 2000
        })
      }
    })
  },
  back() {
    this.$router.back(-1)
  },
  //提交审批记录
  addSubmit(status,ind){
    this.$refs['formNote'].validate((valid) => {
      if(valid){
          const data={
            "status":status,
            "procInstId":this.$route.query.procInstId,
            "node":this.formNote.note,
            "userCreditCode":this.$route.query.userCreditCode,
            "userType":"10"
          }
          this.curInd = ind
          this.buttonList[this.curInd].sgin = true
          if(status == '通过') {
            this.saveUpDate(data)
          }else {
            this.complete(data);
          }
      }else {
        return false
      }
    })
  },
  saveUpDate(needData) {
      const mainForm = this.$refs.modifyPage.formData
      let needArray
      needArray = {
        sqxx: JSON.stringify(mainForm),
        // sqzt: this.sqzt,//申请状态(保存或者暂存传的字段)
        zgzbh: this.formNote.zgzbh,
        zglxDm: this.$route.query.zgType.indexOf('粮食') != -1 ? '1' : '2',//资格类型(粮食类或者食用植物油类)
        zgsqlx: this.$refs.modifyPage.zgsqlx,
        lcslId: this.$route.query.procInstId,
        kzzd1: this.$refs.modifyPage.kzzd1,//仓容
        kzzd2: this.$refs.modifyPage.kzzd2,//信用代码
        kzzd3: '业务',//区分业务端和企业端（企业端没传）
        kzzd4: this.$refs.modifyPage.kzzd4//仓房编号
      }
      console.log('点击点击',needArray)
      upDateDb(needArray).then(res => {
        if(res.infoCode == 200) {
            this.complete(needData);
        }else {
            this.$message({
              message: res.msg,
              type: 'error',
              duration: 2000
            });
            this.buttonList[this.curInd].sgin = false
        }
      });
  },

    // 工作流提交审批
     complete(data){
        // 工作流审批--通过，驳回,提交
      startExamine(data).then(res => {
          if(res.infoCode == 200){
              this.$message({
                message: res.msg,
                type: 'success',
                duration: 2000
              });
              this.back();
          }else {
              this.$message({
                message: res.msg,
                type: 'error',
                duration: 2000
              });
              this.buttonList[this.curInd].sgin = false
          }
      });
    }

},
  created() {
    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
    if(this.$route.query.actName == '资格认定') {//最后一步显示证书编号
      this.passLc = true
    }
    if(creditCode!=userCreditCode){
      this.isShow=true;
    }
    this.getInitInfo(taskId,procInstId)//查询办理任务明细 --和审批信息
  }
}
</script>
<style lang='scss'>
  .toDoQualificationPage {
    .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;
    }
  }
</style>
