<template>
  <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.title" @on-enter="_formSearch" placeholder="请输入模板名称" clearable></Input>
          </Form-item>
          <Form-item class="search-item" label="委托编号:">
            <Input v-model="formObj.entrustCode" @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" :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>
        </PTVXETable>
      </Col>
    </Row>
    <ItemOriginalRecordEdit ref="recordEditModal"></ItemOriginalRecordEdit>
    <ItemView ref="itemViewModal"></ItemView>
  </div>
</template>
<script>
/**
 * 原始记录查看
 */
import Global from '../../../api/config'
import { soilReport, soilTest } from '../../../api'
import ItemOriginalRecordEdit from './OriginalRecordEdit'
import ItemView from './ItemView'

export default {
  components: {
    ItemOriginalRecordEdit,
    ItemView
  },
  data() {
    return {
      currentComponent: '',
      getPage: {},
      btn: [],
      selectIds: [],
      iconMsg: [
        {
          type: 'md-create',
          id: '',
          name: '编辑'
        },
        {
          type: 'ios-book',
          id: '',
          name: '查看原始记录'
        },
        {
          type: 'ios-list',
          id: '',
          name: '查看试验项目'
        },
        { type: 'md-trash', id: '', name: '删除' }
      ],
      pageColumns: [
        { title: '模板名称', key: 'title' },
        { title: '委托编号', key: 'entrustCode' },
        { title: '填写人', key: 'uname' },
        { title: '创建时间', key: 'ctime', dateTime: true }
      ],
      formObj: {
        entrustId: ''
      },
      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 'search':
            this.searchOpen = !this.searchOpen
            break
        }
      })
    },
    _iconClick(res, data, currentComponent) {
      this.currentComponent = currentComponent
      this.$nextTick(() => {
        switch (res) {
          case '编辑':
            this._reportEdit(data)
            break
          case '查看原始记录':
            this._reportView(data)
            // this._recordView(data.originalRecordId)
            break
          case '查看试验项目':
            this._itemView(data.id)
            break
          case '删除':
            this._deleteByIds([data.id])
            break
        }
      })
    },
    // 查看试验项目
    _itemView(id) {
      this.$refs.itemViewModal._open(id)
    },
    _reportView(data) {
      if (data.objectKey) {
        this._reportMakeLook(data)
      } else {
        this._recordView(data.originalRecordId)
      }
    },
    _reportEdit(data) {
      if (data.objectKey) {
        this._reportMakeLook(data)
      } else {
        this.$refs.recordEditModal._openWithType(
          data.originalRecordId,
          'ENVTESTMAKEEDIT'
        )
      }
    },
    _reportMakeLook: async function(data) {
      console.log(data)
      const result = await soilReport.originalRecordGetById(data.id)
      if (result) {
        this._viewReport(result)
      }
    },
    _viewReport(data) {
      if (data) {
        this.$openWindowModeless({
          objectKey: data.objectKey,
          idType: 10,
          id: data.id,
          isReport: 4
        })
      }
    },
    // 查看原始记录
    _recordView(originalRecordId) {
      let recordUrl = ''
      if (process.env.NODE_ENV === 'production') {
        recordUrl = 'http://record.patzn.com'
      } else {
        recordUrl = Global.recordURL
      }
      // eslint-disable-next-line no-undef
      layx.iframe(
        'labRecordWriteOriView',
        '原始记录预览',
        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.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
      }
    },
    // 删除原始记录
    _deleteByIds(ids, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content || '确定删除该记录？',
        onOk: () => {
          this._deleteOk(ids)
        }
      })
    },
    _deleteOk: async function(ids) {
      const result = await soilTest.deleteRecord(ids)
      if (result) {
        this.$Message.success('删除成功')
        this._page()
      }
    }
  }
}
</script>
