<template>
  <div>
    <div class="detail-body">
      <div class="title">{{data.approveTitle }}</div>
      <!-- 基础信息 -->
      <div class="baseInfo" v-if="tabName == 'baseInfo'">
      <div style="padding-top:5px;font-size:13px;">
        <template v-if="data.approveType!='chjWorkContact'">
          <p class="detail-item"><span class="label">审批编号：</span>{{data.auditItemId}}</p>
          <p class="detail-item" style="margin-top:5px;"><span class="label">审批类型：</span>{{data.approveTypeText }}</p>
        </template>
        <template v-if="['chjClimbingHigh','chjFireWork','chjTmpElectricity','chjConfinedSpace'].includes(data.approveType)">
          <p class="detail-item"><span class="label">申请单位：</span>{{getData.applyUnit}}</p>
          <p class="detail-item"><span class="label">负责人：</span>{{getData.responsiblePerson}}</p>
          <p class="detail-item"><span class="label">联系电话：</span>{{getData.responsiblePersonPhone}}</p>
          <p class="detail-item"><span class="label">现场监护人：</span>{{getData.siteSupervisor}}</p>
          <p class="detail-item"><span class="label">联系电话：</span>{{getData.siteSupervisorPhone}}</p>
          <p class="detail-item"><span class="label">操作人：</span>{{getData.taskOperator}}</p>
          <p class="detail-item"><span class="label">证书编号：</span>{{getData.certificateNumber}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjClimbingHigh'"><span class="label">作业级别：</span>{{getData.taskLevel}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjFireWork'"><span class="label">动火级别：</span>{{getData.taskLevel}}</p>
          <p class="detail-item"><span class="label">开始时间：</span>
           <span v-if="getData.taskPeriod">{{getData.taskPeriod.split(',')[0]}}</span>
          </p>
          <p class="detail-item"><span class="label">结束时间：</span>
          <span v-if="getData.taskPeriod">{{getData.taskPeriod.split(',')[1]}}</span>
          </p>
          <p class="detail-item"><span class="label">交回时间：</span>{{getData.handleTime}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjClimbingHigh'"><span class="label">作业地点：</span>{{getData.taskLocation}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjFireWork'"><span class="label">动火地点：</span>{{getData.taskLocation}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjClimbingHigh' || data.approveType == 'chjFireWork'">作业内容：{{getData.taskContent}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjTmpElectricity'"><span class="label">用电部位：</span>{{getData.electricityPlace}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjTmpElectricity'"><span class="label">用电用途：</span>{{getData.electricityUsage}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjConfinedSpace'"><span class="label">作业内容：</span>{{getData.taskContent}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjConfinedSpace'"><span class="label">作业空间：</span>{{getData.taskSpace}}</p>
          <p class="detail-item" v-if="data.approveType == 'chjConfinedSpace'"><span class="label">作业地点：</span>{{getData.taskLocation}}</p>
        </template>
        <template v-if="data.approveType == 'chjSprayTask'">
          <p class="detail-item"><span class="label">单元/楼层：</span>{{getData.unitFloor}}</p>
          <p class="detail-item"><span class="label">业户姓名：</span>{{getData.ownerName}}</p>
          <p class="detail-item"><span class="label">联系电话：</span>{{getData.phone}}</p>
          <p class="detail-item"><span class="label">装修单位：</span>{{getData.decorateUnit}}</p>
          <p class="detail-item"><span class="label">开始时间：</span>
          {{getData.waterOffPeriod && getData.waterOffPeriod.split(',')[0]}}</p>
          <p class="detail-item"><span class="label">结束时间：</span>
          {{getData.waterOffPeriod && getData.waterOffPeriod.split(',')[1]}}
          </p>
          <p class="detail-item"><span class="label">停水区域：</span>{{getData.waterOffArea}}</p>
          <p class="detail-item"><span class="label">申请事由：</span>{{getData.applyReason}}</p>
        </template>
        <template v-if="data.approveType == 'chjWorkContact'">
          <p class="detail-item"><span class="label">作业编号：</span>{{getData.auditItemId}}</p>
          <p class="detail-item"><span class="label">作业类型：</span>{{data.approveTypeText}}</p>
          <p class="detail-item"><span class="label">联系部门：</span>{{getData.contactDep}}</p>
          <p class="detail-item"><span class="label">联系人：</span>{{getData.contactPerson}}</p>
          <p class="detail-item"><span class="label">被联系部门：</span>{{getData.contactedDep}}</p>
          <p class="detail-item"><span class="label">被联系人：</span>{{getData.contactedPerson}}</p>
          <p class="detail-item"><span class="label">联系电话：</span>{{getData.contactedPersonPhone}}</p>
          <p class="detail-item"><span class="label">联系内容：</span>{{getData.contactContent}}</p>
        </template>
        <template>
        	<!--<p class="detail-item"><span class="detail-label">测试测试标题</span>
            <span class="showimgCon">
              
                <div @click="showImgPreview('../../../dist/static/img/top_bg.bc1e9b6.png')" class="showimgConA" :key="index">
                  <img  class="img" src="../../../dist/static/img/top_bg.bc1e9b6.png">
                </div>
               <a @click="showImgPreview()" class="showimgConA" :key="index">
                  <img  class="img" src="../../../dist/static/img/top_bg.bc1e9b6.png">
                </a>
                <a @click="showImgPreview()" class="showimgConA" :key="index">
                  <img  class="img" src="../../../dist/static/img/top_bg.bc1e9b6.png">
                </a>
                
            </span>
            <div style="clear: both;"></div>
        	</p>-->
        	<p class="detail-item" v-if="fileShow1">
        		<span class="detail-label">{{fileName1}}</span>
            <span class="showimgCon">
              <template v-for="(item, index) in accessoriesOperator">
                <div @click="showImgPreviewa(item.resPath)" v-if="isPic(item.fName)" class="showimgConA" :key="index">
                  <img  class="img" :key="index" :src="item.resPath" alt="">
                </div>
                <a v-else class="showimgConA" :key="index" :href="item.resPath" >
                  <span >{{item.fName}}</span>
                </a>
                
                 <!-- <a :key="index" @click target="_Blank">{{ accessories.fName }}
                    </a> -->
              </template>
              <a v-if="accessoriesOperator.length < 1" class="showimgConA">
                  <span >暂无</span>
                </a>
            </span>
            <div style="clear: both;"></div>
        	</p>
        	<p class="detail-item" v-if="fileShow2"><span class="detail-label">{{fileName2}}</span>
            <span class="showimgCon">
              <template v-for="(item, index) in accessoriesTaskUnit">
                <div @click="showImgPreviewa(item.resPath)" v-if="isPic(item.fName)" class="showimgConA" :key="index">
                  <img  class="img" :key="index" :src="item.resPath" alt="">
                </div>
                <a v-else class="showimgConA" :key="index" :href="item.resPath" >
                  <span >{{item.fName}}</span>
                </a>
                
                 <!-- <a :key="index" @click target="_Blank">{{ accessories.fName }}
                    </a> -->
              </template>
              <a v-if="accessoriesTaskUnit.length < 1" class="showimgConA">
                  <span >暂无</span>
                </a>
            </span>
            <div style="clear: both;"></div>
        	</p>
        	<p class="detail-item" v-if="fileShow3"><span class="detail-label">{{fileName3}}</span>
            <span class="showimgCon">
              <template v-for="(item, index) in accessoriesConstructionPlan">
                <div @click="showImgPreviewa(item.resPath)" v-if="isPic(item.fName)" class="showimgConA" :key="index">
                  <img  class="img" :key="index" :src="item.resPath" alt="">
                </div>
                <a v-else class="showimgConA" :key="index" :href="item.resPath" >
                  <span >{{item.fName}}</span>
                </a>
                
                 <!-- <a :key="index" @click target="_Blank">{{ accessories.fName }}
                    </a> -->
              </template>
              <a v-if="accessoriesConstructionPlan.length < 1" class="showimgConA">
                  <span >暂无</span>
                </a>
            </span>
            <div style="clear: both;"></div>
        	</p>
          <p class="detail-item" v-if="fileShow4"><span class="detail-label">{{fileName4}}</span>
            <span class="showimgCon">
              <template v-for="(item, index) in accessoriesResponsible">
                <div @click="showImgPreviewa(item.resPath)" v-if="isPic(item.fName)" class="showimgConA" :key="index">
                  <img  class="img" :key="index" :src="item.resPath" alt="">
                </div>
                <a v-else class="showimgConA" :key="index" :href="item.resPath" >
                  <span >{{item.fName}}</span>
                </a>
                
                 <!-- <a :key="index" @click target="_Blank">{{ accessories.fName }}
                    </a> -->
              </template>
              <a v-if="accessoriesResponsible.length < 1" class="showimgConA">
                  <span >暂无</span>
                </a>
            </span>
            <div style="clear: both;"></div>
        	</p>
        	<p class="detail-item" v-if="fileShow5"><span class="detail-label">{{fileName5}}</span>
            <span class="showimgCon">
              <template v-for="(item, index) in workContractFile">
                <div @click="showImgPreviewa(item.resPath)" v-if="isPic(item.fName)" class="showimgConA" :key="index">
                  <img  class="img" :key="index" :src="item.resPath" alt="">
                </div>
                <a v-else class="showimgConA" :key="index" :href="item.resPath" >
                  <span >{{item.fName}}</span>
                </a>
                
                 <!-- <a :key="index" @click target="_Blank">{{ accessories.fName }}
                    </a> -->
              </template>
              <a v-if="workContractFile.length < 1" class="showimgConA">
                  <span >暂无</span>
                </a>
            </span>
            <div style="clear: both;"></div>
        	</p>
        	<p class="detail-item" v-if="fileShow6"><span class="detail-label">{{fileName6}}</span>
            <span class="showimgCon">
              <template v-for="(item, index) in otherFile">
                <div @click="showImgPreviewa(item.resPath)" v-if="isPic(item.fName)" class="showimgConA" :key="index">
                  <img  class="img" :key="index" :src="item.resPath" alt="">
                </div>
                <a v-else class="showimgConA" :key="index" :href="item.resPath" >
                  <span >{{item.fName}}</span>
                </a>
                
                 <!-- <a :key="index" @click target="_Blank">{{ accessories.fName }}
                    </a> -->
              </template>
              <a v-if="otherFile.length < 1" class="showimgConA">
                  <span >暂无</span>
                </a>
            </span>
            <div style="clear: both;"></div>
        	</p>
        	
        </template>
        
        
        
        <div style="position:absolute;z-index:200;right:14px;top:50px;">
          <img v-if="data.approveState=='1'" src="../../assets/images/havePass.png" height="83px" width="99px">
          <img v-if="data.approveState=='2'" src="../../assets/images/haveRejected.png" height="83px" width="99px">
        </div>
      </div>

      <div class="drawer-time">
        <ul class="line-list">
          <li>
            <div class="line-date">{{formDate(data.createDate )}}</div>
            <div class="dot-line">
              <div :class="data.approveState=='3'?'dot-gray':'dot-large'">
                <div>v</div>
              </div>
              <div :class="data.approveState=='3'?'line-hidden':'line'"></div>
            </div>
            <div class="info-box">
              <span class="line-state2">发起人 <span v-if="data.approveState=='3'">撤回</span></span>
              <div class="line_desc">{{data.approveLaunchUserName}}</div>
            </div>
          </li>
          <li v-if="data.approveState !='3'" v-for="(item, index) in  data.auditRecordGroup" :key="index">
            <div class="line-date">{{formDate(item.detail[0].operateDate)}}</div>
            <div class="dot-line">
              <div v-if="item.groupState=='2'" class="dot-red">
                <div>×</div>
              </div>
              <div v-else :class="item.groupState=='1' ||item.groupState =='3'?'dot-large':'dot'">
                <div v-if="item.groupState=='1' ||item.groupState =='3'">v</div>
                <div v-else>...</div>
              </div>
              <div :class="(index+1)==data.auditRecordGroup.length?'line-hidden':'line'"></div>
            </div>
            <div class="info-box">
              <div>
                <span class="line-state2" v-if="item.groupState=='2'">驳回</span>
                <span class="line-state2" v-if="item.groupState=='1'">同意</span>
                <span class="line-state2" v-if="item.groupState=='0'">审批中</span>
                <div class="line_desc" v-for="(items,i) in item.detail " :key="i">
                  <span>{{ items.approveUserName}}({{items.approveFlagText}})</span>
                  <span v-if="items.approveContent&&items.approveContent!=''">(</span>
                  <span> {{items.approveContent}} </span>
                  <span v-if="items.approveContent&&items.approveContent!=''">)</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <Mark :type="type"/>
      
      </div>
      <!--基本信息结束-->


      <div style="height:70px;" v-if="(doneOrNotDone==1&&type=='1') || (doneOrNotDone==undefined && data.approveState==0 && type=='1')"></div>
      <div class="drawer-footer" v-if="doneOrNotDone==1&&type=='1'">
        <!--<Button style="background-color:rgba(230,0,19,1);width:47%;" @click="executeApprove('2')">驳回</Button>
        <Button style="margin-left:15px;width:47%;" @click="executeApprove('1')">同意</Button>-->
        <Button style="background-color:rgba(230,0,19,1);width:47%;" @click="ApproveDetail('2')">驳回</Button>
        <Button style="margin-left:15px;width:47%;" @click="ApproveDetail('1')">同意</Button>
      </div>
      <!-- 只要有一个节点是审批通过的就不可以撤回 -->
      <div class="drawer-footer" v-if="doneOrNotDone==undefined && data.approveState==0 && type=='1'">
        <Button v-if="flag==true" @click="revokeProcess()">撤销</Button>
      </div>
      
      <Modal :mask-closable="false" v-model="editMsg" @on-cancel="modalApproveContentCancel" width="90%">
    	    <p slot="header">输入审批内容</p>
    	    <Row :gutter="10" class="marginTop">
						<Col span="24">
						  <Input type="textarea" placeholder="请输入" v-model="approveContent" size="large"></Input>
						  
						</Col>
					</Row>
    	    <div slot="footer">
	            <Button type="primary" @click="saveApproveContent">确定</Button>
	        </div>
    </Modal>
      
      
      
    </div>
    
    <van-popup get-container="body" class="van-dialog__preview" v-model="showPreviewa" position="right" :style="{ width: '100%',height:'100%','backgroundColor':'transparent'}">
    	<div class="flexImgBox">
      <div class="imgBox">
        <img :src="previewUrla">
      </div>
      <div class="previewBtn">
        <van-icon @click="closePreviewa" size="30"  name="close" />
      </div>
    </div>
    </van-popup>
    
    
  </div>
</template>
<script>
  import mixin from './mixin.js'
  import {
    getApproveDetailById, //根据审批项ID获取详情
    getApproveComment, //根据审批项ID获取备注详情
    saveComment, //添加备注
    deleteComment, //删除备注
    executeApprove, //审批人进行审批操作
    revokeProcess, //撤销一个流程
    listFormFeeItem, //查询费项
    upLoad,
    getByProcessKeyAndSerialNum,
    getByProcessKeyAndId

  } from "./service/getData.js"
  import {
    error
  } from 'util';
  export default {
    mixins:[mixin],
    data() {
      return {
      	approveContent:"",//新加的审批内容
        editMsg:false,//审批内容弹窗是否显示
        apvFlag:"1",//1同意2驳回
        tabName:'baseInfo',
        url: '/landcrm/rest/uploadFileInfo/uploadMutiFile',
        data: {},
        getData: {},
        jimaoData:{},
        upLoadData: [],
        tipData: [], //备注
        departmentName: [],
        uploadFiles: [],
        actTaskId: [],
        operateDate: {},
        comments: '', //备注内容
        num: '',
        isChoose: false, //图片放大缩小类的添加
        addStatus: false, //备注里的添加显示状态
        userId: localStorage.userId,
        doneOrNotDone: '',
        flag: true,
        type: '', //代办或已办
        approveParam: {},
        processKey:this.$route.query.processKey,
        caohejing: ['chjClimbingHigh', 'chjFireWork', 'chjConfinedSpace', 'chjSprayTask', 'chjTmpElectricity',
          'chjWorkContact'
        ],
        fileName1: "",
        fileName2: "",
        fileName3: "",
        fileName4: "",
        fileName5: "",
        fileName6: "",
        fileShow1: false,
        fileShow2: false,
        fileShow3: false,
        fileShow4: false,
        fileShow5: false,
        fileShow6: false,
        showFile: false,
        accessoriesOperator: [],
        accessoriesResponsible: [],
        accessoriesConstructionPlan: [],
        accessoriesTaskUnit: [],
        workContractFile:[],
        otherFile:[],//其他相关资料
        showPreviewa:false,
        previewUrla:'',
        //  jobInfo:localStorage.jobInfo.split(";")[0].split(",")[1].split(':')[0],

      }
    },
    created() {
      if (process.env.NODE_ENV == 'production') {
        this.url = process.env.Url + '/landcrm/rest/uploadFileInfo/uploadMutiFile'
      }
      console.log("路由");
      console.log(this.$route);
      this.getByProcessKeyAndSerialNum()
      // 获取记录
      this.getApproveDetailById(this.$route.query.auditItemId);
      // 获取备注
      // this.getApproveComment(this.$route.query.auditItemId);
      this.doneOrNotDone = this.$route.query.doneOrNotDone;
      this.setShow(this.$route.query.processKey);
    },
    methods: {

      upLoadImg() {
        // this.$refs.file.click();
      },
      readFile(e) {
        if (!e.target.files[0]) return;
        let _this = this;
        let file = e.target.files[0];
        console.log(file)
        let formData = new FormData();
        formData.append("file", file);
        fetch(this.url, {
            method: "POST",
            body: formData
          })
          .then(res => res.json())
          .then(data => {
            this.upLoadData = data.fileInfo
            //   console.log('this.upLoadData是',this.upLoadData)
            this.uploadSuccess()
          })
        //   this.uploadSuccess()
        //   upLoad(formData).then(res=>{
        //       if(res.status == 200){
        //           console.log(res)
        //       }
        //   })
      },
      // 图片放大缩小
      imgScc: function(filePath) {
        this.isChoose = !this.isChoose
      },
      // 根据附件格式判断是图片还是文件
      fileNameForm(fileName) {
        //    console.log(fileName)
        //     console.log('x是',fileName)
        if (fileName.indexOf("png") > 0 || fileName.indexOf("jpg") > 0 || fileName.indexOf("jpeg") > 0 || fileName.indexOf(
            "gif") > 0) {
          return true;
        } else {
          return false;
        }

      },
      // 根据附件为文件跳转查看
      viewFile(url) {
        window.open(url)
      },
      // 根据审批项ID获取详情
      getApproveDetailById(approveItemId) {
        getApproveDetailById({
          approveItemId: approveItemId,
          currentAuditFlag: '0'
        }).then(res => {
          if (res.status == 200) {
            this.data = res.data;
            this.actTaskId = this.data.auditRecords[0].actTaskId
            this.jimaoData = JSON.parse(res.data.approveParam);
            this.type = res.data.state
            let departx = JSON.parse(res.data.approveParam)
            // this.operateDate = res.data.auditRecordGroup[0].detail[0].operateDate
            if (this.data.approveParam && this.data.approveParam != '') {
              this.approveParam = JSON.parse(this.data.approveParam)
              if (this.approveParam.projectId && this.approveParam.serialNumber) {
                this.listFormFeeItem(this.approveParam.serialNumber, this.approveParam.projectId)
              }
              // 审批节点中第一个节点知道有一个审批过，就不可以撤销
              if (this.data.auditRecordGroup && this.data.auditRecordGroup.length > 0) {
                this.data.auditRecordGroup.sort(this.sortBy("groupCreateDate"));
                if (this.data.approveState == '0') {
                  if (this.data.auditRecordGroup[0].groupState == '0') {
                    var i = 0;
                    this.data.auditRecordGroup[0].detail.forEach(item => {
                      if (item.approveFlag == "1") {
                        i = i + 1;
                      }
                    })
                    if (i == 0) {
                      this.flag = true;
                    } else {
                      this.flag = false;
                    }
                  } else {
                    this.flag = false;
                  }
                } else {
                  this.flag = true;
                }
              }

            }
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      // 漕河泾详情
      getByProcessKeyAndSerialNum() {
      	
        getByProcessKeyAndSerialNum({
      		processKey: this.$route.query.processKey,//就是approveType活动类型
          serialNumber: this.$route.query.serialNumber
      	}).then(res => {
        	  
          if (res.status == 200) {
          	//console.log("详情返回");
          	//console.log(res);
            this.getData = res.data;
            if (
              res.data.accessoriesOperator &&
              res.data.accessoriesOperator != ""
            ) {
              this.accessoriesOperator = JSON.parse(res.data.accessoriesOperator);
            }

            if (
              res.data.accessoriesResponsible &&
              res.data.accessoriesResponsible != ""
            ) {
              this.accessoriesResponsible = JSON.parse(
                res.data.accessoriesResponsible
              );
            }
            if (
              res.data.workContractFile &&
              res.data.workContractFile != ""
            ) {
              this.workContractFile = JSON.parse(
                res.data.workContractFile
              );
            }
            if (
              res.data.otherFile &&
              res.data.otherFile != ""
            ) {
              this.otherFile = JSON.parse(
                res.data.otherFile
              );
            }
            console.log("this.otherFile");
            console.log(this.otherFile);
            if (
              res.data.accessoriesConstructionPlan &&
              res.data.accessoriesConstructionPlan != ""
            ) {
              this.accessoriesConstructionPlan = JSON.parse(
                res.data.accessoriesConstructionPlan
              );
            }

            if (
              res.data.accessoriesTaskUnit &&
              res.data.accessoriesTaskUnit != ""
            ) {
              this.accessoriesTaskUnit = JSON.parse(res.data.accessoriesTaskUnit);
            }
            
            
            
          }else{
            this.$Message.error(res.message)
            this.getData = {}
          }
        })
      },
      setShow(approveType) {
        switch (approveType) {
          case "chjClimbingHigh":
            this.showFile = true;
//          this.taskPeriodText = "作业时间";
//          this.taskLocationText = "作业地点";
//          this.taskLevelText = "作业级别";
//          this.responsiblePersonText = "负责人";
//          this.siteSupervisorText = "现场监护人";
            this.fileName1 = "操作人登高证/特殊工种及身份证复印件：";
            this.fileName4 = "负责人及监护人身份证复印件：";
            this.fileName6 = "其它相关资料：";
            this.fileShow1 = true;
            this.fileShow4 = true;
            this.fileShow6 = true;
            break;
          case "chjFireWork":
            this.showFile = true;
//          this.taskPeriodText = "动火时间";
//          this.taskLocationText = "动火地点";
//          this.taskLevelText = "动火级别";
//          this.responsiblePersonText = "现场负责人";
//          this.siteSupervisorText = "现场监护人";
            this.fileName1 = "操作人动火证及身份证复印件：";
            this.fileName4 = "负责人及监护人身份证复印件：";
            this.fileName6 = "其它相关资料：";
            this.fileShow1 = true;
            this.fileShow4 = true;
            this.fileShow6 = true;
            // this.pageTitle = "动火作业申请记录";
            break;
          case "chjConfinedSpace":
            this.showFile = true;
//          this.taskPeriodText = "作业时间";
//          this.taskLocationText = "地点位置";
//          this.responsiblePersonText = "现场负责人";
//          this.siteSupervisorText = "现场监护人";
            this.fileName1 = "操作人员证书及身份证复印件：";
            this.fileName2 = "附件（作业单位资质）：";
            this.fileName3 = "附件（施工方案）：";
            this.fileName4 = "负责人及监护人身份证复印件：";
            this.fileName6 = "其它相关资料：";
            this.fileShow1 = true;
            this.fileShow2 = true;
            this.fileShow3 = true;
            this.fileShow4 = true;
            this.fileShow6 = true;
            // this.pageTitle = "受限空间申请记录";
            break;
          case "chjSprayTask":
            // this.pageTitle = "喷淋系统停水作业申请记录";
            break;
          case "chjTmpElectricity":
            this.showFile = true;
//          this.responsiblePersonText = "现场负责人";
//          this.siteSupervisorText = "单位负责人";
            this.fileName1 = "操作人电工证证及身份证复印件：";
            this.fileName4 = "单位及现场负责人身份证复印件：";
            this.fileName6 = "其他相关资料：";
            this.fileShow1 = true;
            this.fileShow4 = true;
            this.fileShow6 = true;
            // this.pageTitle = "临时用电申请记录";
            break;
          case "chjWorkContact":
             this.showFile = true;
             this.fileName5 = "相关资料附件：";
             this.fileShow5 = true;
            // this.pageTitle = "内部工作申请记录";
            break;
          default:
            this.$Modal.warning({
              title: "数据异常，请重新访问"
              // onOk: () => {
              // windows.close();
              // }
            });
        }
      },

      //审批的节点按照时间排序
      sortBy(props) {
        return function(a, b) {
          return new Date(a[props]) - new Date(b[props]);
        }
      },
      changeAddStatus() {
        if (this.comments && this.comments != '') {
          this.addStatus = true;
        } else {
          this.addStatus = false;
        }
      },
      uploadSuccess(file, fileList) { //附件上传成功
        this.$Message.success("添加附件成功");
        let uploadFiles = {
          fileId: "",
          fileName: "",
          filePath: ""
        }
        // console.log('uploadFiles',uploadFiles)
        // console.log('21321',typeof(this.upLoadData))
        this.uploadFiles = uploadFiles
        uploadFiles.fileId = this.upLoadData.fid
        uploadFiles.fileName = this.upLoadData.fName
        uploadFiles.filePath = this.upLoadData.resPath
        this.uploadFiles = JSON.stringify(uploadFiles);

      },
      uploadError(error, file, fileList) { //文件上传失败时的钩子
        this.$Modal.warning({
          title: '错误',
          content: '文件上传失败',
        });
      },
      listFormFeeItem(serialNumber, projectId) {
        listFormFeeItem({
          serialNumber: serialNumber,
          projectId: projectId
        }).then(res => {
          if (res.status == 200) {
            this.dataTable = res.data;
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      //添加备注
      saveComment() {

        var self = this;
        var saveData = {
          auditItemId: this.$route.query.auditItemId, // 审批项ID
          // commentUserId :localStorage.user_id,//备注人ID
          // commentUserAccount : localStorage.userAccount  ,//备注人账号
          comments: self.comments, //备注人内容
          // commentUserId :'2052392',//备注人ID
          commentUserId: localStorage.getItem('memberId'), // 审批任务的代办人ID
          // commentUserAccount : 'shjmadmin'  ,//备注人账号
          commentUserAccount: localStorage.getItem('userAccount'), //备注人账号
          // commentUserName : 'ceshi'  ,//备注人名称
          commentUserName: localStorage.getItem('userName') // 操作人
        }
        console.log('up', self.uploadFiles)
        if (self.uploadFiles && self.uploadFiles != '') {
          saveData.attachment = self.uploadFiles
        }
        if (self.comments && self.comments != "") {
          saveComment(saveData).then(res => {
            if (res.status == 200) {
              self.tipData = []
              self.getApproveComment(this.$route.query.auditItemId)
            }
          })
        } else {
          self.$Message.error("备注内容不能为空")
        }

      },
      // 根据审批项ID获取备注详情
      getApproveComment(id) {
        var self = this;
        var searchForm = {
          auditItemId: id, //审批项ID
        }
        getApproveComment(searchForm).then(res => {
          if (res.status == 200) {
            let data = res.data || [];
            data.forEach(item => {
              if(item.attachment){
                let attachment = JSON.parse(item.attachment);
                if(Array.isArray(attachment)){
                  item.attachmentArr = attachment;
                }else{
                  item.attachmentArr = [attachment];
                }
              }
            })
            self.comments = "";
            self.num = self.tipData.length;
          } else {
            self.$Message.error(res.message)
          }
        })
      },
      // 设置时间轴时间
      formDate(date) {
        if (date && date != "") {
          var str = "";
          var arr = date.split(" ");
          str += arr[0].match(/\d{2}-\d{2}$/) + " " + arr[1].match(/^\d{2}:\d{2}/);
          return str
        }
      },
      modalApproveContentCancel(){//关闭弹窗
    	self.editMsg=false;
    },
    ApproveDetail(apvFlag){//显示弹窗
    	  this.editMsg=true;
    	  this.apvFlag=apvFlag;
    	  /*this.$Modal.confirm({
            render: (h) => {
                return h('textarea', {
                    props: {
                        value: this.approveContent,
                        autofocus: true,
                        placeholder: '请输入审批内容'
                    },
                    on: {
                        input: (val) => {
                            this.approveContent = val;
                        }
                    }
                    
                })
            },
            //onOk: this.executeApprove(apvFlag)
        })*/
    },
    saveApproveContent(){//审批人进行审批操作之前调用的
    	 
    	 var self = this;
    	 if(self.approveContent==""){
    	 	  self.approveContent="同意";
    	 }
      var data = {
        // approveItemId:'201912181576661530626',
        // actTaskId: '102825' ,//任务ID
        approveItemId: self.$route.query.auditItemId,
        actTaskId: self.$route.query.actTaskId, //任务ID
        approveUserId:localStorage.user_id ,// 审批任务的代办人ID
        //approveUserId: localStorage.getItem('memberId'), // 审批任务的代办人ID
        // approveUserId :'2052392',//备注人ID
        apvFlag: self.apvFlag, //审批结果(1:通过,2:驳回)
        // operator:localStorage.userName ,// 操作人
        // operator:localStorage.getItem('userName') // 操作人
        approveContent: self.approveContent,  //审批内容新放开的
        userName:localStorage.userName,
        companyId:localStorage.companyId,
        userId:localStorage.user_id,
        userAccount:localStorage.userAccount
        
      }
      executeApprove(data).then(res => {
        if (res.status == 200) {
          /* getApproveDetailById({
            approveItemId: approveItemId,
            currentAuditFlag: '-1'
          }).then(res => {
            if (res.status == 200) {
              this.data = res.data;
              this.actTaskId = this.data.auditRecords[0].actTaskId
              this.getData = JSON.parse(res.data.approveParam);
              this.type = res.data.state
              let departx = JSON.parse(res.data.approveParam)
              if (this.data.approveParam && this.data.approveParam != '') {
                this.approveParam = JSON.parse(this.data.approveParam)
                if (this.approveParam.projectId && this.approveParam.serialNumber) {
                  this.listFormFeeItem(this.approveParam.serialNumber, this.approveParam.projectId)
                }
                // 审批节点中第一个节点知道有一个审批过，就不可以撤销
                if (this.data.auditRecordGroup && this.data.auditRecordGroup.length > 0) {
                  this.data.auditRecordGroup.sort(this.sortBy("groupCreateDate"));
                  if (this.data.approveState == '0') {
                    if (this.data.auditRecordGroup[0].groupState == '0') {
                      var i = 0;
                      this.data.auditRecordGroup[0].detail.forEach(item => {
                        if (item.approveFlag == "1") {
                          i = i + 1;
                        }
                      })
                      if (i == 0) {
                        this.flag = true;
                      } else {
                        this.flag = false;
                      }
                    } else {
                      this.flag = false;
                    }
                  } else {
                    this.flag = true;
                  }
                }
              }
            } else {
              this.$Message.error(res.message)
            }
          }) */
          this.$Message.success('操作成功');
          this.$router.back();
          self.editMsg=false;
        } else {
          self.$Message.error(res.message);
          console.log(res.message);
          self.editMsg=false;
        }
      })
    	 
    	 
    },
      //审批人进行审批操作
      executeApprove(apvFlag) {
        var self = this;
        var data = {
          // approveItemId:'201912181576661530626',
          // actTaskId: '102825' ,//任务ID
          approveItemId: self.$route.query.auditItemId,
          actTaskId: self.$route.query.actTaskId, //任务ID
          // approveUserId :localStorage.user_id ,// 审批任务的代办人ID
          approveUserId: localStorage.getItem('memberId'), // 审批任务的代办人ID
          // approveUserId :'2052392',//备注人ID
          apvFlag: apvFlag, //审批结果(1:通过,2:驳回)
          // operator:localStorage.userName ,// 操作人
          // operator:localStorage.getItem('userName') // 操作人
          //approveContent:   //审批内容
        }
        executeApprove(data).then(res => {
          if (res.status == 200) {
            /* getApproveDetailById({
              approveItemId: approveItemId,
              currentAuditFlag: '-1'
            }).then(res => {
              if (res.status == 200) {
                this.data = res.data;
                this.actTaskId = this.data.auditRecords[0].actTaskId
                this.getData = JSON.parse(res.data.approveParam);
                this.type = res.data.state
                let departx = JSON.parse(res.data.approveParam)
                if (this.data.approveParam && this.data.approveParam != '') {
                  this.approveParam = JSON.parse(this.data.approveParam)
                  if (this.approveParam.projectId && this.approveParam.serialNumber) {
                    this.listFormFeeItem(this.approveParam.serialNumber, this.approveParam.projectId)
                  }
                  // 审批节点中第一个节点知道有一个审批过，就不可以撤销
                  if (this.data.auditRecordGroup && this.data.auditRecordGroup.length > 0) {
                    this.data.auditRecordGroup.sort(this.sortBy("groupCreateDate"));
                    if (this.data.approveState == '0') {
                      if (this.data.auditRecordGroup[0].groupState == '0') {
                        var i = 0;
                        this.data.auditRecordGroup[0].detail.forEach(item => {
                          if (item.approveFlag == "1") {
                            i = i + 1;
                          }
                        })
                        if (i == 0) {
                          this.flag = true;
                        } else {
                          this.flag = false;
                        }
                      } else {
                        this.flag = false;
                      }
                    } else {
                      this.flag = true;
                    }
                  }

                }
              } else {
                this.$Message.error(res.message)
              }
            }) */
            self.$Message.success("操作成功")
            self.$router.back();
          } else {
            self.$Message.error(res.message)
            console.log(res.message)
          }
        })
      },
      //撤销一个流程
      revokeProcess() {
        var self = this;
        var data = {
          approveItemId: self.data.auditItemId, // 审批项ID
          //    approveLaunchUserId :localStorage.user_id,  //申请发起人ID
          // approveLaunchUserId :'2052392',//备注人ID
          approveLaunchUserId: localStorage.getItem('memberId'), // 审批任务的代办人ID
        }
        revokeProcess(data).then(res => {
          if (res.status == 200) {
            self.$Message.success("操作成功")
            self.$router.back();
          } else {
            self.$Message.error(res.message)
          }
        })

      },
      isPic(flag) {
        var reg = /\.(png|jpg|gif|jpeg|webp)$/;
        return reg.test(flag);
      },
//    showImgPreview(url){
//	      this.previewUrl1 = url;
//	      this.showPreview1 = true;
//	    },
      showImgPreviewa(url){
      	this.previewUrla = url;
      	this.showPreviewa = true;
	    },
	    closePreviewa(){
	      this.showPreviewa = false;
	      
	    }
      //跳转流程
      // detail(){
      //         // 1 房屋租赁合同,2 车位租赁合同,3 有偿服务合同,4 商业资源合同,5 审批流
      //         if(JSON.parse(this.data.approveParam).serialNumberType&&JSON.parse(this.data.approveParam).serialNumberType!=''){
      //             if(JSON.parse(this.data.approveParam).serialNumberType=="5"){
      //                 // 从退押金流程出来的，要是有processKey说明是从审批流发起的押金，若无则表示从1,2,3,4里面出来的
      //                 if(JSON.parse(this.data.approveParam).processKey&&JSON.parse(this.data.approveParam).processKey!=''){
      //                     window.open(process.env.Url+ "/sjzx/#/detailApprove/"+JSON.parse(this.data.approveParam).serialNumber+"/"+JSON.parse(this.data.approveParam).processKey+"/"+this.data.approveTitle)
      //                 }else{
      //                     window.open(process.env.Url+ "/sjzx/#/detailApprove/"+JSON.parse(this.data.approveParam).serialNumber+"/"+this.data.approveType+"/"+this.data.approveTitle)
      //                 }
      //             }else if(JSON.parse(this.data.approveParam).serialNumberType=="2"){
      //                 if(JSON.parse(this.data.approveParam).serialNumber&&JSON.parse(this.data.approveParam).serialNumber!=''){
      //                     window.open( process.env.Url + "/jmht/#/contractDetail/"+JSON.parse(this.data.approveParam).serialNumber)
      //                 }else{
      //                     window.open( process.env.Url + "/jmht/#/contractDetail/"+this.data.fkId)
      //                 }
      //             }else if(JSON.parse(this.data.approveParam).serialNumberType=="3"){
      //                 window.open( process.env.Url + "/jmht/#/paidServiceDetail/"+this.data.fkId)
      //             }else if(JSON.parse(this.data.approveParam).serialNumberType=="1"){
      //                 // 房屋目前跳转到和车位一个页面
      //                 window.open( process.env.Url+ "/jmht/#/contractDetail/"+this.data.fkId )
      //             }else if(JSON.parse(this.data.approveParam).serialNumberType=="4"){
      //                 this.$Message.info("开发中")
      //             }
      //         }
      // }
    }

  }
</script>
<style scoped>
  .attachment {
    display: inline-block;
    position: relative;
  }

  .attachment img {
    transform: scale(1);
    /*图片原始大小1倍*/
    transition: all ease 0.5s;
    /*图片放大所用时间*/
  }

  .attachment img.active {
    transform: scale(3);
    /*图片需要放大3倍*/
    position: absolute;
    /*是相对于前面的容器定位的，此处要放大的图片，不能使用position：relative；以及float，否则会导致z-index无效*/
    z-index: 100;
  }


  .detail-body {
    padding: 5px 10px;

  }

  .title {
    border-bottom: 1px solid #e8eaec;
    font-size: 15px;
    line-height: 30px;
    font-weight: bold;
    padding: 5px 0px;
  }

  .line-list {
    background: #FFFFFF;
    border-radius: 4px;
    padding: 28px 0;
  }

  .line-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    color: #222222;
    font-size: 14px;
  }

  .inp {
    /* position:relative;
        left:10px; */
    float: left !important;
    width: 93%;
  }

  .inp /deep/ .ivu-input {
    border-radius: 0px 3px 0px 0px !important;
    border-left-style: none !important;
  }

  .line-date {
    color: #6A6A6A;
    font-size: 12px;
    padding: 0 0 5px;
    text-align: right;
  }

  .dot-line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 12px;
  }

  .dot-large {
    height: 15px;
    width: 15px;
    background: #2760FF;
    border-radius: 15px;
    border: #FCE5E7 solid 2px;
  }

  .dot-large div {
    text-align: center;
    color: #FFFFFF;
    line-height: 8px;
    font-size: 12px;
  }

  .dot-red {
    height: 15px;
    width: 15px;
    background: #e12d2c;
    border-radius: 15px;
    border: #ECECEC solid 2px;
    margin: 0;
  }

  .dot-red div {
    text-align: center;
    color: #FFFFFF;
    line-height: 9px;
    font-size: 12px;
  }

  .dot-gray {
    height: 15px;
    width: 15px;
    background: #9e9e9e;
    border-radius: 15px;
    border: #ECECEC solid 2px;
    margin: 0;
  }

  .dot-gray div {
    text-align: center;
    color: #FFFFFF;
    line-height: 9px;
    font-size: 12px;
  }

  .dot {
    height: 15px;
    width: 15px;
    background: #faad13;
    border-radius: 15px;
    border: #ECECEC solid 2px;
    margin: 0;
  }

  .dot div {
    text-align: center;
    color: #FFFFFF;
    line-height: 4px;
    font-size: 12px;
  }

  .line-hidden {
    width: 1px;
    background-color: #FFFFFF;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }

  .line {
    width: 1px;
    background-color: #DDDDDD;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }

  .line_desc {
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    padding: 0 5px
  }

  .line-state2 {
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px;
    padding: 0 5px;
    display: inline-block;
  }

  .info-box {
    padding: 0 0 10px 0;
    width: calc(100% - 30px);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1) !important;
  }

  .line-list li:last-child .info-box {
    border-bottom: none;
  }

  /* 操作按钮 */
  .blue_link {
    color: #2D8CF0;
    display: inline-block;
    margin-right: 3px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;

    .left_icon {
      float: left;
      font-size: 20px;
      margin: -2px 5px 0 0;
    }
  }

  .blue_link:hover {
    color: #1860ad;

  }

  .drawer-tip /deep/ .ivu-input-suffix {
    right: 10px;
    top: 5px;
  }

  .addbeizhu {
    height: 32px;
    flex: 1;
    /* background-color: red; */
  }

  .drawer-footer {
    /* height: 50px; */
    width: 100%;
    /* float: left; */
    padding: 10px;
    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0;
    right:0;
    background: #fff;
    z-index:999;
    /* align-content:flex-start; */
    /* display: flex; */
    /* margin-top:50px; */
    /* align-items: flex-end; */

  }

  .drawer-footer Button {
    color: #fff;
    font-size: 15px;
    float: left;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    background: rgba(0, 74, 179, 1);
  }

  .inputfile {
    position: absolute;
    /*left:-99999px;*/
    opacity: 0;
    width: 25px;
    height: 32px;
    z-index: 2;
  }

  .detail-item {
    margin-top: 5px;
  }
  .tab{
    display: flex;
    margin-top: 10px;
  }
  .tab span{
    flex:1;
    text-align: center;
    height: 30px;
    border:solid 1px #dcdcdc;
    margin-left:-1px;
    line-height: 30px;


  }
    .tab span.on{
      background:rgba(129, 211, 248, 1);
      color:#fff;
    }
    .showimgCon{
    	 display:block;
    	 padding-top: 5px;
    }
    .showimgCon .showimgConA{
    	float:left;
    	display: block;
    	 margin-right: 10px;
    	 margin-bottom: 5px;
    }
    .showimgCon .showimgConA img{
    	 width:70px;
    	 height:70px;
    }
    .flexImgBoxCon{
    	 position:fixed;
    	 left:0px;
    	 top:0px;
    	 right:0px;
    	 bottom:0px;
    	 z-index:99999;
    	 background:rgba(0,0,0,.6);
    }
    .flexImgBox{
		  width: 100%;
		  height: 100%;
		  display: flex;
		  flex-direction: column;
		}
		.imgBox{
		  flex:1;
		  display: flex;
		  align-items: center;
		}
		.previewBtn{
		  height: 60px;
		  text-align: center;
		  color:#fff;
		  line-height: 60px;
		}
</style>
