<template>
  <div>
    <Modal v-model="showBatchModal" width="900">
      <p slot="header">
        批量生成报告
      </p>
      <div>
        <div v-show="isLoad">
          <Spin fix>
            <Icon type="load-c" size="18" class="file-spin-icon-load" />
            <div>正在生成,请稍后...</div>
          </Spin>
        </div>
        <!--内容-->
        <div class="layout-content-padding">
          <div class="layout-content-main">
            <Row>
              <!--样品信息-->
              <Col span="24" style="margin-bottom: 10px">
              <el-table
                stripe
                border
                size="small"
                highlight-current-row
                :data="tableData"
                style="width: 100%"
                :default-sort="{prop: 'date', order: 'descending'}"
              >
                <el-table-column prop="sampleCode" label="样本编号" sortable />
                <el-table-column prop="name" label="物料名称" sortable />
                <el-table-column prop="reportSn" label="报告编号" sortable>
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.reportCode" placeholder="留白则自动生成" size="medium" />
                  </template>
                </el-table-column>
              </el-table>
              </Col>
              <!--报告模板-->
              <Col span="24">
              <reportTemplate ref="reportTemplate" @on-result-change="_templateResultChange" />
              </Col>
            </Row>
          </div>
        </div>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerBtn" @on-result-change="_footerResult" />
      </div>
    </Modal>
  </div>
</template>
<script>
import { drugSample } from '../../api'
import reportTemplate from './reportTemplate'

export default {
  components: {
    reportTemplate
  },
  data() {
    return {
      selectIds: [],
      showBatchModal: false,
      footerBtn: [
        { type: '', id: '', name: '取消' },
        { type: 'primary', id: '', name: '确定' }
      ],
      isLoad: false,
      reportModelId: '',
      // 样品数据
      tableData: [],
      showIssueModal: false
    }
  },
  methods: {
    _open(data) {
      this.tableData = data
      this.isLoad = false
      this.showBatchModal = true
      this._reportTemplate()
      this.reportModelId = ''
    },
    // 报告模板
    _reportTemplate() {
      this.$refs.reportTemplate._open()
    },
    _footerResult(name) {
      switch (name) {
        case '确定':
          this._createReport()
          break
        case '取消':
          this.showBatchModal = false
          break
      }
    },
    async _createReport() {
      const result = await drugSample.reportGenerate({
        sampleList: this.tableData,
        reportModelId: this.reportModelId
      })

      if (result) {
        this.showBatchModal = false
        this.$Message.success('生成成功!')

        this.$emit('on-result-change')
      }
      console.log(this.tableData)
    },
    _templateResultChange(selectData) {
      this.reportModelId = selectData.id
    }
  }
}
</script>
