<template>
<div>
  <Modal v-model="showUserGroupModal">
    <p slot="header">
      {{ modalTitle }}
    </p>
    <Row>
      <!--查询条件-->
      <Col span="24">
        <Form id="test-item-form" :label-width="90" inline onsubmit="return false">
          <label class="label-sign" />
          <Form-item :label-width="70" label="样品名称" >
            <Input
              v-model="name"
              placeholder="请输入样品名称"
              style="width: 100%"
              @on-enter="_pageChange(1)"
            />
          </Form-item>
          <Form-item label="检测依据名称">
            <Input
              v-model="basis"
              placeholder="请输入检测依据名称"
              style="width: 100%"
              @on-enter="_pageChange(1)"
            />
          </Form-item>
        </Form>
      </Col>
      <Col span="24" style="margin-bottom: 10px">
        <el-table
          :height="300"
          :data="getPage"
          border
          size="small"
          highlight-current-row
          style="width: 100%"
          @row-click="_rowChange"
          @row-dblclick="_dbClick"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.key"
            :prop="item.key"
            :label="item.title"
            :min-width="item.width"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="item.key==='status'">
                {{ scope.row[item.key]?scope.row[item.key].display:'' }}
              </span>
              <span v-else>{{ scope.row[item.key] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </Col>
      <Col span="24">
        <Page
          :total="total"
          :page-size="size"
          placement="top"
          show-total
          show-elevator
          show-sizer
          @on-change="_pageChange"
          @on-page-size-change="_pageRows"
        />
        <div style="clear: both" />
      </Col>
    </Row>
    <div slot="footer" class="btn-width">
      <Button style="margin-left: 8px" @click="_cancel">
        取消
      </Button>
      <Button type="primary" @click="_ok">
        确定
      </Button>
    </div>
  </Modal>
</div>
</template>

<script>
// import { meterAptitude } from '../../../api'
import { meterManage } from '../../../api'
export default {
  name: 'EditModal',
  data() {
    return {
      loading: true,
      pageParams: { rows: 20 },
      total: 0,
      size: 0,
      pageColumns: [
        { title: '样品名称', key: 'name' },
        { title: '检定依据', key: 'code' },
        { title: '检定依据名称', key: 'basis' }
      ],
      getPage: [],
      showUserGroupModal: false,
      modalTitle: '',
      currentRowData: {},
      name: '',
      code: '',
      basis: ''
    }
  },
  methods: {
    _open() {
      this.modalTitle = '选择检测依据'
      this.name = ''
      this.code = ''
      this.basis = ''
      this._judge()
    },
    _judge() {
      this.showUserGroupModal = true
      this.currentRowData = {}
      this._page()
    },
    _page: async function() {
      const result = await meterManage.page(this._searchParams())
      if (result) {
        console.log('查询结果')
        console.log(result)
        this.getPage = result.records
        this.total = result.total
        this.size = result.size
        this.loading = false
        console.log(this.getPage)
      }
    },
    _pageChange(page) {
      this.pageParams.page = page
      this._page()
    },
    _pageRows(rows) {
      this.pageParams.rows = rows
      this._page()
    },
    _searchParams() {
      const data = this.$serialize('test-item-form')
      if (this.name) {
        data.name = this.name
      }
      if (this.code) {
        data.code = this.code
      }
      if (this.basis) {
        data.basis = this.basis
      }
      return this.$extend(data, this.pageParams)
    },
    _search() {
      this._page()
    },
    _rowChange(data) {
      this.currentRowData = data // 选中的行数据;
    },
    _cancel() {
      this.showUserGroupModal = false
    },
    _ok() {
      if (JSON.stringify(this.currentRowData) === '{}') {
        switch (this.modalTitle) {
          case '选择检测依据':
            this.$Message.warning('请选择一条检测依据！')
            break
        }
      } else {
        this.$emit('on-result-change', this.currentRowData)
        this.showUserGroupModal = false
      }
    },
    // 双击
    _dbClick(data, event) {
      this.currentRowData = data
      // 选中的行数据;
      this._ok()
    }
  }
}
</script>

<style scoped>
</style>
