<template>
  <div>
    <Modal v-model="showModal" width="1200" class="modal-footer-none zIndex-1000">
      <p slot="header">历史版本</p>
      <Row>
        <Col span="24">
          <PTVXETable ref="pageTable" :pageColumns="pageColumns" :tableHeight="tableHeight"
                      @on-result-change="_tableResultChange" :getPage="getPage" :iconMsg="iconMsg" hide-checkbox>
            <vxe-table-column
              :field="item.key"
              :title="item.title"
              :min-width="item.width?item.width:200"
              :fixed="item.fixed?item.fixed:undefined"
              v-for="item in pageColumns"
              :key="item.key" sortable>
              <template slot-scope="scope">
                <span v-if="item.dateTime">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):''}}</span>
                <span v-else>{{scope.row[item.key]}}</span>
              </template>
            </vxe-table-column>
          </PTVXETable>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
/**
 * 报告的历史版本
 */
import global from '../../../api/config'
// import { meterSample } from '../../../api'
export default {
  data() {
    return {
      iconMsg: [],
      checkOut: [{ type: 'arrow-return-left', id: '', name: '签入' }],
      defVal: [
        { type: 'android-image', id: '', name: '预览' },
        { type: 'ios-download', id: '', name: '下载' }
      ],
      pageColumns: [
        { title: '报告编号', key: 'reportSn', width: 180 },
        { title: '变更人', key: 'maker' },
        { title: '变更时间', key: 'ctime', width: 240, dateTime: true },
        { title: '版本', key: 'version' }
      ],
      getPage: {},
      reportId: '',
      showModal: false
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('tableModal')
    }
  },
  methods: {
    _open(reportId, reportType) {
      this.showModal = true
      this.reportId = reportId
      this.iconMsg = []
      // 报告编制、报告档案模块调用
      if (
        reportType === 'FOOD_REPORT_MAKE' ||
        reportType === 'FOOD_REPORT_MANAGE'
      ) {
        this.iconMsg = this.defVal.concat(this.checkOut)
      } else {
        this.iconMsg = this.defVal
      }
      this._page()
    },
    _page() {
      const data = {
        reportId: this.reportId
      }
      // this.$refs.pageTable._page('', 'FoodSampleReportDetail/page', data)
      console.log(data)
      // const result = meterSample.pageHis(data)
      // console.log('result', result)
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = this.$store.state.FoodSampleReportDetail.page
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        case 'changeSize':
          this._page()
          break
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '预览':
          this._viewReport(data.id)
          break
        case '下载':
          this._download(data.id)
          break
        case '签入':
          this._checkOut(data.id)
          break
      }
    },
    // 下载
    _download(id) {
      window.open(
        global.baseURL + '/food/v1/sample_report/download_by_report_id/' + id,
        '_blank'
      )
    },
    // 预览
    _viewReport(id) {
      this.$store.dispatch('FoodSampleReport/getByPreviewId', id).then(() => {
        const data = this.$store.state.FoodSampleReport.model
        if (data !== undefined) {
          this.$openWindowModeless({
            objectKey: data.objectKey,
            id: id,
            isReport: 0
          })
        }
      })
    },
    _checkOut(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定该操作?',
        onOk: () => {
          this.$store
            .dispatch('FoodSampleReportDetail/checkOut', { id })
            .then(() => {
              if (this.$store.state.FoodSampleReportDetail.success) {
                this.$Message.success('操作成功！')
                this._page()
                this.$emit('on-result-change')
              }
            })
        }
      })
    }
  }
}
</script>
