<template>
  <div>
    <Modal v-model="showUserGroupModal">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <Row>
        <!--查询条件-->
        <Col span="24">
        <Form id="user-marshalling-form" onsubmit="return false">
          <Form-item>
            <Input
              v-model="name"
              placeholder="请输入物料名称,回车查询"
              style="width:100%"
              icon="ios-search-strong"
              @on-enter="_pageChange(1)"
            />
          </Form-item>
        </Form>
        </Col>
        <Col span="24" style="margin-bottom: 10px">
        <el-table
          border
          size="small"
          highlight-current-row
          :data="getPage.records"
          style="width: 100%"
          :height="300"
          @row-click="_rowChange"
          @row-dblclick="_dbClick"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.key"
            show-overflow-tooltip
            :prop="item.key"
            :label="item.title"
            :min-width="item.width"
          >
            <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="getPage.total"
          :page-size="getPage.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">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 选择物料(单选)
 */
import { drugCatalogue } from '../../api'

export default {
  components: {},
  data() {
    return {
      loading: true,
      pageParams: { rows: 20 },
      pageColumns: [
        { title: '物料名称', key: 'name' },
        { title: '物料编号', key: 'code' },
        { title: '规格', key: 'spec' }
      ],
      getPage: {},
      showUserGroupModal: false,
      modalTitle: '',
      currentRowData: {},
      name: '',
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '确定', type: 'primary' }
      ]
    }
  },
  methods: {
    _open() {
      this.modalTitle = '选择物料'
      this.name = ''
      this._judge()
    },
    _judge() {
      this.showUserGroupModal = true
      this.currentRowData = {}
      this._page()
    },
    _page: async function() {
      const result = await drugCatalogue.page(this._searchParams())
      if (result) {
        this.getPage = result
        this.loading = false
      }
    },
    _pageChange(page) {
      this.pageParams.page = page
      this._page()
    },
    _pageRows(rows) {
      this.pageParams.rows = rows
      this._page()
    },
    _searchParams() {
      const data = this.$serialize('user-marshalling-form')
      if (this.name) {
        data.name = this.name
      }
      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()
    },
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          this._ok()
          break
      }
    }
  }
}
</script>
