<template>
  <div class="bi-report-work-form">
    <component :is="renderForm" :data="formData" :editable="editable" :success="handleEditSuccess" />
    <ui-loading class="bi-report-work-form__loading" type="primary" :visible="loading" />
  </div>
</template>
<script>
import WorkFormLeave from './report-work-form-leave.vue'
import WorkFormProcure from './report-work-form-procure.vue'
import WorkFormTask from './report-work-form-task.vue'
import WorkFormRepair from './report-work-form-repair.vue'
import WorkFormOiling from './report-work-form-oiling.vue'
import WorkFormMaintain from './report-work-form-maintain.vue'
import WorkFormFault from './report-work-form-fault.vue'
import { getWorkflowDetail } from '../apis'

export default {
  name: 'ReportWorkForm',
  props: {
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      required: true
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      formData: null,
      workflowTypeOptions: []
    }
  },
  computed: {
    renderFormMap() {
      return {
        task: WorkFormTask,
        leave: WorkFormLeave,
        procure: WorkFormProcure,
        repair: WorkFormRepair,
        oiling: WorkFormOiling,
        maintain: WorkFormMaintain,
        fault: WorkFormFault
      }
    },
    renderForm() {
      return this.renderFormMap[this.type]
    }
  },
  created() {
    if (this.id) {
      this.loadFormData()
    }
  },
  methods: {
    loadFormData(showLoading) {
      if (showLoading !== false) {
        this.loading = true
      }
      return getWorkflowDetail(this.id).then((rs) => {
        rs.picList = (rs.hsmwPictures || []).map(v => v.picRealPath)
        this.formData = rs
      }).finally(() => {
        this.loading = false
      })
    },
    handleEditSuccess() {
      return this.loadFormData(false)
    }
  }
}
</script>
<style lang="less">
.bi-report-work-form{
  height: 100%;
  position: relative;
}
.bi-report-work-form__loading{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
}
</style>
