<template>
  <!-- 审批记录 -->
  <el-card v-loading="tasksLoad" class="box-card">
    <el-col :span="16" :offset="4">
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in tasks"
          :key="index"
          :icon="item.result | timeLineIcon"
          :type="item.result | lineIconType"
        >
          <el-descriptions
            :title="`任务：${item.name}`"
            border
            :column="2"
            :label-style="{width: '80px'}"
          >
            <el-descriptions-item label="审批人">{{ item.assigneeUser.nickname }}
              <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag></el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ parseTime(item.createTime) }}</el-descriptions-item>
            <el-descriptions-item label="审批时间">{{ parseTime(item.endTime) }}</el-descriptions-item>
            <el-descriptions-item label="耗时">{{ item.durationInMillis | formatMs }}</el-descriptions-item>
            <el-descriptions-item label="审批意见">
              <el-tag v-if="!!item.reason" :type="item.result | lineIconType">{{ item.reason }}</el-tag>
              <el-tag v-else type="info">暂无意见</el-tag>
            </el-descriptions-item>
          </el-descriptions></el-timeline-item>
      </el-timeline>
    </el-col>
  </el-card>
</template>

<script>
import { getProcessInstance } from '@/api/bpm/processInstance'
import { getTaskListByProcessInstanceId } from '@/api/bpm/task'
import { getDate } from '@/utils/dateUtils'

// 流程实例的详情页，可用于审批
export default {
  name: 'EimBpmnRecord',
  filters: {
    timeLineIcon(result) {
      const icons = ['', 'el-icon-time', 'el-icon-check', 'el-icon-close', 'el-icon-remove-outline']
      return icons[result]
    },
    lineIconType(result) {
      const icons = ['', 'primary', 'success', 'danger', 'info']
      return icons[result]
    },
    formatMs(ms) {
      return getDate(ms)
    }
  },
  props: {
    bpmnId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      // 遮罩层
      processInstanceLoading: true,
      // 流程实例
      processInstance: {},
      // 审批记录
      tasksLoad: true,
      tasks: []
    }
  },
  created() {
    if (!this.bpmnId) {
      this.$message.error('未传递 id 参数，无法查看流程信息')
      return
    }
    this.getDetail()
  },
  methods: {
    /** 获得流程实例 */
    getDetail() {
      // 获得流程实例相关
      this.processInstanceLoading = true
      getProcessInstance(this.bpmnId).then(response => {
        if (!response.data) {
          this.$message.error('查询不到流程信息！')
          return
        }
        // 设置流程信息
        this.processInstance = response.data

        // 取消加载中
        this.processInstanceLoading = false
      })

      // 获得流程任务列表（审批记录）
      this.tasksLoad = true
      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
          }
        })
        // 取消加载中
        this.tasksLoad = false
      })
    }
  }
}
</script>
