<template>
  <div>
    <Modal v-model="showModal" :mask-closable="false" :width="1000">
      <p slot="header">
        选择仪器
      </p>
      <!--内容-->
      <Row>
        <Col span="24">
        <Form inline onsubmit="return false" :label-width="90">
          <Form-item class="search-item" label="仪器名称:" style="margin-bottom: 0">
            <Input v-model="formObj.name" placeholder="请输入仪器名称" @on-enter="_formSearch" />
          </Form-item>
          <Form-item class="search-btn">
            <Button type="primary" @click="_formSearch">
              搜索
            </Button>
          </Form-item>
        </Form>
        </Col>
        <!-- 表格 -->
        <Col span="24" style="margin-bottom: 10px">
        <element-table
          ref="pageTable"
          :page-columns="pageColumns"
          :get-page="getPage"
          :table-height="360"
          :icon-msg="iconMsg"
          :opt-col-width="80"
          click
          @on-result-change="_tableResultChange"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.key"
            show-overflow-tooltip
            :prop="item.key"
            :label="item.title"
            :min-width="item.width"
            :fixed="item.fixed?item.fixed:undefined"
          >
            <template slot-scope="scope">
              <div v-if="item.date">
                {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):'' }}
              </div>
              <div v-else-if="item.key==='status'">
                {{ status[scope.row.status] ? status[scope.row.status]:'' }}
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
      <div slot="footer">
        <Button style="margin-left: 8px" @click="_cancel">
          取消
        </Button>
        <Button type="primary" @click="_ok">
          提交
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { equipInfo } from '../../../../api'
export default {
  data() {
    return {
      showModal: false,
      formObj: {
        name: ''
      },
      selectRow: {},
      status: {
        '0': '闲置',
        '1': '在用',
        '2': '保养中',
        '3': '维修中',
        '4': '已报废'
      },
      getPage: {},
      pageColumns: [
        { title: '仪器状态', key: 'status', width: 160 },
        { title: '供应商名称', key: 'supplierName', width: 160 },
        { title: '仪器类别', key: 'className', width: 160 },
        { title: '仪器名称', key: 'name', width: 160 },
        { title: '规格型号', key: 'spec', width: 160 },
        { title: '仪器品牌', key: 'brand', width: 160 },
        { title: '仪器编号', key: 'equipNum', width: 160 },
        { title: '证书编号', key: 'ceNum', width: 160 },
        { title: '实验室编号', key: 'labNum', width: 160 },
        { title: '使用科别', key: 'departmentName', width: 160 },
        { title: '使用地点', key: 'locationName', width: 160 },
        { title: '检定周期（月）', key: 'period', width: 160 },
        { title: '购买日期', key: 'buyDate', width: 160, date: true },
        { title: '有效日期', key: 'effectDate', width: 160, date: true }
      ]
    }
  },
  methods: {
    _open() {
      this.showModal = true
      this._page()
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await equipInfo.page(this.$serializeForm(this.formObj))
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'dbSelect':
          this.$emit('on-result-change', data)
          this.showModal = false
          break
        case 'click':
          this.selectRow = data
          break
      }
    },
    _cancel() {
      this.showModal = false
    },
    _ok() {
      this.$emit('on-result-change', this.selectRow)
      this.showModal = false
    }
  }
}
</script>
