<template>
  <div>
    <Modal v-model="showEquipmentModal" v-drag width="900" class="modal-footer-none zIndex-1100">
      <p slot="header">
        查看仪器信息
      </p>
      <div>
        <Row>
          <!--查询-->
          <Col span="24">
            <Form v-show="searchOpen" id="equip-rel-detail-form" inline onsubmit="return false" :label-width="70">
              <label class="label-sign" />
              <Form-item label="仪器名称:">
                <Input
                  name="equipName"
                  placeholder="请输入仪器名称"
                  style="width: 200px"
                  clearable
                  @on-enter="_search"
                />
              </Form-item>
              <Form-item class="search-btn">
                <Button type="primary" @click="_search">
                  搜索
                </Button>
              </Form-item>
            </Form>
          </Col>
          <!--操作-->
          <Col span="24">
            <btn-list :msg="btn" :open="searchOpen" class="contHide" :show-search-btn="true" @on-result-change="_btnClick" />
          </Col>
          <!-- 表格 -->
          <Col span="24">
            <element-table
              ref="pageTable"
              :table-height="tableHeight"
              :get-page="getPage"
              show-check-box
              select-data
              @on-result-change="_tableResultChange"
            >
              <el-table-column
                v-for="item in pageColumns"
                :key="item.key"
                show-overflow-tooltip
                :prop="item.key"
                align="center"
                :label="item.title"
                :min-width="item.width"
                :fixed="item.fixed?item.fixed:undefined"
              >
                <template slot-scope="scope">
                  <span v-if="item.date">{{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):'' }}</span>
                  <span v-else>{{ scope.row[item.key] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                :width="60"
                fixed="right"
              >
                <template slot-scope="scope">
                  <icon-list :msg="iconMsg" :row-data="scope.row" @on-result-change="_iconClick" />
                </template>
              </el-table-column>
            </element-table>
          </Col>
        </Row>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 操作日志-委托
 */
import { drugItem } from '../../../../../api'

export default {
  data() {
    return {
      showEquipmentModal: false,
      searchOpen: false,
      getPage: {},
      placeholder: '',
      pageColumns: [
        { title: '仪器编号', key: 'labNum', align: 'center', width: 150 },
        { title: '仪器名称', key: 'equipName', align: 'center', width: 150 },
        { title: '规格型号', key: 'spec', align: 'center', width: 150 },
        { title: '采集类型', key: 'collectionType', align: 'center' },
        { title: '采集地址', key: 'collectionAddress', align: 'center' },
        { title: '仪器品牌', key: 'brand', align: 'center' }
      ],
      formObj: {
        origin: '',
        sampleId: ''
      },
      btn: [{ id: '', type: 'error', name: '删除' }],
      footerList: [{ id: '', name: '关闭', type: '' }],
      selectIds: [],
      selectData: [],
      iconMsg: [{ id: '', type: 'pt-a-trash', name: '删除' }],
      itemId: []
    }
  },
  computed: {
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('', 360)
      } else {
        return this.$tableHeight('', 340)
      }
    }
  },
  methods: {
    _open(id) {
      this.showEquipmentModal = true
      this.formObj.origin = ''
      this.itemId = id
      this._hideLoading()
      this._clearPage()
      this._page()
    },
    _clearPage() {
      $('#equip-location-rel-detail-form')
        .find('input')
        .each(function() {
          $(this).val('')
        })
    },
    async _page() {
      const data = this.$serialize('equip-location-rel-detail-form')
      data.itemId = this.itemId
      const result = await drugItem.externalRelDetail(data)
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _search() {
      this.$refs.pageTable._pageChange(1)
    },
    _searchParams(formId) {
      return this.$refs.pageTable._searchParams(formId)
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'selectData':
          this._selectData(data)
          break
      }
    },
    _selectData(data) {
      const ids = []
      data.forEach(item => {
        ids.push(item.id)
      })
      this.selectData = data
      this.selectIds = ids
    },
    _btnClick(msg) {
      switch (msg) {
        case '删除':
          this._deleteById()
          break
        case 'search':
          this.searchOpen = !this.searchOpen
          break
      }
    },
    _iconClick(msg, data) {
      switch (msg) {
        case '删除':
          this._deleteByIds(data.id)
          break
      }
    },
    _deleteById() {
      const ids = this.selectIds
      if (ids.length === 0) {
        this.$Message.warning('请至少选择一条数据!')
      } else {
        this._deleteByIds(ids, `确定要删除 ${ids.length} 条数据吗?`)
      }
    },
    _deleteByIds(ids, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content || `确定要删除该条数据吗?`,
        onOk: async () => {
          const result = await drugItem.externalRelDelete(ids)
          if (result) {
            this._search()
            this.$emit('on-result-change')
            this.$Message.success('删除成功!')
          }
        }
      })
    },
    _footerResult(name) {
      switch (name) {
        case '关闭':
          this._cancel()
          break
      }
    },
    _cancel() {
      this.showEquipmentModal = false
    },
    _ok() {
      this.$emit('on-result-change')
      this.showEquipmentModal = false
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    }
  }
}
</script>
