<template>
  <div>
    <Modal v-model="showModal" @on-visible-change="_visibleChange"
           width="1200" class="zIndex-900 modal-footer-none">
      <div slot="header"><p>查看原始记录</p></div>
    <Row>
      <!--查询-->
      <Col span="24">
        <Form :label-width="80" v-show="searchOpen" inline onsubmit="return false">
          <label class="label-sign"></label>
          <Form-item class="search-item" label="模板名称:">
            <Input v-model="formObj.templateTitle" @on-enter="_formSearch" placeholder="请输入模板名称" clearable></Input>
          </Form-item>
          <Form-item class="search-item" label="委托单位:">
            <Input v-model="formObj.cusNames" @on-enter="_formSearch" placeholder="请输入委托单位" clearable></Input>
          </Form-item>
          <Form-item class="search-btn">
            <Button @click="_formSearch" type="primary">搜索</Button>
          </Form-item>
        </Form>
      </Col>
      <!--操作-->
      <Col span="24">
        <btn-list  :open="searchOpen" :msg="btn" :showSearchBtn="true" @on-result-change="_btnClick"
                 class="contHide"></btn-list>
      </Col>
      <!-- 表格 -->
      <Col span="24">
        <PTVXETable ref="pageTable" :tableHeight="tableHeight"
                    @on-result-change="_tableResultChange" :icon-msg="iconMsg" :getPage="getPage">
          <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">
              <div v-if="item.dateTime">
                {{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM'):''}}
              </div>
              <div v-else>{{scope.row[item.key]}}</div>
            </template>
          </vxe-table-column>
<!--          <template slot="col">-->
<!--            <vxe-table-column-->
<!--              :width="190"-->
<!--              title="操作"-->
<!--              align="center"-->
<!--              fixed="right">-->
<!--              <template slot-scope="scope">-->
<!--                <VXEIconList :msg="(scope.row.hasInputItem===1) ? iconMsg : iconMsgDisable"-->
<!--                             @on-result-change="_iconClick" :rowData="scope.row"></VXEIconList>-->
<!--              </template>-->
<!--            </vxe-table-column>-->
<!--          </template>-->
        </PTVXETable>
      </Col>
    </Row>
    </Modal>
    <ItemOriginalRecordEdit ref="recordEditModal"></ItemOriginalRecordEdit>
    <ItemView ref="itemViewModal"></ItemView>
    <ReportTemplateModal ref="templateModal" @on-result-change="_page"></ReportTemplateModal>
  </div>
</template>
<script>
/**
 * 原始记录查看
 */
import Global from '../../../api/config'
import { soilSample, soilTest } from '../../../api'
import ItemOriginalRecordEdit from './OriginalRecordEdit'
import ItemView from './ItemView'
import ReportTemplateModal from './ReportTemplateModal'

export default {
  components: {
    ItemOriginalRecordEdit,
    ItemView,
    ReportTemplateModal
  },
  data() {
    return {
      currentComponent: '',
      getPage: {},
      showModal: false,
      btn: [{ type: 'primary', id: '', name: '生成报告' }],
      selectIds: [],
      iconMsg: [
        {
          type: 'md-create',
          id: '',
          name: '编辑'
        },
        {
          type: 'ios-book',
          id: '',
          name: '查看原始记录'
        },
        {
          type: 'ios-list',
          id: '',
          name: '查看试验项目'
        }
        //   {
        //     type: 'erlenmeyer-flask',
        //     id: '',
        //     name: '查看样品',
        //     componentName: 'SampleView'
        //   },
        //   {
        //     type: 'document-text',
        //     id: '',
        //     name: '查看检测项目',
        //     componentName: 'ItemView'
        //   },
        //   { type: 'cloud', id: '', name: '附件', componentName: 'FileManage' },
        //   { type: 'trash-a', id: '', name: '删除' },
        //   {
        //     type: 'ios-clock',
        //     id: '',
        //     name: '操作记录',
        //     componentName: 'ElnFormRecord'
        //   }
      ],
      iconMsgDisable: [
        { type: 'md-create', id: '', name: '编辑', disabled: true },
        {
          type: '',
          id: '',
          name: '查看原始记录',
          componentName: 'OriginalItemView'
        },
        {
          type: 'ios-list',
          id: '',
          name: '查看试验项目'
        }
        // {
        //   type: 'document-text',
        //   id: '',
        //   name: '查看检测项目',
        //   componentName: 'ItemView'
        // },
        // { type: 'cloud', id: '', name: '附件', componentName: 'FileManage' },
        // { type: 'trash-a', id: '', name: '删除', disabled: true },
        // {
        //   type: 'ios-clock',
        //   id: '',
        //   name: '操作记录',
        //   componentName: 'ElnFormRecord'
        // }
      ],
      pageColumns: [
        { title: '模板名称', key: 'title' },
        { title: '委托编号', key: 'entrustCode' },
        { title: '填写人', key: 'uname' },
        { title: '创建时间', key: 'ctime', dateTime: true }
      ],
      formObj: {
        entrustId: '',
        batchNos: '',
        sampleNums: '',
        templateTitle: '',
        fillInTimeBegin: '',
        fillInTimeEnd: '',
        cusNames: '',
        codes: '',
        itemNames: '',
        testAccordings: ''
      },
      searchOpen: false
    }
  },
  computed: {
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('', 340)
      } else {
        return this.$tableHeight('tabNoSearch')
      }
    }
  },
  mounted() {
    this._page()
  },
  methods: {
    _componentResult(data) {
      switch (this.currentComponent) {
        case 'EditDateModal':
          this._updateDate(data)
          break
        default:
          this._page()
      }
    },
    _updateDate(date) {
      this.$store
        .dispatch('PrintForm/updateTimeBatch', {
          ids: this.selectIds.join(','),
          fillInTime: date
        })
        .then(() => {
          if (this.$store.state.PrintForm.success) {
            this._page()
            this.$Message.success('更新成功!')
          }
        })
    },
    _btnClick(msg, componentName) {
      this.currentComponent = componentName
      this.$nextTick(function() {
        switch (msg) {
          case '纠正填写时间':
            this._editWriteTime()
            break
          case '设置填写人乙':
            this._setAnotherTester()
            break
          case '生成报告':
            this._reportMake()
            break
          case '删除':
            this._batchDelete()
            break
          case 'search':
            this.searchOpen = !this.searchOpen
            break
        }
      })
    },
    _visibleChange(data) {
      if (data === false) {
        this.$emit('on-result-change')
      }
    },
    _reportMake(data) {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请至少选择一条数据')
      } else {
        this.$Modal.confirm({
          title: '提示',
          content: '确定这' + this.selectIds.length + '条数据生成报告',
          onOk: () => {
            this.openTooltip()
            this._reportMakeOk()
          }
        })
      }
    },
    _reportMakeOk: async function() {
      const result = await soilSample.reportMake({
        entrustId: this.formObj.entrustId,
        originalList: this.selectIds
      })
      if (result) {
        this.$Message.success('报告成功生成')
        this._page()
      }
    },
    openTooltip() {
      this.$notify.info({
        title: '提示',
        message: '正在生成，请稍后',
        duration: 3000
      })
    },
    // 设置填写人乙
    _setAnotherTester() {
      if (this.selectIds.length === 0) {
        this.$msgTip('warning')
      } else {
        this.$refs.testerModal._open(this.selectIds)
      }
    },
    _editWriteTime() {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请至少选择一条数据')
      } else {
        this.$refs.refModal._open('填写时间')
      }
    },
    _dateChange(data) {
      this.formObj.fillInTimeBegin = data[0]
      this.formObj.fillInTimeEnd = data[1]
    },
    _iconClick(res, data, currentComponent) {
      this.currentComponent = currentComponent
      this.$nextTick(() => {
        switch (res) {
          case '编辑':
            this.$refs.recordEditModal._openWithType(
              data.originalRecordId,
              'ENVTESTMAKEEDIT'
            )
            break
          case '查看原始记录':
            this._recordView(data.originalRecordId)
            break
          case '查看试验项目':
            this._itemView(data.id)
            break
          case '查看检测项目':
            this.$refs.refModal._open(data)
            break
          case '查看样品':
            this.$refs.refModal._open(data.id)
            break
          case '附件':
            this.$refs.refModal._open(data.id, 'originalId')
            break
          case '删除':
            this._deleteByIds([data.id])
            break
          case '操作记录':
            this.$refs.refModal._open(data.id)
            break
        }
      })
    },
    // 查看试验项目
    _itemView(id) {
      this.$refs.itemViewModal._open(id)
    },
    // 查看原始记录
    _recordView(originalRecordId) {
      // layx.iframe('labRecordWriteOriView', '原始记录预览', Global.recordURL + '/print/v1/form/' + originalRecordId, {
      // eslint-disable-next-line no-undef
      layx.iframe(
        'labRecordWriteOriView',
        '原始记录预览',
        Global.recordURL +
          '/print/v1/form/' +
          originalRecordId +
          '?type=ENVTESTMAKE',
        {
          event: {
            onload: {
              after: function(layxWindow, winform) {
                // eslint-disable-next-line no-undef
                layx.max(winform.id)
              }
            }
          }
        }
      )
    },
    _open(entrustId) {
      this.showModal = true
      this.formObj.entrustId = entrustId
      this._page()
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = this.$store.state.EnvItem.page
          break
        case 'selectIds':
          this.selectIds = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData, data.componentName)
          break
        case 'changeSize':
          this._page()
          break
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await soilTest.recordPage(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.$refs.pageTable._hideLoading()
        this.getPage = result
      }
    },
    // 批量删除原始记录
    _batchDelete() {
      if (this.selectIds.length > 0) {
        const content = '确定删除这' + this.selectIds.length + '条数据？'
        this._deleteByIds(this.selectIds, content)
      } else {
        this.$msgTip('warning')
      }
    },
    _deleteByIds(ids, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content || '确定删除该记录？',
        onOk: () => {
          this.$store.dispatch('EnvItem/deleteOriRecord', ids).then(() => {
            if (this.$store.state.EnvItem.success) {
              this._page()
              this.$Message.success('删除成功!')
            }
          })
        }
      })
    }
  }
}
</script>
