<!--
 * @Author: ysh
 * @Date: 2024-01-30 09:56:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-02-26 16:13:14
-->
<template>
  <div>
    <el-col :span="22" v-loading="loading">
      <div class="block">
        <el-timeline class="block">
          <el-timeline-item v-for="(item, index ) in flowRecordList" :key="index" :icon="setIcon(item.finishTime)"
            size="large" :color="setColor(item.finishTime)">
            <p style="font-weight: 700">{{ item.taskName }}</p>

            <el-card :body-style="{ padding: '10px' }">
              <el-descriptions class="margin-top" :column="1" size="small" border>
                <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-user"></i>办理人</template>
                  {{ item.assigneeName }}
                  <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-user"></i>候选办理</template>
                  {{ item.candidate }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label">
                  <template slot="label"><i class="el-icon-date"></i>接收时间</template>
                  {{ item.createTime }}
                </el-descriptions-item>
                <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-date"></i>处理时间</template>
                  {{ item.finishTime }}
                </el-descriptions-item>
                <el-descriptions-item v-if="item.duration" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-time"></i>耗时</template>
                  {{ item.duration }}
                </el-descriptions-item>
                <!-- <el-descriptions-item v-if="item.comment" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
                  {{ item.comment.comment }}
                </el-descriptions-item> -->
              </el-descriptions>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-col>
  </div>
</template>

<script>
import { flowRecord } from "@/api/flowable/finished";
export default {
  props: {
    rows: {
      type: Object,
      default: {}
    }
  },
  watch: {
    rows: function (newval, oldval) {
      this.getFlowRecordList();
    }
  },
  created() {
    this.getFlowRecordList();
  },
  data() {
    return {
      flowRecordList: [], // 流程流转数据
      loading: true
    }
  },
  methods: {
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
    setIcon(val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    },
    /** 获取流程变量内容 */
    processVariables() {
      if (this.rows.taskId) {
        // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
        // getProcessVariables(taskId).then(res => {
        //   this.variablesData = res.data.variables;
        // });
      }
    },
    /** 流程流转记录 */
    getFlowRecordList() {
      this.loading = true
      const that = this
      const params = { procInsId: this.rows.procInsId, deployId: this.rows.deployId }
      flowRecord(params).then(res => {
        that.flowRecordList = res.data.flowList;
        this.loading = false
      }).catch(res => {

      })
    },
  },
}
</script>

<style lang="scss" scoped>
.block {
  display: block;
}
</style>