<template>
  <!-- 流转记录 -->
  <div v-loading="processRecordLoading" class="record">
    <el-row class="table-title">
      <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流转记录</div></el-col>
    </el-row>
    <el-table :data="processRecordList" border max-height="250">
      <el-table-column
        v-for="column in processRecordColumns"
        :key="column.value"
        :label="column.text"
        :width="column.width"
        :align="column.align?column.align:'center'">
        <template slot-scope="scope">
          <span>{{ scope.row[column.value] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { historicalRecords } from '@/api/process'
export default {
  name: 'CaseRecord',
  props: {
    processId: {
      type: String,
      default: -1
    }
  },
  data() {
    return {
      processRecordList: [],
      processRecordColumns: [
        {
          text: '处理操作',
          value: 'operationTypeName',
          align: 'center'
        },
        {
          text: '执行部门',
          value: 'deptName',
          align: 'center'
        },
        {
          text: '执行人',
          value: 'userName',
          align: 'center'
        },
        {
          text: '处理时间',
          value: 'time',
          align: 'center'
        },
        {
          text: '备注',
          value: 'remarks',
          align: 'center'
        }
      ],
      processRecordLoading: false
    }
  },
  mounted() {
    this.fetchProcessRecords()
  },
  methods: {
    fetchProcessRecords() {
      this.processRecordLoading = true
      historicalRecords(this.processId).then(res => {
        this.processRecordList = res.data
        this.processRecordLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-title{
  background-color:rgba(243, 243, 243, 1);
  height: 46px;
  .title-header{
    line-height:46px;
    color: #606266;
    font-size: 15px;
    i{
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
.record{
  margin-bottom: 40px;
}
</style>