<template>
  <!-- 申请信息 -->
  <el-card v-loading="processInstanceLoading">
    <div slot="header" class="clearfix">
      <span class="el-icon-document">{{ processInstance.name }}</span>
    </div>
    <el-col
      v-if="processInstance.processDefinition && processInstance.processDefinition.formType === 10"
      :span="16"
      :offset="6"
    >
      <parser :key="new Date().getTime()" :form-conf="detailForm" />
    </el-col>
    <div v-if="processInstance.processDefinition && processInstance.processDefinition.formType === 20">
      <router-link
        :to="processInstance.processDefinition.formCustomViewPath + '?id='
          + processInstance.businessKey"
      >
        <el-button type="primary">点击查看</el-button>
      </router-link>
    </div>
  </el-card>
</template>

<script>
import { decodeFields } from '@/utils/formGenerator'
import Parser from '@/components/Parser/index.vue'
import { getProcessInstance } from '@/api/bpm/processInstance'

// 流程实例的详情页，可用于审批
export default {
  name: 'EimBpmnDetails',
  components: {
    Parser
  },
  props: {
    // 流程实例的编号
    bpmnId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      // 遮罩层
      processInstanceLoading: true,
      // 流程实例
      processInstance: {},

      // 流程表单详情
      detailForm: {
        fields: []
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    /** 获得流程实例 */
    getDetail() {
      // 获得流程实例相关
      this.processInstanceLoading = true
      getProcessInstance(this.bpmnId).then(response => {
        if (!response.data) {
          this.$message.error('查询不到流程信息！')
          return
        }
        // 设置流程信息
        this.processInstance = response.data

        // 设置表单信息
        if (this.processInstance.processDefinition.formType === 10) {
          this.detailForm = {
            ...JSON.parse(this.processInstance.processDefinition.formConf),
            disabled: true, // 表单禁用
            formBtns: false, // 按钮隐藏
            fields: decodeFields(this.processInstance.processDefinition.formFields)
          }
          // 设置表单的值
          this.detailForm.fields.forEach(item => {
            const val = this.processInstance.formVariables[item.__vModel__]
            if (val) {
              item.__config__.defaultValue = val
            }
          })
        }
        // 取消加载中
        this.processInstanceLoading = false
      })
    }
  }
}
</script>
