<template>
  <!-- 高亮流程图 -->
  <el-card v-loading="processInstanceLoading" class="box-card">
    <my-process-viewer
      key="designer"
      v-model="bpmnXML"
      v-bind="bpmnControlForm"
      :activity-data="activityList"
      :process-instance-data="processInstance"
      :task-data="tasks"
    />
  </el-card>
</template>

<script>
import { getProcessDefinitionBpmnXML } from '@/api/bpm/definition'
import { getProcessInstance } from '@/api/bpm/processInstance'
import { getTaskListByProcessInstanceId } from '@/api/bpm/task'
import { getActivityList } from '@/api/bpm/activity'

// 流程实例的详情页，可用于审批
export default {
  name: 'EimBpmnCharts',
  props: {
    // 查询bpm的接口
    bpmnId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      // 遮罩层
      processInstanceLoading: true,
      // 流程实例
      id: undefined, // 流程实例的编号
      processInstance: {},

      // BPMN 数据
      bpmnXML: null,
      bpmnControlForm: {
        prefix: 'camunda'
      },
      activityList: [],

      // 审批记录
      tasks: []
    }
  },
  created() {
    this.initComponents()
  },
  methods: {
    initComponents() {
      this.getDetail()
      this.fetchTaskList()
    },
    // 获得流程实例
    getDetail() {
      // 获得流程实例相关
      this.processInstanceLoading = true
      getProcessInstance(this.bpmnId).then(response => {
        if (!response.data) {
          this.$message.error('查询不到流程信息！')
          return
        }
        this.processInstance = response.data
        const { processDefinition, id } = response.data
        // 加载流程图
        this.fetchChartsXml(processDefinition.id)
        // 加载活动列表
        this.fetchActivityList(id)
        // 取消加载中
        this.processInstanceLoading = false
      })

      // 获得流程任务列表（审批记录）
    },
    // 查询活动列表
    fetchTaskList() {
      getTaskListByProcessInstanceId(this.bpmnId).then(response => {
        // 审批记录
        this.tasks = []
        // 移除已取消的审批
        response.data.forEach(task => {
          if (task.result !== 4) {
            this.tasks.push(task)
          }
        })
        // 排序，将未完成的排在前面，已完成的排在后面；
        this.tasks.sort((a, b) => {
          // 有已完成的情况，按照完成时间倒序
          if (a.endTime && b.endTime) {
            return b.endTime - a.endTime
          } else if (a.endTime) {
            return 1
          } else if (b.endTime) {
            return -1
            // 都是未完成，按照创建时间倒序
          } else {
            return b.createTime - a.createTime
          }
        })
      })
    },
    // 查询活动列表
    fetchActivityList(processInstanceId) {
      // 加载活动列表
      getActivityList({ processInstanceId }).then(response => {
        this.activityList = response.data
      })
    },
    // 查询流程图
    fetchChartsXml(id) {
      getProcessDefinitionBpmnXML(id).then(response => {
        this.bpmnXML = response.data
      })
    }
  }
}
</script>

<style lang="scss">
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>
