<template>
  <div>
    <!-- 流转记录 -->
    <div 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 v-loading="processRecordLoading" :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>
    <!-- TODO 督办记录 -->
    <!-- TODO 催办记录 -->
    <div 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 v-loading="urgeRecordLoading" :data="urgeRecordLsit" border max-height="250">
        <el-table-column
          v-for="column in urgeRecordColumns"
          :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>
    <!-- 延期记录 -->
    <div 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 v-loading="delayRecordLoading" :data="delayRecordList" border max-height="250">
        <el-table-column
          v-for="column in delayRecordColumns"
          :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>
    <!-- TODO 监察记录 -->
    <!-- TODO 上报请示记录 -->
  </div>
</template>

<script>
import { historicalRecords } from '@/api/process'
import { delayRecords } from '@/api/caseDelay'
import { getUrgeRecords } from '@/api/caseUrge'

export default {
  name: 'CaseRecord',
  props: {
    processId: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },
  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,
      delayRecordList: [],
      delayRecordColumns: [
        {
          text: '申请人',
          value: 'applyUserName',
          align: 'center'
        },
        {
          text: '申请理由',
          value: 'applyReason',
          align: 'center'
        },
        {
          text: '延期时间',
          value: 'delayTime',
          align: 'center'
        },
        {
          text: '申请状态',
          value: 'applyStateName',
          align: 'center'
        },
        {
          text: '申请时间',
          value: 'applyTime',
          align: 'center'
        }
      ],
      delayRecordLoading: false,
      urgeRecordLsit: [],
      urgeRecordColumns: [
        {
          text: '催办人',
          value: 'urgeUserName',
          align: 'center'
        },
        {
          text: '催办环节',
          value: 'stateName',
          align: 'center'
        },
        {
          text: '当时处理者',
          value: 'processUserName',
          align: 'center'
        },
        {
          text: '催办内容',
          value: 'urgeContent',
          align: 'center'
        },
        {
          text: '催办时间',
          value: 'urgeTime',
          align: 'center'
        }
      ],
      urgeRecordLoading: false
    }
  },
  mounted() {
    this.fetchProcessRecords()
    this.fetchDelayRecords()
    this.fetchUrgeRecords()
  },
  methods: {
    fetchProcessRecords() {
      this.processRecordLoading = true
      historicalRecords(this.processId).then(res => {
        this.processRecordList = res.data
        this.processRecordLoading = false
      })
    },
    fetchDelayRecords() {
      this.delayRecordLoading = true
      delayRecords(this.id).then(res => {
        this.delayRecordList = res.data
        this.delayRecordLoading = false
      })
    },
    fetchUrgeRecords() {
      this.urgeRecordLoading = true
      getUrgeRecords(this.id).then(res => {
        this.urgeRecordLsit = res.data
        this.urgeRecordLoading = 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>
