<template>
  <el-container :class="defKey?'singleContainer':'container'">


    <el-header class="task_header notprint" height="40px">
      <div class="flex container__header">
        <h3 ref="flowSubject">{{ subject }}</h3>
        <div class="container__header-btngroup">
          <el-button type="text" icon="el-icon-document-copy" v-if="isLook" @click="copeInst()">复制</el-button>
          <el-button type="text" icon="icon-folder-add" v-if="!taskId && type != 'read' && !myReadType"
            @click="taskUrgent">催办</el-button>
          <el-button type="text" icon="el-icon-search" v-if="type != 'read' && !myReadType" @click="urgentRecord">
            催办记录</el-button>
          <el-button type="text" icon="el-icon-s-unfold" v-if="showModifyRecord" @click="openModifyRecord">修改记录
          </el-button>
          <el-button type="text" icon="icon-trace" @click="taskFollow">跟踪</el-button>
          <el-button type="text" icon="icon-print" @click="showPrint">打印</el-button>
          <el-button type="text" icon="icon-communication" @click="taskToCommu">沟通</el-button>
          <el-button type="text" icon="icon-folder" @click="taskToCopyTo">传阅</el-button>
          <el-button type="text" icon="icon-flow1" @click="taskImage">流程图</el-button>
          <el-button type="text" icon="icon-info" @click="relatedInformation">相关信息</el-button>
          <el-button type="text" icon="icon-info" @click="processRecordDialog">处理记录</el-button>
        </div>
      </div>
    </el-header>
    <div class="container__content" ref="print">
      <FlowAction ref="flowAction" v-if="type != 'doneList'" :instId="procInstId" :type="type" :taskId="taskId"
        :task_state="task_state" :execId="execId" :defId="defId" :status="status" :tasks="tasks" :readId="readId"
        :myReadType="myReadType" :readDoneId="readDoneId" :choiceExcutor="choiceExcutor" :jumpType="jumpType"
        :instStatus="instStatus" :leaderId="leaderId" :approvalArea="approvalArea" :referOpinion="referOpinion"
        :nodeType="nodeType" :nodeId="nodeId" :isLook="isLook" :sponsorRevoke="sponsorRevoke"
                  :opinionField="opinionField" :appendOpinion="appendOpinion" :signatureField="signatureField"
                  :signatureCover="signatureCover"
        :secretFree="secretFree" :defKey="flowDefKey" />
      <DoneAction v-if="type == 'doneList'" ref="doneAction" :instId="procInstId" :type="type" :taskId="taskId"
        :defId="defId" :status="status" :choiceExcutor="choiceExcutor" :jumpType="jumpType" :instStatus="instStatus"
        :leaderId="leaderId" />
      <!-- <ProcessRecord :instId="procInstId"/> -->
    </div>

    <!-- 发起沟通 -->
    <TaskToCommu ref="taskToCommu" :instId="procInstId" :defId="defId" />
    <!-- 跟踪设置 -->
    <TaskFollow ref="taskFollow" :instId="procInstId" :defId="defId" />
    <!-- 流程图 -->
    <TaskImage ref="taskImage" :bpmnInstId="bpmnInstId" :instId="procInstId" />
    <!-- 相关信息 -->
    <RelatedInformation ref="relatedInformation" :instId="procInstId" />
    <!-- 流程传阅-->
    <TaskToCopyTo ref="taskToCopyTo" :taskId="copyTaskId" :instId="procInstId" />
    <!-- 流程催办 -->
    <TaskUrgent ref="taskUrgent" :instId="procInstId" :defId="defId" :subject="subject" />
    <!-- 催办记录 -->
    <UrgentRecord ref="urgentRecord" :promoterId="promoterId" :instId="procInstId" />
    <!-- 修改记录 -->
    <ModifyRecord ref="modifyRecord" :instId="procInstId" />
    <FlowPrint ref="flowPrint" :formKey="formKey" :instId="procInstId" @printWordTemplate="printWordTemplate"
      @previewWordTemplate="previewWordTemplate" @printHtml="printHtml" />
    <!-- 处理记录 -->
    <ProcessRecordDialog ref="processRecordDialog" :instId="procInstId" :taskId="taskId" :referOpinion="referOpinion"
      :nodeType="nodeType" :defId="defId" :nodeId="nodeId" />
    <!-- word预览弹出框 -->
    <el-dialog title="word预览" :visible.sync="previewWordDialog" width="90%">
      <iframe :src="previewWordPdfSrc" name="previewWord" style="width:100%;border:0;" align="middle"
        :height="previewWordHeight"></iframe>
    </el-dialog>
  </el-container>
</template>

<script>
import FormContent from "@/components/flow/formContent.vue";
import RelatedInformation from "@/components/flow/relatedInformation.vue";
import FlowAction from "@/components/flow/taskFlowComponents/flowAction.vue";
import DoneAction from "@/components/flow/taskFlowComponents/doneAction.vue";
import ProcessRecord from "@/components/flow/processRecord.vue";
import TaskToCopyTo from "@/components/flow/task/taskToCopyTo.vue";
import TaskToCommu from "@/components/flow/task/taskToCommu.vue";
import TaskFollow from "@/components/flow/task/taskFollow.vue";
import TaskImage from "@/components/flow/task/taskImage.vue";
import UrgentRecord from "@/components/flow/urgentRecord.vue";
import ModifyRecord from "@/components/flow/modifyRecord.vue";
import TaskUrgent from "@/components/flow/task/taskUrgent.vue";
import FlowPrint from "@/components/flow/flowPrint.vue";
import ProcessRecordDialog from "@/components/flow/processRecordDialog.vue";
import req from "@/request.js";
import utils from "@/utils.js";
import { Loading } from "element-ui";
import { mapState, mapActions } from "vuex";
import watermark from "@/watermark.js";

export default {
  name: "task",
  components: {
    FormContent,
    FlowAction,
    ProcessRecord,
    TaskToCommu,
    TaskFollow,
    TaskImage,
    RelatedInformation,
    TaskToCopyTo,
    UrgentRecord,
    ModifyRecord,
    TaskUrgent,
    DoneAction,
    FlowPrint,
    ProcessRecordDialog,
  },
  props: [
    "task_state",
    "instId",
    "type",
    "taskId",
    "readId",
    "leaderId",
    "readDoneId",
    "myReadType",
    "noSingle",
    "defKey"
  ],
  data() {
    return {
      sponsorRevoke: false, //允许发起人撤回（默认不勾选）
      isLook: false,
      tasks: {}, //任务详情
      procInstId: this.instId,
      copyTaskId: this.taskId,
      defId: "",
      bpmnInstId: "",
      subject: "",
      status: "",
      instStatus: "",
      choiceExcutor: "",
      show: true,
      jumpType: "",
      promoterId: "",
      execId: "",
      selectNodeId: "",
      approvalArea: "", //审批区域显示的内容
      referOpinion: true, //允许参考意见 (选择否，则审批时不允许参考同环节其他会签人员的意见)
      nodeType: "", //当前任务类型
      nodeId: "", //当前任务节点
      showModifyRecord: false, //是否显示表单修改记录
      formKey: "",
      opinionField: "", //审批意见反填字段
      appendOpinion: "", //是否覆盖审批意见
      signatureField: "", //自动签章字段
      signatureCover: false, //自动签章是否覆盖
      secretFree: false, //自动签章时是否免密
      previewWordDialog: false,
      previewWordHeight: 800,
      previewWordPdfSrc: "",
      flowDefKey:""
    };
  },
  mounted() {
    this.previewWordHeight = document.documentElement.clientHeight - 80;
  },
  methods: {
    //复制流程
    copeInst() {
      this.$confirm(
        "此操作将把当前实例数据复制到新流程待启动,是否继续?",
        "提示",
        {
          confirmButtonText: "继续",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$router.push("/agentStart/" + this.defId + "/0/" + this.instId);
        })
        .catch(() => { });
    },
    //流程催办
    taskUrgent() {
      this.$store.dispatch("storeProcess/isEnd", this.procInstId).then(() => {
        this.$refs.taskUrgent.handleClose(); //父组件调用子组件方法
      });
    },
    //催办记录
    urgentRecord() {
      this.$refs.urgentRecord.handleClose(); //父组件调用子组件方法
    },
    //表单修改记录
    openModifyRecord() {
      this.$refs.modifyRecord.handleClose(); //父组件调用子组件方法
    },
    //流程传阅
    taskToCopyTo() {
      if (this.type && this.type == "doneList") {
        this.selectNodeId = this.$refs.doneAction.getSelectNodeId();
      }
      this.$refs.taskToCopyTo.handleClose(this.selectNodeId, this.copyTaskId); //父组件调用子组件方法
    },
    //发起沟通
    taskToCommu() {
      this.$store.dispatch("storeProcess/isEnd", this.procInstId).then(() => {
        this.$refs.taskToCommu.handleClose(); //父组件调用子组件方法
      });
    },
    //跟踪设置
    taskFollow() {
      this.$store.dispatch("storeProcess/isEnd", this.procInstId).then(() => {
        this.$refs.taskFollow.handleOpen(); //父组件调用子组件方法
      });
    },
    //流程图
    taskImage() {
      this.$refs.taskImage.handleOpen(); //父组件调用子组件方法
    },
    //相关信息
    relatedInformation() {
      this.$refs.relatedInformation.handleClose(); //父组件调用子组件方法
    },
    //处理记录信息
    processRecordDialog() {
      this.$refs.processRecordDialog.handleClose(); //父组件调用子组件方法
    },
    //相关信息
    showPrint() {
      let this_ = this;
      if (!this.formKey || this.formKey == "") {
        if (!this.nodeId) {
          this.nodeId = "";
        }
        var url =
          "${bpmRunTime}/runtime/instance/v1/printBoAndFormKey?defId=" +
          this.defId +
          "&nodeId=" +
          this.nodeId +
          "&procInstId=" +
          this.procInstId;
        req.get(url).then((res) => {
          if (res.data) {
            this.formKey = res.data.formKey;
            let param = {
              pageBean: { page: 1, pageSize: 20, total: 0 },
              querys: [{ group: "defaultQueryGroup", operation: "EQUAL", relation: "AND", property: "formKey", value: this.formKey }]
            };
            req.post(req.getContext().form + "/form/printTemplate/v1/getPrintList", param).then(response => {
              if (response.data.rows && response.data.rows.length > 0) {
                this.$refs.flowPrint.handleOpen(); //父组件调用子组件方法
              } else {
                this_.printHtml();
              }
            });
          }
        });
      } else {
        let param = {
          pageBean: { page: 1, pageSize: 20, total: 0 },
          querys: [{ group: "defaultQueryGroup", operation: "EQUAL", relation: "AND", property: "formKey", value: this.formKey }]
        };
        req.post(req.getContext().form + "/form/printTemplate/v1/getPrintList", param).then(response => {
          if (response.data.rows && response.data.rows.length > 0) {
            this.$refs.flowPrint.handleOpen(); //父组件调用子组件方法
          } else {
            this_.printHtml();
          }
        });
      }
    },
    //未设置word套打模板，直接调用打印
    printHtml(data) {
      if (this.type != "doneList") {
        this.$refs.flowAction.hiddenOpertion();
      } else {
        this.$refs.doneAction.hiddenOpertion();
      }

      setTimeout(() => {
        document.getElementsByTagName('body')[0].style.zoom = 0.8;
        window.print();
        utils.reload();
        document.getElementsByTagName('body')[0].style.zoom = 1;
      }, 500);
    },
    previewWordTemplate(data) {
      if (!data) {
        this.$message({
          message: "请选择打印模板",
          type: "warning",
        });
        return false;
      }
      if (data && data.printType == "form") {
        this.$message({
          message: "请选择word套打模板",
          type: "warning",
        });
        return false;
      }
      Loading.service("表单打印中");
      var url =
        "${form}/form/printTemplate/v1/wordPrint?id=" +
        data.id +
        "&defId=" +
        this.defId +
        "&nodeId=" +
        this.nodeId +
        "&procInstId=" +
        this.procInstId;
      req.get(url).then((res) => {
        let loadingInstance = Loading.service("表单打印中");
        if (!res.data.state) {
          this.$message({
            message: res.data.message,
            type: "warning",
          });
          this.$nextTick(() => {
            // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
          });
        } else {
          let url =
            window.context.portal +
            "/file/onlinePreviewController/v1/onlinePreview?fileId=" +
            res.data.value;
          this.$http.get(url).then((resp) => {
            let data = resp.data;
            if (data.result == "error") {
              Message.error("附件不存在");
            } else {
              req.get(window.context.portal + data.pdfUrl, 'arraybuffer').then(response => {
                let type = response.headers['content-type'];
                if (type) {
                  this.previewWordPdfSrc = window.URL.createObjectURL(new Blob([response.data], { type: type }));
                } else {
                  this.previewWordPdfSrc = window.URL.createObjectURL(new Blob([response.data]));
                }
                this.previewWordDialog = true;
              });
              Loading.service("表单打印中").close();
            }
          });
        }
      });
    },
    printWordTemplate(data) {
      if (!data) {
        this.$message({
          message: "请选择打印模板",
          type: "warning",
        });
        return false;
      }
      if (data && data.printType == "form") {
        this.$message({
          message: "请选择word套打模板",
          type: "warning",
        });
        return false;
      }
      Loading.service("表单打印中");
      var url =
        "${form}/form/printTemplate/v1/wordPrint?id=" +
        data.id +
        "&defId=" +
        this.defId +
        "&nodeId=" +
        this.nodeId +
        "&procInstId=" +
        this.procInstId;
      req.get(url).then((res) => {
        let loadingInstance = Loading.service("表单打印中");
        if (!res.data.state) {
          this.$message({
            message: res.data.message,
            type: "warning",
          });
          this.$nextTick(() => {
            // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
          });
        } else {
          req
            .download(
              "${portal}/system/file/v1/downloadFile?fileId=" + res.data.value
            )
            .then((r) => {
              this.$nextTick(() => {
                // 以服务的方式调用的 Loading 需要异步关闭
                loadingInstance.close();
              });
            });
        }
      });
    },
  },
  created() {
    //不是待办进来
    if (!this.taskId && this.type != "read" && !this.myReadType) {
      //是否是查看实例页面
      this.isLook = true;
    }
    window.agentLeaderId = this.leaderId;
    let this_ = this;
    if (this.instId == undefined) {
      this.$store
        .dispatch("storeProcess/getNotice", this.taskId)
        .then((tasks) => {
          // todo nodeProperties.choiceExcutor;
          this_.tasks = tasks;
          this_.procInstId = tasks.bpmTask.procInstId;
          this_.defId = tasks.bpmTask.procDefId;
          this_.bpmnInstId = tasks.bpmTask.bpmnInstId;
          this_.subject = tasks.bpmTask.subject;
          this_.status = tasks.bpmTask.status;
          this_.execId = tasks.bpmTask.execId;
          this_.instStatus = tasks.bpmTask.instStatus;
          this_.flowDefKey = tasks.bpmTask.procDefKey;
          if (tasks.curNodeDef && tasks.curNodeDef.nodeProperties) {
            this.nodeType = tasks.curNodeDef.type;
            this.nodeId = tasks.curNodeDef.nodeId;
            let nodeProperties =
              tasks.curNodeDef.nodeProperties[0] ||
              tasks.curNodeDef.localProperties;
            this.choiceExcutor = nodeProperties.choiceExcutor;
            this.jumpType = nodeProperties.jumpType;
            this.approvalArea = nodeProperties.approvalArea;
            this.referOpinion = nodeProperties.referOpinion;
            this.opinionField = nodeProperties.opinionField;
            this.signatureField = nodeProperties.signatureField?nodeProperties.signatureField:'';
            this.signatureCover = nodeProperties.signatureCover?nodeProperties.signatureCover:false;
            this.secretFree = nodeProperties.secretFree?nodeProperties.secretFree:false;
            this.appendOpinion = nodeProperties.appendOpinion;
          }
          //是否显示表单修改记录
          if (tasks.showModifyRecord) {
            this_.showModifyRecord = true;
          }
          //表单formKey
          this_.formKey = tasks.formKey;
          if (!this.bpmnInstId && this.status != "COMMU") {
            this.$store.dispatch("storeProcess/noticeTurnDode", this.taskId); //知会任务待办转已办
          }
        });
      this.$store.dispatch("storeProcess/addReadRecord", this.taskId); //添加阅读记录
    } else {

      //根据实例id获取实例对象
      this.$store
        .dispatch("storeProcess/getInstanceByInstId", this.instId)
        .then((insts) => {
          this.approvalArea = "processRecord";
          this.defId = insts.procDefId;
          this.bpmnInstId = insts.bpmnInstId;
          this.subject = insts.subject;
          this.instStatus = insts.status;
          //是否显示表单修改记录
          if (insts.showModifyRecord) {
            this.showModifyRecord = true;
          }
          //表单formKey
          this.formKey = insts.bpmFormKey;

          //我的请求列表页面进来的
          if (this.type == "request") {
            //根据流程实例Id获取发起节点并判断是否允许发起人撤回
            let url =
              req.getContext().bpmRunTime +
              "/runtime/instance/v1/getSponsorRevokeByInstId?instId=" +
              this.instId;
            req.get(url).then((req) => {
              this.sponsorRevoke = req.data.value;
            });
          }
        });
      //知会任务待办转已办(待阅列表进来的)
      if (this.readId && !this.myReadType) {
        this.$store.dispatch("storeProcess/noticeTurnDode", this.readId);
      }
      //获取知会任务待办详情
      if (this.readId) {
        this.$store
          .dispatch("storeProcess/getBpmTaskNoticeById", this.readId)
          .then((row) => {
            if (row.taskId) {
              this.copyTaskId = row.taskId;
            } else if (row.nodeId) {
              this.selectNodeId = row.nodeId;
            }
          });
      }
      //获取知会任务已办详情
      if (this.readDoneId) {
        this.$store
          .dispatch("storeProcess/getBpmTaskNoticeDoneById", this.readDoneId)
          .then((row) => {
            if (row.taskId) {
              this.copyTaskId = row.taskId;
            } else if (row.nodeId) {
              this.selectNodeId = row.taskKey;
            }
          });
      }
    }
    //获取当前用户ID
    this.promoterId = JSON.parse(sessionStorage.getItem("currentUser")).userId;
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";

.container {
  margin-top:0 !important;
  height: 100%;
  // background: #fff;
  background-color: #18486e;
  padding: 20px;
  box-sizing: border-box;

  .task_header {
    width: calc(100% - 40px);
    background: #fff
  }
  .container__header {
    width: 100%;
    justify-content: space-between;
    background-color: #18486e;
    color: #fff;
  }
  .container__header-btngroup {
    margin-right: 10px;
  }
  .container__content {
    margin-top: 40px;
    height: calc(100% - 40px);
  }
}

.singleContainer {
  margin-top: 0px !important;
  height: 100%;

  .task_header {
    width: calc(100% - 40px);
    background: $--background-color-secondary;
  }
  .container__header {
    width: 100%;
    justify-content: space-between;
  }
  .container__header-btngroup {
    margin-right: 10px;
  }
  .container__content {
    margin-top: 40px;
    height: 100%;
  }
}

.el-header {
  padding: 0;
}

.top-subject-col > h3 {
  text-align: left;
  color: #666;
}
.flow-subject {
  text-align: right;
  color: #666;
  margin-top: 18px;
}

.top-btns-col {
  padding-right: 6px;
  height: 48px;
  line-height: 48px;
  text-align: right;
}

.top-btns-col > button {
  color: #666;
}

.top-btns-col > button ::v-deep span {
  margin-left: 3px;
}

.top-btns-col > button:hover {
  color: $--theme-color;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
@page {
  margin: auto 5mm;
  size: auto;
}
.task-card {
  width: 1360px;
  background: #fff;
  padding-top: 140px;
}
.task-card_not {
  width: 1360px;
  background: #fff;
  padding-top: 20px;
}
.task_header {
  position: fixed;
  z-index: 100;
  padding: 0px !important;
}
.btn_region_in {
  background-color: $--background-color-secondary;
}
.watermark {
  display: flex;
  position: fixed;
}
@media print {
  .watermark {
    display: flex;
  }
  .notprint {
    display: none;
  }
}
</style>
