<template>
  <el-tabs
    v-model="current"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-tab-pane :label="pageTitle" name="form">
      <slot />
    </el-tab-pane>

    <!-- 审批任务 -->
    <el-tab-pane
      label="审批任务"
      name="task"
      lazy
      :disabled="disabled && taskDisabled"
    >
      <eim-bpmn-task ref="eimBpmnTask" :bpmn-id="bpmnId" @complete="handleUpdateRaw" />
    </el-tab-pane>

    <!-- 申请信息 -->
    <el-tab-pane
      label="申请信息"
      name="details"
      lazy
      :disabled="disabled && detailsDisabled"
    >
      <eim-bpmn-details ref="eimBpmnDetails" :bpmn-id="bpmnId" />
    </el-tab-pane>

    <!-- 审批记录 -->
    <el-tab-pane
      label="审批记录"
      name="record"
      lazy
      :disabled="disabled && recordDisabled"
    >
      <eim-bpmn-record ref="eimBpmnRecord" :bpmn-id="bpmnId" />
    </el-tab-pane>

    <!-- 流程图 -->
    <el-tab-pane
      label="流程图"
      name="charts"
      lazy
      :disabled="disabled && chartsDisabled"
    >
      <eim-bpmn-charts ref="eimBpmnCharts" :bpmn-id="bpmnId" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import EimBpmnCharts from './EimBpmnCharts.vue'
import EimBpmnTask from './EimBpmnTask.vue'
import EimBpmnDetails from './EimBpmnDetails.vue'
import EimBpmnRecord from './EimBpmnRecord.vue'

export default {
  name: 'EimBpmn',
  components: {
    EimBpmnCharts,
    EimBpmnTask,
    EimBpmnDetails,
    EimBpmnRecord
  },
  props: {
    pageTitle: {
      type: String,
      default: '明细'
    },
    bpmnId: {
      type: [String, Number],
      default: '2a2ee933-e405-11ed-875c-66caf073ac4f'
    },
    // 禁用状态
    disabled: {
      type: Boolean,
      default: false
    },
    // 审批禁用
    taskDisabled: {
      type: Boolean,
      default: true
    },
    // 信息禁用
    detailsDisabled: {
      type: Boolean,
      default: true
    },
    // 记录禁用
    recordDisabled: {
      type: Boolean,
      default: true
    },
    // 流程图禁用
    chartsDisabled: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      current: 'form'
    }
  },
  methods: {
    handleUpdateRaw() {
      this.$refs['eimBpmnDetails']?.getDetail()
      this.$refs['eimBpmnRecord']?.getDetail()
      this.$refs['eimBpmnCharts']?.getDetail()
    }
  }
}
</script>

<style>
</style>
