<template>
  <cms-card class="box-card">
    <div slot="header" class="clearfix">
      <span>审批信息</span>
    </div>
    <div style="padding: 10px 20px 10px" class="process-detail">
      <el-timeline :reverse="true">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.endTime ? 'el-icon-reading' : 'el-icon-alarm-clock'"
          :type="activity.endTime ? (activity.commentType === 'BH' ? 'danger' : 'primary') : 'info'"
          :size="activity.endTime ? 'small' : 'large'"
          :timestamp="activity.endTime"
        >
          <span :style="activity['commentType'] === 'BH' ? 'color: red'
              : ((!activity['commentType']) && !activity['endTime']) ? 'color: rgb(21 125 255)' : 'color: rgb(28 176 11)'">
            {{ activity.hisActInsActName }}
            {{ activity.assigneeName ? "(" + activity.assigneeName + ")" : ""}}
            <br/>
            <span
              v-if="activity.comment"
              style="font-size: 12px; "
              :style="activity['commentType'] === 'BH' ? 'color: red' : 'color: rgb(28 176 11)'"
            >
              <span>审批意见： {{ activity.comment }} </span>
              <span>，历时： {{ activity.hisActInsDuTime }}</span>
            </span>
          </span>
        </el-timeline-item>
      </el-timeline>
    </div>
  </cms-card>
</template>

<script>
  export default {
    name: "CmsProcessHistory",
    data() {
      return {
        activities: [],
      }
    }
  }
</script>

<style scoped>

</style>
