<template>
  <!--仓库-->
  <Modal v-model="showModal" width="1000">
    <p slot="header">仪器领用</p>
    <Form :label-width="60" onsubmit="return false" inline>
      <Form-item label="仪器名称">
        <Input v-model="formObj.name" placeholder="请输入仪器名称,回车查询" icon="ios-search-strong"
               @on-enter="_search"/>
      </Form-item>
      <Form-item class="search-btn" style="margin-left: -10px">
        <Button type="primary" @click="_search">搜索</Button>
      </Form-item>
    </Form>
    <Row>
      <Col span="24">
        <PTVXETable ref="pageTable" :table-height="tableHeight"
                    :get-page="getPage" select-data @on-result-change="_tableResultChange">
          <vxe-table-column
            v-for="item in pageColumns"
            :key="item.key"
            :field="item.key"
            :title="item.title"
            :min-width="item.width?item.width:200"
            :fixed="item.fixed?item.fixed:undefined" sortable>
            <template slot-scope="scope">
              <div v-if="item.date">{{$dateformat(scope.row[item.key],'yyyy-mm-dd')}}</div>
              <div v-else>{{scope.row[item.key]}}</div>
            </template>
          </vxe-table-column>
        </PTVXETable>
      </Col>
    </Row>
    <div slot="footer">
      <ModalFooter ref="footerModal" :footer="footerList" @on-result-change="_footerResult"></ModalFooter>
    </div>
  </Modal>
</template>
<script>
/**
 * 选择车辆
 */
import ModalFooter from '../../../components/base/modalFooter'
import { meterSample } from '../../../api'
export default {
  components: {
    ModalFooter
  },
  data() {
    return {
      showModal: false,
      license: '',
      selectNames: '',
      selectIds: '',
      getPage: {},
      formObj: {
        sampleId: '',
        name: ''
      },
      tableHeight: '300',
      pageColumns: [
        { title: '仪器名称', key: 'name' },
        { title: '测量范围', key: 'measuringRange' },
        { title: '不确定度/准确度', key: 'uncertaintyAccuray' }
      ],
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '确定', type: 'primary' }
      ]
    }
  },
  methods: {
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          this._ok()
          break
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _open(sampleId) {
      this.showModal = true
      this.formObj.sampleId = sampleId
      this._page()
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await meterSample.pageInstrutEdit(this.formObj)
      console.log('result', result)
      if (result) {
        this.getPage = result
        this.$refs.pageTable._hideLoading()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.selectIds = []
          this.selectNames = []
          this.getPage = this.$store.state.LmsCarInfo.page
          break
        case 'selectData':
          const nameList = []
          const idList = []
          for (let i = 0; i < data.length; i++) {
            nameList.push(data[i].license)
            idList.push(data[i].id)
          }
          this.selectIds = idList
          this.selectNames = nameList
          break
        case 'changeSize':
          this._page()
          break
      }
    },
    _ok() {
      this.$emit('on-result-change', {
        ids: this.selectIds,
        names: this.selectNames
      })
      this.showModal = false
      this._hideLoading()
    },
    _cancel() {
      this.showModal = false
      this._hideLoading()
    },
    _search() {
      // tree查询
      this._page()
    }
  }
}
</script>
