<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:41:15
-->
<template>
  <div>
    <div class="process-viewer">
      <div
        v-show="!isLoading"
        ref="processCanvas"
        class="process-canvas"
        style="height: 280px"
      />
      <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
      <defs ref="customSuccessDefs">
        <marker
          id="sequenceflow-end-white-success"
          view-box="0 0 20 20"
          ref-x="11"
          ref-y="10"
          marker-width="10"
          marker-height="10"
          orient="auto"
        >
          <path
            class="success-arrow"
            d="M 1 5 L 11 10 L 1 15 Z"
            style="
              stroke-width: 1px;
              stroke-linecap: round;
              stroke-dasharray: 10000, 1;
            "
          />
        </marker>
        <marker
          id="conditional-flow-marker-white-success"
          view-box="0 0 20 20"
          ref-x="-1"
          ref-y="10"
          marker-width="10"
          marker-height="10"
          orient="auto"
        >
          <path
            class="success-conditional"
            d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
            style="
              stroke-width: 1px;
              stroke-linecap: round;
              stroke-dasharray: 10000, 1;
            "
          />
        </marker>
      </defs>
      <!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
      <defs ref="customFailDefs">
        <marker
          id="sequenceflow-end-white-fail"
          view-box="0 0 20 20"
          ref-x="11"
          ref-y="10"
          marker-width="10"
          marker-height="10"
          orient="auto"
        >
          <path
            class="fail-arrow"
            d="M 1 5 L 11 10 L 1 15 Z"
            style="
              stroke-width: 1px;
              stroke-linecap: round;
              stroke-dasharray: 10000, 1;
            "
          />
        </marker>
        <marker
          id="conditional-flow-marker-white-fail"
          view-box="0 0 20 20"
          ref-x="-1"
          ref-y="10"
          marker-width="10"
          marker-height="10"
          orient="auto"
        >
          <path
            class="fail-conditional"
            d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
            style="
              stroke-width: 1px;
              stroke-linecap: round;
              stroke-dasharray: 10000, 1;
            "
          />
        </marker>
      </defs>

      <div style="position: absolute; top: 0px; left: 0px; width: 100%">
        <el-row type="flex" justify="end">
          <el-button-group key="scale-control" size="medium">
            <el-button
              size="medium"
              type="default"
              :plain="true"
              :disabled="defaultZoom <= 0.3"
              icon="el-icon-zoom-out"
              @click="processZoomOut()"
            />
            <el-button size="medium" type="default" style="width: 90px">{{
              Math.floor(this.defaultZoom * 10 * 10) + "%"
            }}</el-button>
            <el-button
              size="medium"
              type="default"
              :plain="true"
              :disabled="defaultZoom >= 3.9"
              icon="el-icon-zoom-in"
              @click="processZoomIn()"
            />
            <el-button
              size="medium"
              type="default"
              icon="el-icon-c-scale-to-original"
              @click="processReZoom()"
            />
            <slot />
          </el-button-group>
        </el-row>
      </div>
    </div>
    <!-- 已完成节点悬浮弹窗 -->
    <div class="information-list">
      <el-select v-model="selectValue" @change="handleSelect">
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-table
        height="190"
        :data="taskCommentList"
        size="mini"
        border
        header-cell-class-name="table-header-gray"
      >
        <el-table-column
          label="序号"
          header-align="center"
          align="center"
          type="index"
          width="55px"
        />
        <el-table-column label="流程状态" header-align="center" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.endTime">已完结</div>
            <div v-else>正在办理</div>
          </template>
        </el-table-column>
        <el-table-column
          label="环节名称"
          prop="name"
          minWidth="100"
          align="center"
        />
        <el-table-column
          label="办理人"
          prop="agent"
          minWidth="120"
          align="center"
        />
        <el-table-column
          label="转入时间"
          prop="createTime"
          :formatter="formatDate"
          width="160"
          align="center"
        />
        <el-table-column
          label="认领时间"
          prop="claimTime"
          :formatter="formatDate"
          width="160"
          align="center"
        />
        <el-table-column
          label="转出时间"
          prop="endTime"
          :formatter="formatDate"
          width="160"
          align="center"
        />
        <el-table-column label="操作方式" prop="controls" align="center" />
        <el-table-column label="意见" prop="idea" align="center" />
      </el-table>
    </div>
  </div>
</template>
<script>
import "@/styles/package/theme/index.scss";
import BpmnViewer from "bpmn-js/lib/Viewer";
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
export default {
  props: {
    formData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      dlgTitle: undefined,
      defaultZoom: 1,
      // 是否正在加载流程图
      isLoading: true,
      bpmnViewer: undefined,
      // 已完成流程元素
      processNodeInfo: undefined,
      // 当前任务id
      selectTaskId: undefined,
      // 任务节点审批记录
      taskList: [],
      taskCommentList: [],
      // 已完成任务悬浮延迟Timer
      hoverTimer: null,
      // 下拉
      selectValue: "",
      selectOptions: [],
    };
  },
  created() {
    this.$nextTick(() => {
      // 获取流程记录
      this.getCommentList();
      this.setProcessStatus(this.formData.finishedInfo);
      this.importXML(this.formData.xml);
    });
  },
  destroyed() {
    this.clearViewer();
  },
  methods: {
    formatDate(row, column) {
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return (
        dt.getFullYear() +
        "-" +
        (dt.getMonth() + 1) +
        "-" +
        dt.getDate() +
        " " +
        dt.getHours() +
        ":" +
        dt.getMinutes() +
        ":" +
        dt.getSeconds()
      );
    },
    processReZoom() {
      this.defaultZoom = 1;
      this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
    },
    processZoomIn(zoomStep = 0.1) {
      const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
      if (newZoom > 4) {
        throw new Error(
          "[Process Designer Warn ]: The zoom ratio cannot be greater than 4"
        );
      }
      this.defaultZoom = newZoom;
      this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
    },
    processZoomOut(zoomStep = 0.1) {
      const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
      if (newZoom < 0.2) {
        throw new Error(
          "[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2"
        );
      }
      this.defaultZoom = newZoom;
      this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
    },
    getOperationTagType(type) {
      return "success";
    },
    // 流程图预览清空
    clearViewer(a) {
      if (this.$refs.processCanvas) {
        this.$refs.processCanvas.innerHTML = "";
      }
      if (this.bpmnViewer) {
        this.bpmnViewer.destroy();
      }
      this.bpmnViewer = null;
    },
    // 添加自定义箭头
    addCustomDefs() {
      const canvas = this.bpmnViewer.get("canvas");
      const svg = canvas._svg;
      const customSuccessDefs = this.$refs.customSuccessDefs;
      const customFailDefs = this.$refs.customFailDefs;
      svg.appendChild(customSuccessDefs);
      svg.appendChild(customFailDefs);
    },
    // 任务悬浮弹窗
    onSelectElement(element) {
      this.selectTaskId = undefined;
      this.dlgTitle = undefined;
      let allfinishedTaskSet = [
        ...this.processNodeInfo.finishedTaskSet,
        ...this.processNodeInfo.unfinishedTaskSet,
      ];
      if (this.processNodeInfo == null || allfinishedTaskSet == null) return;
      if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) {
        return;
      }
      this.selectTaskId = element.id;
      this.selectValue = element.id;
      this.dlgTitle = element.businessObject
        ? element.businessObject.name
        : undefined;
      // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
      this.taskCommentList = (this.taskList || []).filter((item) => {
        return item.taskDefinitionKey === this.selectTaskId;
      });
      if (this.taskCommentList.length == 0) {
        this.taskCommentList = this.taskList;
      }
    },
    // 下拉列表切换
    handleSelect(val) {
      this.taskCommentList = (this.taskList || []).filter((item) => {
        return item.taskDefinitionKey === val;
      });
      if (this.taskCommentList.length == 0) {
        this.taskCommentList = this.taskList;
      }
    },
    // 显示流程图
    async importXML(xml) {
      let xmlData = this.$x2js.xml2js(xml).definitions.process;
      this.selectOptions = xmlData.userTask.map((item) => {
        return { value: item._id, label: item._name };
      });
      this.selectOptions = [
        { value: xmlData.startEvent._id, label: "浏览记录" },
        ...this.selectOptions,
      ];
      this.selectOptions = this.selectOptions
        .map((item) => {
          if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) {
            return item;
          }
          if (
            this.formData.finishedInfo.unfinishedTaskSet.includes(item.value)
          ) {
            return item;
          }
        })
        .filter(Boolean);
      this.selectValue = xmlData.startEvent._id;
      this.clearViewer("a");
      if (xml != null && xml !== "") {
        try {
          this.bpmnViewer = new BpmnViewer({
            additionalModules: [
              // 移动整个画布
              MoveCanvasModule,
            ],
            container: this.$refs.processCanvas,
          });
          // 任务节点悬浮事件
          this.bpmnViewer.on("element.click", ({ element }) => {
            this.onSelectElement(element);
          });
          await this.bpmnViewer.importXML(xml);
          this.isLoading = true;
          this.addCustomDefs();
        } catch (e) {
          this.clearViewer("b");
        } finally {
          this.isLoading = false;
          this.setProcessStatus(this.processNodeInfo);
          this.$nextTick(() => {
            this.processReZoom();
          });
        }
      }
    },
    // 获取流程记录
    getCommentList() {
      this.formData.allCommentList.forEach(async (item, index) => {
        // item.comments.forEach(element => {
        //   if(element.type=="COMPLETE"){
        //     this.formData.allCommentList[index].idea=element.message
        //      this.formData.allCommentList[index].controls="完成"
        //   }
        // });
        let type = item.comments[item.comments.length - 1].type;
        this.formData.allCommentList[index].idea =
          item.comments[item.comments.length - 1].message;
        // 操作方式
        let controls = "";
        switch (type) {
          case "COMPLETE":
            controls = "完成";
            break;
          case "CLAIM":
            controls = "完成";
            break;
          case "ASSIGN":
            controls = "转办";
            break;
          case "DELEGATE":
            controls = "委派";
            break;
          case "UNCLAIM":
            controls = "取消认领";
            break;
          case "STOP":
            controls = "终止";
            break;
          case "BACK":
            controls = "退回";
            break;
        }
        this.formData.allCommentList[index].controls = controls;
        this.formData.allCommentList[index].agent = item.assignee.name;
      });
      this.formData.handlinglist.forEach(async (item, index) => {
        if (item.assignee.name) {
          this.formData.handlinglist[index].agent = item.assignee.name;
        } else {
          let str = "";
          item.countersign.forEach((item) => {
            str += item.name + ",";
          });
          str = str.slice(0, -1);
          this.formData.allCommentList[index].agent = str;
        }
      });
      this.taskList = [
        ...this.formData.allCommentList,
        ...this.formData.handlinglist,
      ];
      //  this.taskList =this.formData.allCommentList;
      //  处理数据之后赋值
      this.taskCommentList = this.taskList;
    },

    // 设置流程图元素状态
    setProcessStatus(processNodeInfo) {
      this.processNodeInfo = processNodeInfo;
      if (
        this.isLoading ||
        this.processNodeInfo == null ||
        this.bpmnViewer == null
      )
        return;
      const {
        finishedTaskSet,
        rejectedTaskSet,
        unfinishedTaskSet,
        finishedSequenceFlowSet,
      } = this.processNodeInfo;
      const canvas = this.bpmnViewer.get("canvas");
      const elementRegistry = this.bpmnViewer.get("elementRegistry");
      if (Array.isArray(finishedSequenceFlowSet)) {
        finishedSequenceFlowSet.forEach((item) => {
          if (item != null) {
            canvas.addMarker(item, "success");
            const element = elementRegistry.get(item);
            const conditionExpression =
              element.businessObject.conditionExpression;
            if (conditionExpression) {
              canvas.addMarker(item, "condition-expression");
            }
          }
        });
      }
      if (Array.isArray(finishedTaskSet)) {
        finishedTaskSet.forEach((item) => canvas.addMarker(item, "success"));
      }
      if (Array.isArray(unfinishedTaskSet)) {
        unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary"));
      }
      if (Array.isArray(rejectedTaskSet)) {
        rejectedTaskSet.forEach((item) => {
          if (item != null) {
            const element = elementRegistry.get(item);
            if (element.type.includes("Task")) {
              canvas.addMarker(item, "danger");
            } else {
              canvas.addMarker(item, "warning");
            }
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.information-list {
  height: 220px;
  margin-top: 10px;

  p {
    font-size: 16px;
    line-height: 24px;
  }
}
/deep/.bjs-powered-by {
  display: none;
}
// /deep/.information-list {
//   height: 170px;
//   overflow: visible;
// }
</style>