<template>
  <div>
    <Modal v-model="showBatchModal" v-drag :mask-closable="false" width="900">
      <p slot="header">
        原始记录填写
      </p>
      <div>
        <!--内容-->
        <div class="layout-content-padding">
          <div class="layout-content-main">
            <Row>
              <!--样品信息-->
              <!--报告模板-->
              <Col span="24">
                <ReportTemplate ref="reportTemplate" @on-result-change="_templateResultChange"></ReportTemplate>
              </Col>
            </Row>
          </div>
        </div>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerBtn" @on-result-change="_footerResult"></modal-footer>
      </div>
    </Modal>
    <!--生成报告的进度条-->
  </div>
</template>
<script>
import ReportTemplate from './ReportTemplate'

/**
 * 样品列表--生成报告或者选择模板生成报告
 */
export default {
  components: {
    ReportTemplate
  },
  data() {
    return {
      selectIds: [],
      getPage: {
        records: []
      },
      showBatchModal: false,
      isLoading: false,
      footerBtn: [
        { type: '', id: '', name: '取消' },
        { type: 'primary', id: '', name: '确定' }
      ],
      pageColumns: [
        { title: '样品名称', key: 'name', width: 160 },
        { title: '样品编号', key: 'code', width: 150 },
        { title: '证书编号', key: 'certificate', width: 150 }
      ],
      reportModelId: '',
      backData: {},
      // 样品数据
      tableData: [],
      // 签发日期
      issueDateTemp: '',
      issueDate: '',
      showIssueModal: false
    }
  },
  methods: {
    _open() {
      this.getPage.records = []
      this.backData = {}
      this.showBatchModal = true
      this._reportTemplate()
      this.reportModelId = ''
      this.isLoading = false
    },
    // 报告模板
    _reportTemplate() {
      this.$refs.reportTemplate._open()
    },
    _footerResult(name) {
      switch (name) {
        case '确定':
          this._ok()
          break
        case '取消':
          this.showBatchModal = false
          break
      }
    },
    _templateResultChange(selectData) {
      this.backData = selectData[0]
    },
    _issueChange(data) {
      if (data) {
        this.issueDate = data
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _ok() {
      this.$refs.footerModal._hideLoading()
      if (!this.backData.name) {
        this.$Message.warning('请选择一个原始记录模板！')
        // this._hideLoading()
      } else {
        this.$emit('on-result-change', this.backData)
        this.showBatchModal = false
      }
    },
    _issueCancel() {
      this.showIssueModal = false
    },
    // 选择时间ok
    _issueOk() {
      this.isLoading = true
      this.showIssueModal = false
      this._createOk()
    },
    // 生成报告
    _createOk() {
      const obj = []
      for (let i = 0; i < this.tableData.length; i++) {
        obj.push({
          sampleId: this.tableData[i].id,
          reportSn: this.tableData[i].reportSn,
          issueDate: this.issueDate
        })
      }
      this.$layxLoading(true, '数据验证中')
      const validateObj = {
        sampleReports: obj,
        reportModelId: this.reportModelId
      }
      // 先进行验证
      this.$store
        .dispatch('FoodSampleReport/createReportValidate', validateObj)
        .then(() => {
          if (this.$store.state.FoodSampleReport.success) {
            // 验证成功之后再建立连接，然后进行生成报告操作
            // 建立websocket连接
            const currentTime = new Date().getTime()
            this.$refs.progressModal._open(this.tableData.length, currentTime)
            validateObj.seriesNo = currentTime
            console.log('生成报告的当前序列号,', validateObj.seriesNo)
            this.$store
              .dispatch('FoodSampleReport/createReport', validateObj)
              .then(() => {})
          }
          this._hideLoading()
          this.isLoading = false
          this.$layxLoading(false)
        })
    },
    _closeResult() {
      this.showBatchModal = false
      this.$emit('on-result-change')
    }
  }
}
</script>
