<!--事件详情-->
<template>
  <div v-loading="wholeLoading" class="app-container">
    <!-- 基础信息表单 -->
    <div>
      <el-row class="table-title">
        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件基础信息</div></el-col>
      </el-row>
      <case-form-read ref="caseFormRead" :case-form="caseDetail"/>
    </div>
    <!-- 事件流程处理 -->
    <div v-if="showProcess&&caseDetail.id">
      <el-row class="table-title">
        <el-col :span="6"><div class="title-header"><i class="el-icon-tickets"/>事件流程处理</div></el-col>
      </el-row>
      <case-process
        ref="caseProcess"
        :biz-id="caseDetail.id"
        :process-id="caseDetail.processId"
        :task-id="taskId"
        :case-state="caseDetail.caseState"
        :limited-time="caseDetail.limitedTime"
        @loading="loading"
        @submitSuccess="submitSuccess"
        @submitError="submitError"
      />
    </div>
    <!-- 事件处理记录 -->
    <div v-if="caseDetail.processId">
      <case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id"/>
    </div>
  </div>
</template>

<script>
import CaseFormRead from './caseCommon/caseFormRead'
import CaseProcess from './caseCommon/caseProcess'
import CaseRecord from './caseCommon/caseRecord'
import { caseDetail } from '@/api/callCase'

export default {
  name: 'CaseDetail',
  components: { CaseFormRead, CaseProcess, CaseRecord },
  data() {
    return {
      id: '',
      taskId: '', // 当前任务id，只有任务处理的详情中需要，会签用
      caseDetail: {},
      showProcess: false,
      wholeLoading: false
    }
  },
  mounted() {
    this.id = this.$route.params.id
    if (this.$route.query.taskId) {
      this.taskId = this.$route.query.taskId
    }
    if (this.$route.query.showProcess) {
      this.showProcess = this.$route.query.showProcess
    }
    this.fetchDetail()
  },
  methods: {
    /**
     * 获取事件详情
     */
    fetchDetail() {
      if (this.id) {
        this.wholeLoading = true
        caseDetail(this.id).then(response => {
          this.caseDetail = response.data
          this.wholeLoading = false
        })
      }
    },
    loading() {
      this.wholeLoading = true
    },
    /**
     * 提交成功之后
     */
    submitSuccess() {
      console.log('submitSuccess')
      this.$message.success('提交成功')
      this.showProcess = false
      this.$route.query.showProcess = false
      this.wholeLoading = false
      this.fetchDetail()
      this.$refs['caseRecord'].fetchProcessRecords()
    },
    /**
     * 提交失败之后
     */
    submitError() {
      console.log('submitError')
      this.wholeLoading = 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;
      }
    }
  }
</style>