<template>
  <div>
    <div class="detail-body">
      <div class="title">{{data.approveTitle }}</div>
      <div class="tab">
        <span @click="changeTab('baseInfo')" :class="{on:tabName === 'baseInfo'}">基础信息</span>
        <span @click="changeTab('fei')" :class="{on:tabName === 'fei'}">费用信息</span>
      </div>
      <!-- 基础信息 -->
      <div class="baseInfo" v-if="tabName == 'baseInfo'">
        <div style="padding-top:5px;font-size:13px;">
          <p class="detail-item">
            <span class="detail-label">审批编号：</span>
            <span class="detail-val">{{data.auditItemId}}</span>
          </p>
          <p class="detail-item">
            <span class="detail-label">审批类型：</span>
            <span class="detail-val">{{data.approveTypeText }}</span>
          </p>
          <p class="detail-item">
            <span class="detail-label">项目：</span>
            <span class="detail-val">{{getData.projectName}}</span>
          </p>
          <p class="detail-item">
            <span class="detail-label">所在部门：</span>
            <span class="detail-val">{{getData.departmentName}}</span>
          </p>
          <p class="detail-item" v-if="getData.title">
            <span class="detail-label">副标题：</span>
            <span class="detail-val">{{getData.title}}</span>
          </p>
          <p class="detail-item"><span class="detail-label">客户名称：</span><span class="detail-val">{{getData.customerName}}</span></p>
          <p class="detail-item" v-if="getData.payerName"><span class="detail-label">付款单位：</span><span class="detail-val">{{getData.payerName}}</span></p>
          <p class="detail-item"><span class="detail-label">所在房间/自定义：</span><span class="detail-val">{{getData.roomName}}</span></p>
          <p class="detail-item" v-if="getData.contacterName"><span class="detail-label">联系人：</span><span class="detail-val">{{getData.contacterName}}</span></p>
          <p class="detail-item" v-if="getData.contacterPhone"><span class="detail-label">联系电话：</span><span class="detail-val">{{getData.contacterPhone}}</span></p>
          <!-- 通讯业务 no-->
          <template v-if="data.approveType == 'kfCommunicationBusiness'">
            <p class="detail-item"><span class="detail-label">通信业务项目：</span><span class="detail-val">{{getData.contactProjectText}}</span></p>
            <p class="detail-item"><span class="detail-label">起始楼层：</span><span class="detail-val">{{getData.startFloor}}</span></p>
            <p class="detail-item"><span class="detail-label">终点楼层：</span><span class="detail-val">{{getData.endFloor}}</span></p>
            <p class="detail-item"><span class="detail-label">申请渠道：</span><span class="detail-val">{{getData.applyChannelText}}</span></p>
            <p class="detail-item"><span class="detail-label">施工日期：</span><span class="detail-val">{{getData.constructionDate}}</span></p>
            <p class="detail-item"><span class="detail-label">线路数量：</span><span class="detail-val">{{getData.lineQuantity}}</span></p>
          </template>
          <p class="detail-item" v-if="getData.responsibleDepNamesStr"><span class="detail-label">办理部门：</span><span class="detail-val">{{getData.responsibleDepNamesStr}}</span></p>
          <!-- 通讯业务-->
          <p v-if="data.approveType == 'kfCommunicationBusiness'" class="detail-item"><span class="detail-label">提前缴费：</span><span class="detail-val">{{getData.advancedPayText}}</span></p>
          <!-- 租户名牌 -->
          <template v-if="data.approveType == 'kfTenantNameplate'">
            <p class="detail-item"><span class="detail-label">铭牌类型：</span><span class="detail-val">{{getData.brandTypeText}}</span></p>
            <p class="detail-item"><span class="detail-label">操作：</span><span class="detail-val">{{getData.operateTypeText}}</span></p>
          </template>
          <!-- 装修复原-->
          <p v-if="data.approveType == 'kfDecorationRestoration'" class="detail-item"><span class="detail-label">复原方式：</span><span class="detail-val">{{getData.restoreTypeText}}</span></p>
          <p class="detail-item"><span class="detail-label">备注：</span><span class="detail-val">{{getData.remark}}</span></p>
          <p class="detail-item"><span class="detail-label">附件：</span>
            <span class="detail-val attachment">
              <template v-for="(accessories,index) in getData.accessoriesArr">
                <a @click="showImgPreview(accessories.resPath)" v-if="isPic(accessories.fName)" class="attachment-item" :key="index">
                  <img  class="img" :key="index" :src="accessories.resPath" alt="">
                </a>
                <a v-else class="attachment-item" :key="index" :href="accessories.resPath" >
                  <span >{{accessories.fName}}</span>
                </a>
                 <!-- <a :key="index" @click target="_Blank">{{ accessories.fName }}
                    </a> -->
              </template>
            </span></p>
          <!-- 二次装修 -->
          <p class="detail-item" v-if="data.approveType == 'kfRenovation'">
            <span class="detail-label">现状交房：</span>
            <span class="detail-val">
              {{getData.turnOverFlagText}}
            </span>
          </p>
          <div style="position:absolute;z-index:200;right:14px;top:100px;">
            <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 style="margin-top:10px;" v-if="$route.query.processKey=='kfAccessCard' && getData.activitiAscDetailList && getData.activitiAscDetailList.length >0">
          <p style="margin-bottom: 5px;">新卡明细</p>
          <Table border :columns="cardColumns" :data="getData.activitiAscDetailList" :disabled-hover="true"></Table>
        </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.groupCreateDate)}}</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 class="drawer-tip">
          <p style="margin-top:17px;margin-bottom:15px;font-size:14px;">备注 <span v-if="num&&num!=''"> ({{num}})</span>
          </p>
          <div class="clearfix" style="display: flex;" v-if="doneOrNotDone==1&&type=='1'">
            添加备注，上传图片
            <div style="height:32px;width:22px;background-color:#fff;float:left;border-radius:3px 0 0 0;border:1px solid #E0E0E0;border-right-style:none;">
              <input ref="file" type="file" @change="readFile" class="upLoadImg inputfile">
              <Icon @click.native="upLoadImg" type="ios-attach" style="float:left" size="24" />
            </div>
            <div class="addbeizhu">
              <Input placeholder="添加备注" class="inp" v-model="comments" @on-change="changeAddStatus">
              <div slot="suffix" class="blue_link">
                <p @click.stop="saveComment" v-if="addStatus==true">添加</p>
              </div>
              </Input>
            </div>
          </div>
          <input style="opacity: 0" ref="file" type="file"  @change="readFile" class="upLoadImg">
          <div v-if="tipData.length>0">
            <div v-for="(item,index) in tipData" :key="index">
              <div class="tip-title">
                <p style="font-size:14px"> <span class="blue_link">{{item.commentUserName}}</span> <span>添加了备注</span> </p>
                <p>
                  只能删除自己的评论，其他人的不可以删除
                  <span v-if="item.commentUserId == userId" class="blue_link" @click="deleteComment(item.commentId )">删除</span>
                  <span style="color:#b0b0b0">{{ formDate(item.createDate)}}</span>
                </p>
              </div>
              <div style="color:#666;margin:8px 0 15px 0;font-size:13px;">“{{item.comments}}”</div>
              <div v-if="item.attachment && item.attachment.length>0" style="padding:0px 11px;">
                <div class="attachment">
                  图片实现点击放大缩小功能，未完善
                  <template v-for="fujian in item.attachmentArr">
                    <img :key="fujian.fileId" v-if="isPic(fujian.fileName)" @click="viewFile(fujian.filePath)" :class="{'active':isChoose}" style="width:70px;height:70px;" :src="fujian.filePath">
                    <div :key="fujian.fileId" v-else @click="viewFile(fujian.filePath)" class="blue_link" style="font-size:12px;">{{fujian.fileName}}
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <!--基本信息结束-->
      <!--费项-->
      <div class="fei" v-if="tabName == 'fei'">
        <template v-if="dataTable.length">
          <div class="fei-section" v-if="receivableList && receivableList.length>0">
            <p class="fei-title">应收费项</p>
            <Table border :columns="columns" :data="receivableList" :disabled-hover="true"></Table>
          </div>
          <div class="fei-section" v-if="depositList && depositList.length>0">
            <p class="fei-title">押金管理</p>
            <Table border :columns="yjcolumns" :data="depositList" :disabled-hover="true"></Table>
          </div>
        </template>
        <template v-else>
          <div style="text-align: center; padding: 10px;">暂无数据</div>
        </template>
      </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>
      </div>
      <!-- 只要有一个节点是审批通过的就不可以撤回 -->
      <div class="drawer-footer" v-if="doneOrNotDone==undefined && data.approveState==0 && type=='1'">
        <Button v-if="flag==true" @click="revokeProcess()">撤销</Button>
      </div>
    </div>
    <van-popup
    class="van-dialog__preview"
      v-model="showPreview"
      position="right"
      get-container="body"
      :style="{ width: '100%',height:'100%','backgroundColor':'transparent' }"
    >

      <div class="flexImgBox">
      <div class="imgBox">
        <img :src="previewUrl">
      </div>
      <div class="previewBtn">
        <van-icon @click="closePreview" size="30"  name="close" />
      </div>
    </div>

    </van-popup>
  </div>
  </div>
</template>
<script>
 import mixin from './mixin.js' 
  // import Mark from './components/mark.vue'
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],
  // components:{
  //   Mark
  // },
  data() {

    return {
      
      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,
      columns: [{
          title: '费项',
          key: 'fiName',
          width: 120
        }, {
          title: '含税金额',
          key: 'amountWithTax',
          width: 100
        }, {
          title: '不含税金额',
          key: 'amountWithoutTax',
          width: 100
        }, {
            title: "结算方式",
            key: "settlementType",
            align: "left",
            width: 100,
          },{
          title: '金额明细',
          key: 'amountDetail',
          width: 150
        },
        {
          title: '备注',
          key: 'remark',
          width: 100
        }
      ],
      yjcolumns:[{
          title: '费项',
          key: 'fiName',
          width: 120
        }, {
          title: '应收金额',
          key: 'amountWithTax',
          width: 100
        }, {
            title: "结算方式",
            key: "settlementType",
            align: "left",
            width: 100,
          },{
          title: '金额明细',
          key: 'amountDetail',
          width: 150
        },
        {
          title: '备注',
          key: 'remark',
          width: 100
        }
      ],

      //卡明细
      cardColumns: [{
          type: "index",
          title: "序号",
          width: 70,
          align: "left"
        }, {
          title: "持卡人姓名",
          key: "user",
          align: "left",
          width: 120,
        },
        {
          title: "身份证号码",
          key: "idNumber",
          align: "left",
          width: 150,
        }, {
          title: "新卡类型",
          key: "cardTypeText",
          align: "left",
          width: 150,
        }, {
          title: "办卡项目",
          key: "cardProjectText",
          align: "left",
          width: 100,
        },
        {
          title: "进入特殊权限",
          key: "specialAccess",
          align: "left",
          width: 120,
        }, {
          title: "原卡编号",
          key: "oldCardNumber",
          align: "left",
          width: 120,
        },
        {
          title: "原卡类型",
          key: "oldCardTypeText",
          align: "left",
          width: 150,
        },
        {
          title: "备注",
          key: "remark",
          align: "left",
          width: 110,
        }
      ],
      cardDataTable: [],
      dataTable:[],  // 所有费项
      receivableList:[],  // 应收费项
      depositList:[]  // 押金

    }
  },
  created() {
    if (process.env.NODE_ENV == 'production') {
      this.url = process.env.Url + '/landcrm/rest/uploadFileInfo/uploadMutiFile'
    }
    this.getByProcessKeyAndId();
    // 获取记录
    this.getApproveDetailById(this.$route.query.auditItemId);
    // 获取备注
    // this.getApproveComment(this.$route.query.auditItemId);
    this.doneOrNotDone = this.$route.query.doneOrNotDone
  },
  methods: {
    isPic(flag) {
      var reg = /\.(png|jpg|gif|jpeg|webp)$/;
      return reg.test(flag);
    },
    changeTab(tabName) {
      this.tabName = tabName
    },
    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)
    // },
    // 下载
    clickSuccess(url) {
      // this.viewFile(url.resPath)
        let apiUrl = "";
        // window.open(
        //   process.env.Url +
        //   "/neikong/fileInfo/exportFile?fileId=" +
        //   url.fid +
        //   "&fileName=" +
        //   url.fName +
        //   "&fileUrl=" +
        //   url.resPath
        // );
        // console.log('111')
        try{
        this.$vux.loading.show({
          text:'正在加载中'
          })
        EbeiPlugins.downloadFile(url.filePath,url.fileId, url.fileName,()=>{
          this.$vux.loading.hide()
          EbeiPlugins.previewFile(url.fileId,()=>{
          },(err)=>{
            this.$vux.loading.hide()
          this.$Message.error("预览失败");
          });
        },()=>{
          this.$vux.loading.hide()
          this.$Message.error("下载失败");
        });
        }catch(err){
          console.log(err)
        }

      },
    // 根据审批项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)
        }
      })
    },

    // 金茂详情
    getByProcessKeyAndId() {
      getByProcessKeyAndId({
        processKey: this.$route.query.processKey,
        serialNumber: this.$route.query.serialNumber
      }).then(res => {
        if (res.status == 200) {
          let data = res.data;
          if (data.responsibleDepNames) {
            let responsibleDepNames = JSON.parse(data.responsibleDepNames);
            data.responsibleDepNamesStr = responsibleDepNames.map(item => item.departmentName).join(',');
          } else {
            data.responsibleDepNamesStr = '';
          }
          if (data.accessories) {
            let accessoriesArr = JSON.parse(data.accessories);
            data.accessoriesArr = accessoriesArr;
          } else {
            data.accessoriesArr = [];
          }
          this.getData = data;
        } else {
          this.$Message.error(res.message)
          this.getData = {}
        }
      })
    },
    //审批的节点按照时间排序
    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 || [];
          this.receivableList = this.dataTable.filter(item => item.fiType == 2);
          this.depositList = this.dataTable.filter(item => item.fiType == 3)
        } 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') // 操作人
      }
      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.tipData = data;
          console.log(self.tipData)
          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
      }
    },
    //审批人进行审批操作
    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)
            }
          }) */
          this.$Message.success('操作成功');
          this.$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)
        }
      })

    },
    //跳转流程
    // 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;
  display: flex;
}

.detail-item .detail-label {
  flex-shrink: 0;
  width: 90px;
  /* flex-shrink:none; */
}

.detail-item .detail-val {
  flex: 1;
  flex-wrap: wrap;
}

.detail-item .detail-val .img {
  width: 50px;
  height: 50px;
  margin-right: 5px;
}

.detail-item .detail-val.attachment {
  display: flex;
  align-items: center;
}

.detail-item .detail-val.attachment .attachment-item {
  margin-right: 5px;
}

.tab {
  display: flex;
  margin-top: 10px;
  font-size: 14px;
}

.tab span {
  flex: 1;
  text-align: center;
  height: 40px;
  border: solid 1px #dcdcdc;
  margin-left: -1px;
  line-height: 40px;

}

.tab span.on {
  background: rgba(129, 211, 248, 1);
  color: #fff;
}

.fei {
  margin-top: 10px;
}

.fei-section {
  margin-bottom: 10px;

}

.fei-section .fei-title {
  margin-bottom: 5px;
  font-weight: bold;
}

.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>
