<template>
  <div>
    <!--内容-->
    <Modal v-model="showModal" :width="100" class="modal-footer-none modal-top-0">
      <p slot="header">{{modalTitle}}</p>
      <div>
        <el-tabs v-model="activeName" @tab-click="_changeTabs">
          <el-tab-pane label="样品台账" name="sample">
            <ReportMakeBySample ref="sampleTabs" @on-result-change="_sampleTabResult"></ReportMakeBySample>
          </el-tab-pane>
          <el-tab-pane label="报告台账" name="report">
            <ReportInfoMake ref="reportTabs"></ReportInfoMake>
          </el-tab-pane>
        </el-tabs>
      </div>
    </Modal>
  </div>
</template>
<script>
import ReportInfoMake from './tabs/ReportInfoMake'
import ReportMakeBySample from './tabs/ReportMakeBySample'

export default {
  components: {
    ReportMakeBySample,
    ReportInfoMake
  },
  data() {
    return {
      showModal: false,
      modalTitle: '',
      activeName: '',
      contractId: '',
      type: '',
      personal: ''
    }
  },
  computed: {
    tableHeight: function() {
      return document.documentElement.clientHeight - 135
    }
  },
  methods: {
    _open(contractId, title, type, personal) {
      this.modalTitle = '管理样品和报告'
      this.showModal = true
      this.activeName = 'sample'
      this.contractId = contractId
      this.type = type
      this.personal = personal
      // 先初始化样品台账的数据
      // this.$nextTick(() =>
      //   this.$refs.sampleTabs._getPage(
      //     this.contractId,
      //     this.type,
      //     this.personal
      //   )
      // )
      // this._sampleData(contractId)
    },
    // 判断待编样品是否为0
    _sampleData(contractId) {
      const data = {
        contractId: contractId,
        onlyReportMake: 1,
        reported: 0,
        page: 1,
        rows: 50,
        personal: this.personal
      }
      this.$store.dispatch('FoodSample/pageSampleReportMake', data).then(() => {
        const records = this.$store.state.FoodSample.page.records
        if (records.length === 0) {
          this.activeName = 'report'
          this.$nextTick(() => this._report())
        } else {
          this.activeName = 'sample'
          this.$nextTick(() =>
            this.$refs.sampleTabs._getPage(
              this.contractId,
              this.type,
              this.personal
            )
          )
        }
      })
    },
    _report() {
      this.$refs.reportTabs._open(this.contractId, this.personal)
    },
    _sample() {
      this.$refs.sampleTabs._open(this.contractId, this.type, this.personal)
    },
    _changeTabs(tab, event) {
      switch (tab.name) {
        case 'sample':
          this._sample()
          break
        case 'report':
          this._report()
          break
      }
    },
    _sampleTabResult(msg) {
      if (msg === 'changeTab') {
        this.activeName = 'report'
        this.$refs.reportTabs._open(this.contractId, this.personal)
      }
    }
  }
}
</script>
