<template>
  <div>
    <Modal v-model="showModal" @on-visible-change="_visibleChange" width="1000">
    <div class="layout-content-padding">
      <div class="layout-content-main">
        <el-tabs v-model="activeName" @tab-click="_changeTabs">
          <el-tab-pane v-if="sampleShow" label="按样品录入" name="sample"/>
          <el-tab-pane v-if="itemShow" label="按项目录入" name="item"/>
        </el-tabs>
        <!--组件加载，缓存-->
        <keep-alive>
          <!-- eslint-disable-next-line vue/require-component-is -->
          <component ref="refModal" :id="id" :is="currentComponent"></component>
        </keep-alive>
      </div>
    </div>
    </Modal>
  </div>
</template>

<script>
import ItemTabs from './item-tabs/ItemTabs'
import SampleTabs from './sample-tabs/SampleTabs'
/**
 * 任务分配
 */
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ItemTabs,
    // eslint-disable-next-line vue/no-unused-components
    SampleTabs
  },
  data() {
    return {
      activeName: '',
      currentComponent: '',
      showModal: false,
      id: '',
      sampleShow: true,
      itemShow: true
    }
  },
  mounted() {
    // 初始化tab,按钮权限
    this._initTab()
  },
  methods: {
    _open(id) {
      this.showModal = true
      this.id = id
      this.activeName = 'sample'
    },
    _initTab() {
      if (this.sampleShow) {
        // eslint-disable-next-line no-unused-expressions
        this.activeName === 'sample'
        this.currentComponent = 'SampleTabs'
      } else if (this.itemShow) {
        // eslint-disable-next-line no-unused-expressions
        this.activeName === 'item'
        this.currentComponent = 'ItemTabs'
      }
    },
    _changeTabs(tab, event) {
      if (tab.name === 'item') {
        this.currentComponent = 'ItemTabs'
      } else if (tab.name === 'sample') {
        this.currentComponent = 'SampleTabs'
      }
    },
    _search() {
      this.$emit('on-result-change')
    },
    _visibleChange(data) {
      if (data === false) {
        this._search()
      }
    }
  }
}
</script>
