<template>
  <div>
    <Modal v-model="showModal" width="100" :mask-closable="false" :styles="{top: '0px'}" class="zIndex-1200 modal-header-none">
      <el-tabs v-model="activeName" @tab-click="_changeTabs">
        <el-tab-pane label="按项目导入" name="item">
          <RelAptitudeItem ref="itemTabs" />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
      </div>
    </Modal>
  </div>
</template>

<script>
// import { materialInspectionContract } from '../../../../../api'
import RelAptitudeItem from './RelAptitudeItem'

export default {
  components: {
    RelAptitudeItem
  },
  data() {
    return {
      showModal: false,
      activeName: 'item',
      sampleIds: '',
      footerList: [
        { name: '取消', type: '' },
        { name: '确定', type: 'primary' }
      ],
      getPage: {}
    }
  },
  methods: {
    _open(sampleIds) {
      this.showModal = true
      this.sampleIds = sampleIds
      this.activeName = 'item'
      this.$refs.itemTabs._open(sampleIds)
    },
    _changeTabs(tab, event) {
      // 样品接收中用的导入检测项目(给一个样品导入检测项目)
      if (tab.name === 'item') {
        this.$refs.itemTabs._open(this.sampleIds)
      }
    },
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          if (this.activeName === 'item') {
            this.getPage = this.$refs.itemTabs.getPage
          }
          this._ok()
          break
      }
    },
    _cancel() {
      this.$refs.footerModal._hideLoading()
      this.showModal = false
    },
    _ok() {
      if (!this.sampleIds) {
        // 编辑添加时导入
        this.$refs.footerModal._hideLoading()
        this.showModal = false
        this.$emit('on-result-change', this.getPage)
      } else if (this.getPage.records.length === 0) {
        this.$Message.warning('请至少选择一条检测项目！')
        this.$refs.footerModal._hideLoading()
      }
    }
  }
}
</script>
