<template>
<div>
  <Modal v-model="showUserGroupModal" width="800">
    <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="检测依据名称">
            <Input
              v-model="name"
              @on-enter="_pageChange(1)"
              placeholder="请输入检测依据名称"
              style="width: 100%"
            />
          </Form-item>
        </Form>
      </Col>
      <Col span="24" style="margin-bottom: 10px">
        <el-table
          :data="getPage"
          @row-click="_rowChange"
          @row-dblclick="_dbClick"
          border
          size="small"
          highlight-current-row
          style="width: 100%"
        >
          <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"
          @on-change="_pageChange"
          @on-page-size-change="_pageRows"
          placement="top"
          show-total
          show-elevator
          show-sizer
        />
        <div style="clear: both" />
      </Col>
    </Row>
    <div slot="footer" class="btn-width">
      <Button @click="_cancel" style="margin-left: 8px">
        取消
      </Button>
      <Button @click="_ok" type="primary">
        确定
      </Button>
    </div>
  </Modal>
</div>
</template>

<script>
// import { meterAptitude } from '../../../api'
import { meterAptitude } from '../../../api'
export default {
  name: 'EditModal',
  data() {
    return {
      formObj: {
        name: undefined,
        code: undefined
      },
      loading: true,
      pageParams: { rows: 20 },
      total: 0,
      size: 0,
      pageColumns: [
        { title: '检定依据', key: 'verification', width: 120 },
        { title: '检定依据名称', key: 'name', width: 140 }
        // { title: '传真', key: 'fax', width: 120 },
        // { title: '详细地址', key: 'address', width: 250 },
        // { title: '登记日期', key: 'edate', width: 120, date: true },
        // { title: '要求完成时间', key: 'odate', width: 120, date: true },
        // { title: '折扣', key: 'discount', width: 120 },
        // { title: '总价', key: 'totalPrice', width: 120 },
        // { title: '折扣价', key: 'discountPrice', width: 120 },
        // { title: '备注', key: 'remark' }
      ],
      getPage: [],
      showUserGroupModal: false,
      modalTitle: '',
      currentRowData: {},
      name: '',
      code: '',
      verification: ''
    }
  },
  methods: {
    _open() {
      this.modalTitle = '选择检测依据'
      this.name = ''
      this.code = ''
      this.verification = ''
      this._judge()
    },
    _judge() {
      this.showUserGroupModal = true
      this.currentRowData = {}
      this._page()
    },
    _page: async function() {
      const result = await meterAptitude.page(this._searchParams())
      if (result) {
        this.getPage = result.records
        console.log(this.getPage)
        for (let i = 0; i < this.getPage.length; i++) {
          this.getPage[i].verification =
            this.getPage[i].code + this.getPage[i].name
        }
        this.total = result.total
        this.size = result.size
        this.loading = false
      }
    },
    _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.verification) {
        data.verification = this.verification
      }
      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>
