<template>
  <div>
    <!--内容-->
    <div>
      <Row>
        <!--查询-->
        <Col span="24" />
        <Form id="search-form-no-classify" inline onsubmit="return false">
          <label class="label-sign" />
          <Form-item>
            归类名称：<Input name="name" placeholder="请输入归类名称" style="width: 160px;" @on-enter="_pageChange(1)" /></Input>
          </Form-item>
          <input name="classifyed" type="hidden" value="0"></input>
          <Form-item>
            <Button type="primary" @click="_pageChange(1)">
              搜索
            </Button>
          </Form-item>
        </Form>
        </Col>
        <!-- 表格 -->
        <Col span="24" style="margin-bottom: 10px" />
        <element-table
          ref="pageTable"
          :page-columns="pageColumns"
          :table-height="tableHeight"
          :get-page="getPage"
          :opt-col-width="70"
          @on-result-change="_tableResultChange"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.key"
            show-overflow-tooltip
            sortable
            :prop="item.key"
            :label="item.title"
            :min-width="item.width"
            :fixed="item.fixed?item.fixed:undefined"
          >
            <template slot-scope="scope">
              <div v-if="item.detail">
                <a @click.stop="_detailModal(scope.row.id)">{{ scope.row[item.key] }}</a>
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
    </div>
    <!--查看耗材详情-->
    <LmsChemicalClassifyDetail ref="detailModal" />
  </div>
</template>
<script>
import LmsChemicalClassifyDetail from './LmsChemicalClassifyDetail.vue'
export default {
  components: {
    LmsChemicalClassifyDetail
  },
  data() {
    return {
      selectIds: [],
      showMakeClassifyModal: false,
      pageParams: {
        rows: 20
      },
      pageColumns: [
        { title: '归类名称', key: 'name', width: 120 },
        { title: '归类库存量', width: 120, key: 'stock' },
        { title: '计量单位', width: 100, key: 'unit' },
        { title: '预警库存量', key: 'warning', width: 130 },
        { title: '备注', key: 'remark', width: 150 }
      ],
      DATA: {
        // 要提交至归类的数据
        chemicalId: '',
        classifyIds: []
      },
      getPage: {}
    }
  },
  computed: {
    tableHeight: function() {
      return '400'
    }
  },
  methods: {
    _dbRowChange(data) {
      // 双击
      this.$emit('on-result-change', data.id)
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          break
        case 'selectIds':
          this._selectRowChange(data)
          break
        case 'dbSelect':
          this._dbRowChange(data)
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._page()
      }
    },
    _page() {
      // this.$refs.pageTable._page(
      //   'search-form-no-classify',
      //   'LmsChemicalClassify/getExcludePage',
      //   this._searchParams()
      // )
    },
    _pageChange(page) {
      this.pageParams.page = page
      this._page()
    },
    _selectRowChange(data) {
      this.selectIds = data
      this.$emit('on-result-change', this.selectIds)
    },
    _selectAll: function(data) {
      this._selectRowChange(data)
    },
    _search() {
      this._page()
    },
    _searchParams() {
      const data = this.$serialize('search-form-no-classify')
      return this.$extend(data, this.pageParams)
    },
    _open(id, unit) {
      this.showMakeClassifyModal = true
      this.pageParams.chemicalId = id
      this.pageParams.unit = unit
      this.DATA.chemicalId = id
      //  this.DATA.unit=unit;
      this._page()
      this.selectIds = []
    },
    _detailModal(id) {
      // this.$store.dispatch('LmsChemicalClassify/getById', id).then(() => {
      //   this.$refs.detailModal._open(
      //     this.$store.state.LmsChemicalClassify.model
      //   )
      // })
    }
  }
}
</script>
