<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 size="small" 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>
    <!-- 督办记录 -->
    <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="superviseLoading" :data="superviseList" border size="small" max-height="250">
        <el-table-column
          v-for="column in superviseColumns"
          :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="urgeRecordLoading" :data="urgeRecordLsit" border size="small" 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 size="small" 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>
    <!-- 监察记录 -->
    <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="monitorLoading" :data="monitorList" border size="small" max-height="250">
        <el-table-column
          v-for="column in monitorColumns"
          :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="reportRecordLoading" :data="reportRecordList" border size="small" max-height="250">
        <el-table-column
          v-for="column in reportRecordColumns"
          :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>
</template>

<script>
import { historicalRecords } from '@/api/process'
import { delayRecords } from '@/api/caseDelay'
import { urgeRecords } from '@/api/caseUrge'
import { reportRecords } from '@/api/caseReport'
import { superviseRecords } from '@/api/caseSupervise'
import { monitorRecords } from '@/api/caseMonitor'

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,
      reportRecordList: [],
      reportRecordColumns: [
        {
          text: '请示人',
          value: 'reportUserName',
          align: 'center'
        },
        {
          text: '请示内容',
          value: 'reportContent',
          align: 'center'
        },
        {
          text: '请示时间',
          value: 'reportTime',
          align: 'center'
        },
        {
          text: '处理人',
          value: 'processUserName',
          align: 'center'
        },
        {
          text: '处理状态',
          value: 'processStateName',
          align: 'center'
        },
        {
          text: '处理方式',
          value: 'processTypeName',
          align: 'center'
        },
        {
          text: '处理时间',
          value: 'processTime',
          align: 'center'
        },
        {
          text: '处理结果',
          value: 'processContent',
          align: 'center'
        }
      ],
      reportRecordLoading: false,
      superviseList: [],
      superviseColumns: [
        {
          text: '申请人',
          value: 'applyPersonName',
          align: 'center'
        },
        {
          text: '督办内容',
          value: 'urgeContent',
          align: 'center'
        },
        {
          text: '申请时间',
          value: 'applyTime',
          align: 'center'
        },
        {
          text: '督办类型',
          value: 'urgeType',
          align: 'center'
        },
        {
          text: '审核状态',
          value: 'checkStatus',
          align: 'center'
        },
        {
          text: '审核人',
          value: 'checkPersonName',
          align: 'center'
        },
        {
          text: '审核时间',
          value: 'checkTime',
          align: 'center'
        },
        {
          text: '审核驳回原因',
          value: 'checkRejectReason',
          align: 'center'
        },
        {
          text: '督办状态',
          value: 'urgeStatus',
          align: 'center'
        },
        {
          text: '督办人',
          value: 'urgePersonName',
          align: 'center'
        },
        {
          text: '督办时间',
          value: 'urgeTime',
          align: 'center'
        },
        {
          text: '督办结果',
          value: 'urgeResult',
          align: 'center'
        }
      ],
      superviseLoading: false,
      monitorList: [],
      monitorColumns: [
        {
          text: '申请人',
          value: 'applyPersonName',
          align: 'center'
        },
        {
          text: '监察内容',
          value: 'superviseContent',
          align: 'center'
        },
        {
          text: '申请时间',
          value: 'applyTime',
          align: 'center'
        },
        {
          text: '审核状态',
          value: 'checkStatus',
          align: 'center'
        },
        {
          text: '审核人',
          value: 'checkPersonName',
          align: 'center'
        },
        {
          text: '审核时间',
          value: 'checkTime',
          align: 'center'
        },
        {
          text: '审核驳回原因',
          value: 'checkRejectReason',
          align: 'center'
        },
        {
          text: '监察状态',
          value: 'superviseStatus',
          align: 'center'
        },
        {
          text: '监察人',
          value: 'supervisePersonName',
          align: 'center'
        },
        {
          text: '监察结果',
          value: 'superviseResult',
          align: 'center'
        }
      ],
      monitorLoading: false
    }
  },
  mounted() {
    this.fetchProcessRecords()
    this.fetchDelayRecords()
    this.fetchUrgeRecords()
    this.fetchReportRecords()
    this.fetchSuperviseRecords()
    this.fetchMonitorecords()
  },
  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
      urgeRecords(this.id).then(res => {
        this.urgeRecordLsit = res.data
        this.urgeRecordLoading = false
      })
    },
    fetchReportRecords() {
      this.reportRecordLoading = true
      reportRecords(this.id).then(res => {
        this.reportRecordList = res.data
        this.reportRecordLoading = false
      })
    },
    fetchSuperviseRecords() {
      this.superviseLoading = true
      superviseRecords(this.id).then(res => {
        this.superviseList = res.data
        this.superviseLoading = false
      })
    },
    fetchMonitorecords() {
      this.monitorLoading = true
      monitorRecords(this.id).then(res => {
        this.monitorList = res.data
        this.monitorLoading = 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>