<template>
  <div>
      <el-dialog
        :visible.sync="showModal"
        :close-on-click-modal="false"
        title="流程配置"
        fullscreen
        top="0"
      >
      <!--内容-->
      <div class="">
        <el-tabs v-model="tabValue" class="tabsHiddenEquip" @tab-click="_changeTabs">
          <el-tab-pane label="委托流程" name="contract">
            <processConfigContract ref="contractView" />
          </el-tab-pane>
          <el-tab-pane label="项目流程" name="item">
            <processConfigItem ref="itemView" />
          </el-tab-pane>
          <el-tab-pane label="简版委托流程" name="simple">
            <componentSimpleContract ref="simpleView" />
          </el-tab-pane>
          <el-tab-pane label="食品委托流程" name="foodContract">
            <processConfigContractFood ref="foodContractView" />
          </el-tab-pane>
        </el-tabs>
      </div>
      </el-dialog>
  </div>
</template>
<script>
import processConfigContract from './processConfigContract'
import processConfigContractFood from './processConfigContractFood'
import processConfigItem from './processConfigItem'
import componentSimpleContract from './componentSimpleContract'

export default {
  components: {
    processConfigContract,
    processConfigContractFood,
    processConfigItem,
    componentSimpleContract
  },
  data() {
    return {
      showModal: false,
      id: '',
      tabValue: 'contract'
    }
  },
  methods: {
    _open(id) {
      this.tabValue = 'contract'
      this.showModal = true
      this.id = id
      this.$nextTick(() => {
        this.$refs.contractView._open(this.id)
      })
    },
    _changeTabs(data) {
      switch (data.name) {
        case 'contract':
          this.$refs.contractView._open(this.id)
          break
        case 'item':
          this.$refs.itemView._open(this.id)
          break
        case 'simple':
          this.$refs.simpleView._open(this.id)
          break
        case 'foodContract':
          this.$refs.foodContractView._open(this.id)
          break
      }
    }
  }
}
</script>
