<template>
  <div>
    <Modal v-model="showBatchModal" :mask-closable="false" width="900">
      <p slot="header">
        批量生成报告
      </p>
      <div>
        <!--内容-->
        <div class="layout-content-padding">
          <div class="layout-content-main">
            <Alert type="warning" show-icon>所选样品都将使用选择的模板生成报告</Alert>
            <Row>
              <!--样品信息-->
              <Col span="24" style="margin-bottom: 10px">
                <el-table
                  :data="tableData"
                  :default-sort="{prop: 'date', order: 'descending'}"
                  stripe
                  border
                  size="small"
                  highlight-current-row
                  height="350"
                  style="width: 100%">
                  <el-table-column prop="name" label="样品名称" sortable></el-table-column>
                  <el-table-column prop="code" label="样品编号" sortable></el-table-column>
                  <el-table-column prop="reportCode" label="报告编号" sortable>
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.reportCode" placeholder="留白则自动生成" size="small"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </Col>
              <!--报告模板-->
              <Col span="24">
                <ReportTemplate ref="reportTemplate" @on-result-change="_templateResultChange"></ReportTemplate>
              </Col>
            </Row>
          </div>
        </div>
      </div>
      <div slot="footer">
        <ModalFooter ref="footerModal" :footer="footerBtn" @on-result-change="_footerResult"></ModalFooter>
      </div>
    </Modal>
    <Modal v-model="showIssueModal">
      <p slot="header">请选择签发日期</p>签发日期:
      <DatePicker v-model="issueDateTemp"
                  :editable="false"
                  placeholder="请选择签发日期"
                  style="width:400px"
                  @on-change='_issueChange'>
      </DatePicker>
      <div slot="footer" class="btn-width">
        <Button @click="_issueCancel">取消</Button>
        <Button :loading="isLoading" type="primary" @click="_issueOk">确定</Button>
      </div>
    </Modal>
    <!--生成报告的进度条-->
<!--    <ProgressByReport ref="progressModal" @on-result-change="_closeResult"/>-->
  </div>
</template>
<script>
import ModalFooter from '../../../components/base/modalFooter'
import { meterSample } from '../../../api'
import ReportTemplate from './ReportTemplate'
// import ProgressByReport from '../../ProgressByReport'

/**
 * 样品列表--生成报告或者选择模板生成报告
 */
export default {
  components: {
    ModalFooter,
    ReportTemplate
    // ProgressByReport
  },
  data() {
    return {
      selectIds: [],
      showBatchModal: false,
      isLoading: false,
      footerBtn: [
        { type: '', id: '', name: '取消' },
        { type: 'primary', id: '', name: '确定' }
      ],
      reportModelId: '',
      // 样品数据
      tableData: [],
      // 签发日期
      issueDateTemp: '',
      issueDate: '',
      showIssueModal: false
    }
  },
  methods: {
    _open(data) {
      this.tableData = data
      this.showBatchModal = true
      this._reportTemplate()
      this.reportModelId = ''
      this.isLoading = false
    },
    // 报告模板
    _reportTemplate() {
      this.$refs.reportTemplate._open()
    },
    _footerResult(name) {
      switch (name) {
        case '确定':
          this._creatReport()
          break
        case '取消':
          this.showBatchModal = false
          break
      }
    },
    _templateResultChange(selectData) {
      this.reportModelId = selectData.id
    },
    _issueChange(data) {
      if (data) {
        this.issueDate = data
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _creatReport() {
      if (this.reportModelId === '') {
        this.$Message.warning('请选择报告模板!')
        this._hideLoading()
      } else {
        console.log(this.tableData)
        console.log(this.reportModelId)

        this._createOk({
          sampleList: this.tableData,
          reportModelId: this.reportModelId
        })
        // 判断字典中是否配置报告编制日期
        // this.$store
        //   .dispatch('LmsBaseDict/getItem', '编制时选择签发日期')
        //   .then(() => {
        //     const result = this.$store.state.LmsBaseDict.item
        //     if (result.length !== 0 && result[0].code === 'yes') {
        //       // 配置为yes弹出
        //       this.showIssueModal = true
        //       this.issueDateTemp = ''
        //       this.issueDate = ''
        //       this._hideLoading()
        //     } else {
        //       // 配置为no不弹出
        //       this.showIssueModal = false
        //       this.issueDate = ''
        //       this._createOk()
        //     }
        //   })
      }
    },

    _createOk: async function(data) {
      const result = await meterSample.generateReport(data)
      if (result) {
        this.$Message.success('编制成功!')
        this.$emit('on-result-change')
        this.showBatchModal = false
      }
    },

    _issueCancel() {
      this.showIssueModal = false
    },
    // 选择时间ok
    _issueOk() {
      this.isLoading = true
      this.showIssueModal = false
      this._createOk()
    },
    _closeResult() {
      this.showBatchModal = false
      this.$emit('on-result-change')
    }
  }
}
</script>
