<template>
  <div class="ec-main-view">
    <!--头部标题-->
    <div class="ec-top-view">
      <div class="d-flex align-items-center am-hlh-64 pl-4" :class="{ 'am-title-top': isSuctionTop }">
        <template>
          <span class="text-h1-dhcc text-bold-dhcc text-nowrap">{{ taskInfo["flowName"] }}</span>
          <span class="flex-1-dhcc w-0-dhcc text-33-dhcc font-size-16-dhcc ml-4 text-truncate">{{ taskInfo["subject"] }}</span>
        </template>
        <div :style="{ width: `${placeWidth}px`, height: '10px' }"></div>
        <!--三个操作按钮-->
        <div ref="btnView" class="d-flex align-items-center mr-4 am-btn-view" :class="{ 'am-btn-top': isSuctionTop }">
          <icon-button v-if="false" font-icon="#icon14px-shenpiye-dayin" v-print="printObj">打印</icon-button>
          <div @click="backingOut()"><icon-button font-icon="#icon14px-zhongzhi">返回</icon-button></div>
          <div @click="openCommuDialog = true" v-if="isShowCommuDialog"><icon-button font-icon="#icon14px-qianqushenpi">协作</icon-button></div>
          <!--          <div @click="revoke()" v-if="isShowRevoke"><icon-button font-icon="#icon14px-qianqushenpi">撤回</icon-button></div>-->
          <div @click="submit()" v-if="isShowSubmit"><icon-button font-icon="#icon14px-shenpiye-tijiao">提交</icon-button></div>
        </div>
      </div>
      <!--头部标题end-->
      <!--标签页-->
      <div class="d-flex px-4 am-tab-view" :class="{ 'am-tab-top': isSuctionTop }">
        <div class="d-flex cursor-pointer-dhcc mr-5 am-z1 position-relative">
          <div v-for="tab of tabData" v-bind:key="tab.index" class="text-80-dhcc am-tab-text" @click="tabClick(tab.index)" :class="{ 'am-tab-text-sel': activeIdx === tab.index }">{{ tab.text }}</div>
          <div class="am-tab-active-bar" :style="{ transform: `translateX(${activeIdx * (110 + 24)}px)` }"></div>
        </div>
      </div>
      <!--标签页end-->
      <div class="am-hmh-50" v-if="!isSuctionTop">&nbsp;</div>
    </div>
    <!--中间横向间隔-->
    <row-spacer />
    <!--固定的审批信息位置-->
    <div class="am-flow-info d-flex align-items-center hlh-40-dhcc" :class="{ 'am-content-top': isSuctionTop }">
      <span class="am-text-33 mr-3">流程编号：{{ flowApplyInfo.instBusid }}</span>
      <span class="am-text-33 ml-3" v-if="flowApplyInfo.instState === 'end'">流程已结束</span>
      <span class="am-text-33 ml-3 am-title-40" :title="flowApplyInfo.currentUser || ''" v-else>当前处理人：({{ flowApplyInfo.currentUser || "" }})</span>
      <span class="am-text-33 ml-3 am-title-40" v-if="flowApplyInfo.projectCode">项目编号：{{ flowApplyInfo.projectCode || "" }}</span>
      <div class="flex-grow-1"></div>
      <span class="am-text-80">{{ flowApplyInfo.startDept || "" }}<span class="mx-2">|</span>{{ founderUserInfo.userName }}<span class="mx-2">|</span>{{ founderUserInfo.createTime }}<span class="mx-1" />发起</span>
    </div>
    <!--下边内容区域-->
    <div class="am-content-view" ref="contentView">
      <div v-if="loadInfo" v-suction-top="onPageScroll" :class="{ 'in-animation': activeIdx === 0, 'out-animation': activeIdx !== 0 }">
        <approval-info :subject="taskInfo['subject']" id="printView" ref="approvalInfo" @listChange="listChange" @pathDataChange="pathDataChange" />
      </div>
      <div v-if="loadEnclosure" v-suction-top="onPageScroll" :class="{ 'in-animation': activeIdx === 1, 'out-animation': activeIdx !== 1 }">
        <approval-enclosure ref="approvalEnclosure" />
      </div>
      <div v-if="loadFlow" v-suction-top="onPageScroll" :class="{ 'in-animation': activeIdx === 2, 'out-animation': activeIdx !== 2 }">
        <approval-flow-chart :isEnd="flowApplyInfo.instState === 'end'" />
      </div>
    </div>
    <!--协作选择弹窗-->
    <el-dialog title="发起协作" :append-to-body="true" :visible.sync="openCommuDialog" width="50%">
      <collaboration-popup v-if="openCommuDialog" :parent="this" ref="collaborationPopup" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Prop, Watch } from "vue-property-decorator";
import Vue from "vue";
import Component from "vue-class-component";
import { TabData } from "@/model/TabData";
import { SuctionTop } from "@/directives/suction-top.directive";
import ApprovalEnclosure from "@/components/approval-process/ApprovalEnclosure.vue";
import IconButton from "@/views/IconButton.vue";
import Print from "vue-print-nb-z";
import ApprovalInfo from "@/components/approval-process/ApprovalInfo.vue";
import ApprovalFlowChart from "@/components/approval-process/ApprovalFlowChart.vue";
import RowSpacer from "@/views/RowSpacer.vue";
import { DataInput, DataOutput } from "@/model";
import flowProcessApi from "@/constants/api/ebtrust-project/flow-process.api";
import apiService from "@/services/api.service";
import { Code } from "@/constants/enum/code.enum";
import { approvalStore } from "@/store/approval.store";
import { Route } from "vue-router";
import CollaborationPopup from "@/components/approval-process/CollaborationPopup.vue";
import { Dialog } from "element-ui";

Vue.use(Print);
Vue.directive("suction-top", SuctionTop);
/**
 * @Description: 审批页主页
 * @author LiuBo
 * @date 2021/1/26
 * @time 11:25
 */
@Component({
  name: "ApprovalMain",
  components: {
    ApprovalFlowChart,
    ApprovalInfo,
    IconButton,
    ApprovalEnclosure,
    RowSpacer,
    CollaborationPopup,
    "el-dialog": Dialog
  },
  directives: { SuctionTop }
})
export default class ApprovalMain extends Vue {
  @Prop({ default: false }) collapse: boolean | undefined; // 是否水平折叠收起菜单
  isSuctionTop: boolean | undefined = false; // 是否吸顶
  activeIdx: number | undefined = 0; // 当前选择的标签页索引
  private maxTop = 20; // 吸顶的阈值(滚动超过多少像素就吸顶)
  placeWidth = 0; // 占位宽度
  tabData: TabData[] = [
    { index: 0, text: "审批信息" },
    { index: 1, text: "附件库" },
    { index: 2, text: "流程图" }
  ]; // 标签页数据
  loadInfo = false; // 加载审批信息页面
  loadEnclosure = false; // 加载附件库页面
  loadFlow = false; // 加载流程审批页面
  // 打印设置参数
  printObj = {
    id: "printView",
    popTitle: "审批单打印",
    callback: () => {
      this.afterPrint();
    }, // 打印之前的回调
    endCallback: () => {
      this.endPrint();
    } // 打印之后的回调
  };
  taskInfo: any = {}; // 查询出的数据实体
  founderUserInfo: any = {}; // 发起人信息
  flowApplyInfo: any = {}; // 流程实例表数据
  private approvalInfoComponent: any; // 申请信息页面实例
  private approvalEnclosureComponent: any; // 附件库
  private approvalPathComponent: any; // 审批路径页面实例
  private approvalOpinionInputComponent: any; // 事物处理
  buttonData: any; // 选中的按钮
  opinion: any; // 审批意见
  instId = ""; // 实例id
  taskId = ""; // 任务id
  flowState = ""; // 任务类型
  isShowSubmit = true;
  isShowRevoke = false;
  nextAuthors: any; // 下一节点办理人id集合
  userIds = ""; // 下一节点办理人id集合
  isApprovalDetails: any; // 是否详情展示
  source: any;
  private revokeTaskId: any; // 撤回所需的任务编号
  private revokeNodeId: any; // 撤回所需的节点编号
  private flowVars: any; // 流程变量
  openCommuDialog = false;
  isShowCommuDialog = false;

  //是否显示提交按钮
  /**
   * @Description: tab页点击事件
   * @author LiuBo
   * @date 2021/1/26
   * @time 12:01
   */
  tabClick(idx: number) {
    this.activeIdx = idx;
    setTimeout(() => {
      this.calcIsSuctionTop();
    }, 300);
    switch (this.activeIdx) {
      case 1:
        this.loadEnclosure = true;
        break;
      case 2:
        this.loadFlow = true;
        break;
    }
  }
  /**
   * @Description: 监听页面滚动事件
   * @author LiuBo
   * @date 2021/1/25
   * @time 16:26
   */
  onPageScroll(event: any) {
    // 向上滚动且大于maxTop
    if (event.scrollTop > this.maxTop && event.isScrollUp && !this.isSuctionTop) {
      this.isSuctionTop = true;
    }
    // 向下滚动且小于maxTop
    else if (event.scrollTop < this.maxTop && !event.isScrollUp && this.isSuctionTop) {
      this.isSuctionTop = false;
    }
  }
  /**
   * @Description: 页面切换时计算是否需要吸顶
   * @author LiuBo
   * @date 2019/6/20
   * @time 14:59
   */
  private calcIsSuctionTop() {
    const contentView: any = this.$refs.contentView;
    const children = contentView.children;
    let view;
    for (let i = 0; i < children.length; i++) {
      const len = children[i].classList.length;
      for (let j = 0; j < len; j++) {
        if (children[i].classList[j] === "in-animation") {
          view = children[i];
          break;
        }
      }
      if (view) {
        break;
      }
    }
    if (view) {
      this.isSuctionTop = view.scrollTop >= this.maxTop;
    }
  }
  /**
   * @Description: 打印前调用
   * @author LiuBo
   * @date 2021/2/3
   * @time 16:07
   */
  private afterPrint() {
    const approvalInfo: any = this.$refs.approvalInfo;
    const printTitle = approvalInfo.$refs.printTitle;
    const approvalPath = approvalInfo.$refs.approvalPath;
    printTitle.classList.remove("d-none"); // 显示打印标题
    printTitle.classList.add("d-block"); // 显示打印标题
    approvalPath.isShowOption = true; // 显示审批路径
    approvalInfo.isHiddenHandler = true; // 隐藏业务处理
  }
  /**
   * @Description: 打印结束后调用
   * @author LiuBo
   * @date 2021/2/3
   * @time 16:06
   */
  private endPrint() {
    const approvalInfo: any = this.$refs.approvalInfo;
    const printTitle = (this.$refs.approvalInfo as any).$refs.printTitle;
    printTitle.classList.remove("d-block"); // 显示打印标题
    printTitle.classList.add("d-none"); // 显示打印标题
    approvalInfo.isHiddenHandler = false; // 显示业务处理
  }
  // 初始化时执行的任务
  private init() {
    this.placeWidth = (this.$refs.btnView as any).clientWidth + 30;
    setTimeout(() => {
      this.loadInfo = true;
    });
  }
  /**初始化*/
  mounted(): void {
    this.init();
    this.nextTick();
    this.initData();
  }
  beforeDestroy() {
    // 删除缓存数据
    // approvalStore.removeFlowParameters(this.instId);
    // approvalStore.removeTaskInfoByInstId(this.instId);
  }

  @Watch("$route")
  onRouterChanged(to: Route, from: Route) {
    console.log("此为$route监听");
    const t = to.path.indexOf("/approval/approval-process") > -1;
    const f = from.path.indexOf("/approval/approval-process") > -1;
    if (t && f) {
      this.initData();
      this.nextTick();
    }
  }
  /**
   * @Description: 获取缓存数据
   * @author guoxuhui
   * @date 2021-03-12
   * @time 11:17
   */
  initData() {
    const instId: any = this.$route.query.instId;
    const flowParameters: any = approvalStore.getFlowParameters(instId);
    if (flowParameters) {
      this.instId = flowParameters.instId;
      this.taskId = flowParameters.taskId;
      this.flowState = flowParameters.state;
      this.isApprovalDetails = !!flowParameters.isApprovalDetails; // 是详情展示
      this.source = flowParameters.source; // 进入来源
    }
  }

  /**
   * @Description: 返回来源
   * @author GuoXuHui
   * @date 2021-05-10
   * @time 10:09
   */
  backingOut() {
    if (this.source) {
      this.closeTab();
      this.$router.push(this.source).then(value => {});
    } else {
      this.closeTab();
      this.$router.go(-1);
    }
  }
  revoke() {
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: this.instId,
        revokeTaskId: this.revokeTaskId,
        revokeNodeId: this.revokeNodeId
      }
    });
    this.$amLoading.open();
    apiService.general(flowProcessApi.approval.revokeInstance, undefined, dataInput).then((dataOutput: DataOutput<any>) => {
      this.$amLoading.close(this);
      if (dataOutput.code === Code.SUCCESS.code) {
        this.$message("撤回成功!");
        this.backingOut();
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }

  closeTab() {
    if (this.$breadcrumbNavService && this.$breadcrumbNavService.remove) {
      this.$breadcrumbNavService.remove(this.$route.path);
    }
  }
  /**
   * @Description: 仅在整个视图都渲染完成是才调用
   * @author guoxuhui
   * @date 2021-03-09
   * @time 14:54
   */
  nextTick() {
    this.$nextTick(() => {
      this.selectTaskInfo();
    });
  }
  /**
   * @Description: 查询任务详情
   * @author guoxuhui
   * @date 2021-03-08
   * @time 15:06
   */
  selectTaskInfo() {
    /*查询参数*/
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: this.instId,
        taskId: this.taskId
      }
    });
    let url: any;
    if (this.isApprovalDetails) {
      url = flowProcessApi.approval.selectTaskInfoDone;
    } else {
      if (this.flowState) {
        if (this.flowState === "COMMU") {
          url = flowProcessApi.approval.selectTaskInfoDone;
        } else {
          url = flowProcessApi.approval.selectTaskInfo;
        }
      } else {
        url = flowProcessApi.approval.selectTaskInfo;
      }
    }
    apiService.general(url, undefined, dataInput).then((dataOutput: DataOutput<any>) => {
      if (dataOutput.code === Code.SUCCESS.code) {
        if (dataOutput.data) {
          this.taskInfo = dataOutput.data;
          this.taskInfo.instId = this.instId;
          approvalStore.setTaskInfoByInstId(this.taskInfo);
          this.founderUserInfo = this.taskInfo.founderUserInfo;
          const flowApplyInfos: any[] = this.taskInfo.flowApplyInfos;
          if (flowApplyInfos && flowApplyInfos.length > 0) {
            this.flowApplyInfo = this.taskInfo.flowApplyInfos[0];
          }
          this.isShowCommuDialog = false;
          if (this.taskInfo.buttons && this.taskInfo.buttons.length > 0) {
            if (this.taskInfo.buttons.find((item: any) => item.btnId === "commu")) {
              this.isShowCommuDialog = true;
            }
          }
          this.approvalInfoComponent = this.$refs.approvalInfo;
          if (this.approvalInfoComponent) {
            this.approvalInfoComponent.showApplicationInfo = true;
          }
          this.approvalEnclosureComponent = this.$refs.approvalEnclosure;
          this.approvalPathComponent = this.approvalInfoComponent.$refs.approvalPath;
          this.approvalOpinionInputComponent = this.approvalInfoComponent.$refs.approvalOpinionInput;
          if (this.isApprovalDetails) {
            this.detailsPageProcess({});
          }
          if (this.approvalOpinionInputComponent.initData && !this.isApprovalDetails) {
            if (this.flowState) {
              this.approvalOpinionInputComponent.initOtherData(this.taskInfo, this.instId, this.taskId, this.flowState);
            } else {
              this.approvalOpinionInputComponent.initData(this.taskInfo, this.instId, this.taskId);
            }
          }
          if (this.approvalPathComponent.initData && !this.isApprovalDetails) {
            this.approvalPathComponent.initData(this.taskInfo, this.instId, this.taskId);
          }
          // 节点参数
          if (this.taskInfo.formValue) {
            const parse = JSON.parse(this.taskInfo.formValue);
            const formVar = parse.baseUrl;
            // 前缀规则
            let PathPrefix = ".";
            const path = this.$route.path;
            const strings: string[] = path.split("/");
            const number1 = strings.findIndex(value => value === "approval-process");
            let removePuth = "";
            if (number1 != strings.length - 1) {
              PathPrefix = "..";
              removePuth = path;
            }
            this.$router
              .replace({ path: PathPrefix + formVar, append: true, query: { instId: this.instId } })
              .then(value => {
                if (this.$breadcrumbNavService && this.$breadcrumbNavService.remove) {
                  const path = this.$route.path.substring(0, this.$route.path.lastIndexOf("/"));
                  this.$breadcrumbNavService.remove(path);
                  if (removePuth !== this.$route.path) {
                    this.$breadcrumbNavService.remove(removePuth);
                  }
                }
                // 在此刻向注入组件初始化参数
                const formUrlComponent = this.approvalInfoComponent.$refs.formUrl;
                const busUrlComponent = this.approvalInfoComponent.$refs.busUrl;
              })
              .catch(err => err);
          }
        }
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }

  /**
   * @Description: 提交
   * @author guoxuhui
   * @date 2021-03-09
   * @time 16:01
   */
  submit() {
    const promise = Promise.resolve();
    promise
      .then(() => this.beforeSave())
      .then(() => this.dataVerify())
      .then(() => this.popUps())
      .then(() => this.afterSave())
      .then(() => this.submitData())
      .catch(data => {
        if (data && data.msg) {
          this.$message(data.msg);
        }
      })
      .finally(() => {});
  }
  /**
   * @Description: 文件数组改变事件
   * @author GuoXuHui
   * @date 2021-04-08
   * @time 14:58
   */
  listChange(listData: any[]) {
    // 数组文件改变时如果附件库刷新过则再次刷新附件库
    if (this.loadEnclosure) {
      this.loadEnclosure = !this.loadEnclosure;
    }
  }
  pathDataChange(pathData: any) {
    // 数组文件改变时判断是否显示撤回按钮
    if (this.isApprovalDetails && pathData.bpmTaskOpinionList && pathData.bpmTaskOpinionList.length === 3) {
      this.revokeTaskId = pathData.bpmTaskOpinionList[2].parentTaskId;
      this.revokeNodeId = pathData.bpmTaskOpinionList[1].taskKey;
      this.isShowRevoke = true;
    }
  }
  /**
   * @Description: 确认弹窗
   * @author guoxuhui
   * @date 2021-04-01
   * @time 11:13
   */
  private popUps() {
    return new Promise((resolve, reject) => {
      return this.$amConfirm(
        this.getSubmitText(this.buttonData.btnId),
        "提示",
        () => {
          return resolve();
        },
        () => {
          return reject({ msg: "取消提交" });
        }
      );
    });
  }
  /**
   * @Description: 提交前的参数校验方法
   * @author guoxuhui
   * @date 2021-03-10
   * @time 09:51
   */
  private beforeSave() {
    const formUrlComponent = this.approvalInfoComponent.$refs.formUrl;
    const busUrlComponent = this.approvalInfoComponent.$refs.busUrl;
    const beforeSaveData = {
      a: "1"
    };
    if (formUrlComponent && formUrlComponent.beforeSave) {
      return new Promise((resolve, reject) => {
        formUrlComponent.beforeSave(beforeSaveData, resolve, reject);
      });
    } else if (busUrlComponent && busUrlComponent.beforeSave) {
      return new Promise((resolve, reject) => {
        busUrlComponent.beforeSave(beforeSaveData, resolve, reject);
      });
    } else {
      Promise.resolve();
    }
  }

  /**
   * @Description: 流程操作参数校验并赋值
   * @author guoxuhui
   * @date 2021-03-10
   * @time 09:51
   */
  private dataVerify() {
    // 数据校验
    return new Promise((resolve, reject) => {
      this.buttonData = this.approvalOpinionInputComponent.buttonData;
      if (!this.buttonData || !this.buttonData.btnId) {
        // 请输入选择审批节点
        return reject({ msg: "请选择审批意见" });
      }

      // 人员信息暂不校验
      const userInfo: any[] = this.approvalOpinionInputComponent.userInfo;
      if (!userInfo.length && this.approvalOpinionInputComponent.isShowUserSelect) {
        return reject({ msg: "请选择审批人员" });
      }

      this.opinion = this.approvalOpinionInputComponent.editor.txt.html();
      if (!this.opinion) {
        // 请输入审批意见
        return reject({ msg: "请填写意见描述" });
      } else if (this.opinion.trim && !this.opinion.trim()) {
        return reject({ msg: "填写的意见描述不能为空" });
      } else if (this.opinion.length > 500) {
        return reject({ msg: "填写的意见描述不能超出500字" });
      }
      const userOptions = this.approvalOpinionInputComponent.userOptions;
      if (userInfo && userInfo.length > 0 && userOptions && userOptions.length > 0) {
        // 组装成的类型实例 [{nodeId:"userTask1",executors:[{id:"",name:""},..]}]
        this.nextAuthors = [];
        this.userIds = "";
        userInfo.forEach((value: any) => {
          const find = userOptions.find((value1: any) => value1.id === value);
          if (find) {
            this.userIds = this.userIds + find.id;
            this.userIds = this.userIds + ",";
            this.nextAuthors.push({
              id: find.id,
              // id: find.code,
              name: find.name
            });
          }
        });
        this.userIds = this.userIds.substring(0, this.userIds.length - 1);
      } else {
        this.nextAuthors = [];
      }
      // 获取流程最新参数
      this.obtainFlowVar();
      resolve();
    });
  }

  /**
   * @Description: 获取流程最新参数
   * @author GuoXuHui
   * @date 2021-07-06
   * @time 19:10
   */
  obtainFlowVar() {
    const formUrlComponent = this.approvalInfoComponent.$refs.formUrl;
    const busUrlComponent = this.approvalInfoComponent.$refs.busUrl;
    if (formUrlComponent && formUrlComponent.flowVars) {
      this.flowVars = formUrlComponent.flowVars;
    } else if (busUrlComponent && busUrlComponent.flowVars) {
      this.flowVars = formUrlComponent.flowVars;
    }
  }
  /**
   * @Description: 提交后的参数校验方法
   * @author guoxuhui
   * @date 2021-03-10
   * @time 09:51
   */
  private afterSave() {
    const formUrlComponent = this.approvalInfoComponent.$refs.formUrl;
    const busUrlComponent = this.approvalInfoComponent.$refs.busUrl;
    const afterSaveData = {
      buttonData: this.buttonData
    };
    if (formUrlComponent && formUrlComponent.afterSave) {
      return new Promise((resolve, reject) => {
        formUrlComponent.afterSave(afterSaveData, resolve, reject);
      });
    } else if (busUrlComponent && busUrlComponent.afterSave) {
      return new Promise((resolve, reject) => {
        busUrlComponent.afterSave(afterSaveData, resolve, reject);
      });
    } else {
      Promise.resolve();
    }
  }

  /**
   * @Description: 协作刷新路径
   * @author GuoXuHui
   * @date 2021-07-14
   * @time 16:16
   */
  collaborationSent() {
    if (this.approvalPathComponent.initData && !this.isApprovalDetails) {
      this.approvalPathComponent.initData(this.taskInfo, this.instId, this.taskId);
    }
  }
  /**
   * @Description: 调用注入组件的刷新参数方法
   * @author guoxuhui
   * @date 2021-03-14
   * @time 16:13
   */
  private refreshParameter(status: string) {
    const formUrlComponent = this.approvalInfoComponent.$refs.formUrl;
    const busUrlComponent = this.approvalInfoComponent.$refs.busUrl;
    const afterSaveData = {
      status: status
    };
    if (formUrlComponent && formUrlComponent.refreshParameter) {
      formUrlComponent.refreshParameter(afterSaveData);
    } else if (busUrlComponent && busUrlComponent.refreshParameter) {
      busUrlComponent.refreshParameter(afterSaveData);
      // eslint-disable-next-line no-empty
    } else {
    }
  }
  /**
   * @Description: 提交参数
   * @author guoxuhui
   * @date 2021-03-12
   * @time 10:39
   */
  private submitData() {
    return new Promise((resolve, reject) => {
      switch (this.buttonData.btnId) {
        case "agree":
          return this.agreeOperation(resolve, reject);
        case "reject":
          return this.rejectOperation(resolve, reject);
        case "backToStart":
          return this.backToStartOperation(resolve, reject);
        case "stop":
          return this.stopOperation(resolve, reject);
        case "commu": // 发送征询
          return this.commuOperation(resolve, reject);
        case "nextcommu": // 回复征询
          return this.nextcommuOperation(resolve, reject);
        default:
          return this.defaultOperation(resolve, reject);
      }
    });
  }
  /**
   * @Description: 根据按钮获取文本
   * @author guoxuhui
   * @date 2019/9/29
   * @time 16:40
   * @param btnId
   */
  private getSubmitText(btnId: string): string {
    let btnIdStr = "";
    switch (btnId) {
      case "agree":
        btnIdStr = "是否确认 提交 操作？";
        break;
      case "commu":
        btnIdStr = "是否发送协作请求？(发起协作不会影响流程正常流转并且当前当前流程还在当前节点)";
        break;
      default:
        btnIdStr = "是否确认 提交 操作？";
    }
    return btnIdStr;
  }

  /**
   * @Description: 默认选项
   * @author guoxuhui
   * @date 2021-03-12
   * @time 10:39
   */
  private defaultOperation(resolve: (value?: any) => void, reject: (reason?: any) => void) {
    this.$message("暂不支持");
    return reject();
  }

  /**
   * @Description: 提交选项
   * @author guoxuhui
   * @date 2021-03-12
   * @time 10:40
   */
  private agreeOperation(resolve: (value?: any) => void, reject: (reason?: any) => void) {
    const nextAuthorsStr = [
      {
        nodeId: this.buttonData.nodeId,
        executors: this.nextAuthors || []
      }
    ];
    const s = JSON.stringify(nextAuthorsStr);
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: this.instId,
        taskId: this.taskId,
        nodeId: this.buttonData.nodeId,
        actionType: this.buttonData.btnId,
        opinion: this.opinion,
        nextAuthorsStr: s,
        flowVars: this.flowVars
      }
    });
    this.mostTypeNodeOperation(dataInput, (dataOutput: DataOutput<any>) => {
      if (dataOutput.code === Code.SUCCESS.code) {
        this.$message("操作成功!");
        this.detailsPageProcess(dataOutput.data);
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }
  /**
   * @Description: 驳回
   * @author guoxuhui
   * @date 2021-03-12
   * @time 10:40
   */
  private rejectOperation(resolve: (value?: any) => void, reject: (reason?: any) => void) {
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: this.instId,
        taskId: this.taskId,
        actionType: this.buttonData.btnId,
        opinion: this.opinion
      }
    });
    this.mostTypeNodeOperation(dataInput, (dataOutput: DataOutput<any>) => {
      if (dataOutput.code === Code.SUCCESS.code) {
        this.$message("操作成功!");
        this.detailsPageProcess(dataOutput.data);
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }
  /**
   * @Description: 终止
   * @author guoxuhui
   * @date 2021-03-12
   * @time 10:40
   */
  private stopOperation(resolve: (value?: any) => void, reject: (reason?: any) => void) {
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: this.instId,
        taskId: this.taskId,
        actionType: this.buttonData.btnId,
        opinion: this.opinion
      }
    });
    this.mostTypeNodeOperation(dataInput, (dataOutput: DataOutput<any>) => {
      if (dataOutput.code === Code.SUCCESS.code) {
        this.$message("操作成功!");
        // this.detailsPageProcess(dataOutput.data);
        this.backingOut();
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }

  /**
   * @Description: 协作反馈
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 17:40
   */
  commuOperation(resolve: (value?: any) => void, reject: (reason?: any) => void) {
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: this.instId,
        taskId: this.taskId,
        defId: this.taskInfo.defId || this.taskInfo.procDefId,
        opinion: this.opinion,
        userId: this.userIds
      }
    });
    this.$amLoading.open();
    apiService.general(flowProcessApi.approval.communicate, undefined, dataInput).then((dataOutput: DataOutput<any>) => {
      this.$amLoading.close(this);
      if (dataOutput.code === Code.SUCCESS.code) {
        if (dataOutput.data) {
          const parse = JSON.parse(dataOutput.data);
          if (parse.state) {
            this.$message("协作消息已发送，请耐心等待反馈!");
            this.backingOut();
          } else {
            this.$message(parse.message);
          }
        }
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }

  /**
   * @Description: 回复征询
   * @author GuoXuHui
   * @date 2021-07-13
   * @time 16:33
   */
  nextcommuOperation(resolve: (value?: any) => void, reject: (reason?: any) => void) {
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: this.instId,
        taskId: this.taskId,
        opinion: this.opinion
      }
    });
    this.$amLoading.open();
    apiService.general(flowProcessApi.approval.nextcommunicate, undefined, dataInput).then((dataOutput: DataOutput<any>) => {
      this.$amLoading.close(this);
      if (dataOutput.code === Code.SUCCESS.code) {
        if (dataOutput.data) {
          const parse = JSON.parse(dataOutput.data);
          if (parse.state) {
            this.$message("反馈成功！");
            this.backingOut();
          } else {
            this.$message(parse.message);
          }
        }
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }
  /**
   * @Description: 驳回发起人
   * @author guoxuhui
   * @date 2021-03-12
   * @time 10:40
   */
  private backToStartOperation(resolve: (value?: any) => void, reject: (reason?: any) => void) {
    const nodeId = this.approvalPathComponent.approveLogs[1].nodeId || "UserTask1";
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: this.instId,
        taskId: this.taskId,
        actionType: this.buttonData.btnId,
        backToStartType: this.buttonData.type,
        opinion: this.opinion
        // nextNode: {
        //   nodeId: nodeId
        // }
      }
    });
    this.mostTypeNodeOperation(dataInput, (dataOutput: DataOutput<any>) => {
      if (dataOutput.code === Code.SUCCESS.code) {
        this.$message("操作成功!");
        this.detailsPageProcess(dataOutput.data);
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }
  /**
   * @Description: 跳转到已办
   * @author guoxuhui
   * @date 2021-03-14
   * @time 16:09
   */
  private detailsPageProcess(data: any) {
    // 隐藏事务处理部分
    this.approvalInfoComponent.isShowHandler = false;
    //隐藏提交按钮
    this.isShowSubmit = false;
    // 刷新审批路径
    this.approvalPathComponent.initData({}, this.instId, this.taskId);
    // 如果流程操作后，刷新流程图页面从新刷新
    if (this.loadFlow) {
      this.loadFlow = !this.loadFlow;
    }
    // 触发刷新参数方法
    this.$nextTick(() => {
      this.refreshParameter("jumpDone");
    });
    if (data.currentUser) {
      this.flowApplyInfo.currentUser = data.currentUser;
    }
    if (data.instState) {
      this.flowApplyInfo.instState = data.instState;
    }
    if (data.trackId) {
      if (data.trackId.indexOf(";") > -1) {
        this.taskId = data.trackId.split(";")[0];
      } else {
        this.taskId = data.trackId;
      }
      approvalStore.setFlowParameters({
        instId: data.instId,
        taskId: data.trackId,
        isApprovalDetails: true
      });
    } else {
      approvalStore.setFlowParameters({
        instId: data.instId,
        taskId: "",
        isApprovalDetails: true
      });
    }
  }
  /**
   * @Description: 流程操作接口
   * @author guoxuhui
   * @date 2021-03-12
   * @time 10:40
   */
  private mostTypeNodeOperation(dataInput: any, callback: Function) {
    this.$amLoading.open();
    apiService.general(flowProcessApi.approval.mostTypeNodeOperation, undefined, dataInput).then((dataOutput: DataOutput<any>) => {
      this.$amLoading.close(this);
      callback(dataOutput);
    });
  }
}
</script>

<style scoped lang="scss">
$tabH: 50px;
$anT: 0.3s;
/**整体样式*/
.ec-main-view {
  width: 100%;
  height: 100%;
  padding: 10px 15px 0 15px;
  display: flex;
  flex-direction: column;
  background: #e9eaf2;
  overflow: hidden;
  .ec-top-view {
    background-color: #ffffff;
    position: relative;
  }
  .am-z1 {
    z-index: 1;
  }
  .am-flow-info {
    background: #ffffff;
    border-bottom: 1px solid #e4e4e4;
    padding: 0 1.5rem;
    & > span {
      font-size: 12px;
    }
    .am-text-80 {
      color: #808080;
    }
    .am-text-33 {
      color: #333333;
    }
  }
  /**内容视图*/
  .am-content-view {
    width: 100%;
    flex: 1;
    height: 0;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    & > div {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
  /**标签页*/
  .am-tab-view {
    width: calc(100vw - 250px);
    height: $tabH;
    line-height: $tabH;
    background: #fff;
    position: absolute;
    top: 64px;
    transition: top $anT;
  }
  /**标签页的样式*/
  .am-tab-text {
    width: 110px;
    height: 100%;
    margin-right: 1.5em;
    text-align: center;
    font-size: 16px;
    &:active {
      opacity: 0.7;
    }
  }
  /**标签页的字体颜色*/
  .am-tab-text-sel {
    color: #2858d6 !important;
    font-weight: 500;
  }
  /**选中后的下部分蓝色条*/
  .am-tab-active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 110px;
    height: 2px;
    background-color: #2858d6;
    z-index: 200;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    list-style: none;
  }
  /**高度行高64*/
  .am-hlh-64 {
    height: 64px;
    line-height: 64px;
    transition: height $anT;
  }
  /**高度最小高50*/
  .am-hmh-50 {
    height: $tabH;
    min-height: $tabH;
    transition: height $anT;
  }
  /**右上角按钮所在视图*/
  .am-btn-view {
    width: auto;
    height: $tabH;
    position: absolute;
    right: 0;
    transition: top $anT;
    & > div {
      margin-left: 1.2em;
    }
  }
  /**标签页吸顶相关样式*/
  .am-tab-top {
    top: 0;
    transition: $anT;
    border-bottom: none;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px;
  }
  /**按钮吸顶的样式*/
  .am-btn-top {
    top: 0;
    z-index: 99;
    transition: top $anT;
  }
  /**标题吸顶的样式*/
  .am-title-top {
    height: 0;
    overflow: hidden;
    transition: $anT;
  }
  /**吸顶时内容的样式*/
  .am-content-top {
    margin-top: 52px;
  }
  .am-clr-red {
    color: #e63c38;
  }
  .am-title-40 {
    max-width: 30vw;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -icab-text-overflow: ellipsis;
    -khtml-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
  }
}
</style>
