<template>
  <div style="display: inline-block">
    <el-button v-if="buttonType === 'button'" type="primary" @click="handleOpen">查看</el-button>
    <el-link v-if="buttonType === 'link'" type="primary" @click="handleOpen">查看</el-link>
    <el-dialog ref="formDialog" append-to-body width="700px" :visible.sync="visible" :close-on-click-modal="false"
      @close="handleClose">
      <div slot="title">
        <span style="color: white">查看详情</span>
      </div>
      <div>
        <div v-loading="loading" style="min-height: 300px">
          <component :is="type" ref="detail" />
        </div>
      </div>

      <div slot="footer">
        <el-button class="back button" @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFlow } from '@/api/audit/flow'

export default {
  name: 'AuditDetailDialog',
  props: {
    buttonType: {
      type: String,
      default: 'link',
    },
    flowId: {
      required: true,
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      auditFlow: null,
    }
  },
  computed: {
    type() {
      switch (this.auditFlow) {
        case 1:
          return 'PostAdjustDetail'
        case 2:
          return 'EmployeeQuitDetail'
        case 3:
          return 'EmployeeRegularDetail'
        case 5:
          return 'LeaveRecordDetail'
        case 6:
          return 'CancelVacationDetail'
        case 7:
          return 'RewardDetail'
        case 8:
          return 'DeductionDetail'
        case 9:
          return 'SalaryAdjustDetail'
        case 10:
          return 'ExceptionHandlingDetail'
        case 11:
          return 'WorkOvertimeDetail'
      }
    },
  },
  methods: {
    handleOpen() {
      this.loading = true
      this.visible = true
      getFlow({ id: this.flowId })
        .then((res) => {
          const { auditFlow, businessDataOrigin } = res.data
          this.auditFlow = auditFlow
          this.$nextTick(() => {
            this.$refs.detail.setData(businessDataOrigin)
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleClose() {
      this.visible = false
    },
  },
}
</script>
