<template>
  <div>
    <Modal v-model="showModal" v-drag width="100" class="full-screen zIndex-1200">
      <div slot="header">设备管理</div>
      <div>
        <Collapse @on-result-change="_optionResult" left-title="仪器类别" right-title="已选仪器" left-width="15">
          <template slot="left">
            <Row :gutter="16">
              <Col span="10">
                <EquipClassTree ref="equipClassTree" :z-tree-id="treeName"
                                @on-result-change="_searchEquip"></EquipClassTree>
              </Col>
              <Col span="14">
                <div>
                  <div>
                    <Form :label-width="70" inline onsubmit="return false">
                      <label class="label-sign"></label>
                      <Form-item label="仪器名称:" style="width: 40%">
                        <Input v-model="formObj.name" @on-enter="_formSearch" placeholder="请输入仪器名称"/>
                      </Form-item>
                      <Form-item label="仪器编号:" style="width: 40%">
                        <Input v-model="formObj.labNum" @on-enter="_formSearch" placeholder="请输入仪器编号"/>
                      </Form-item>
                      <Form-item style="margin-left: -60px">
                        <Button @click="_formSearch" type="primary">搜索</Button>
                      </Form-item>
                    </Form>
                  </div>
                  <ElementTable ref="pageTable" :tableHeight="tableHeight"  @on-result-change="_tableResultChange" :getPage="getPage"
                                 hide-elevator hide-sizer hide-total select-data >
                    <el-table-column
                      :prop="item.key"
                      :label="item.title"
                      :width="item.width"
                      :fixed="item.fixed?item.fixed:undefined"
                      v-for="item in pageColumns"
                      :key="item.key" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{scope.row[item.key]}}</span>
                      </template>
                    </el-table-column>
                  </ElementTable>
                </div>
              </Col>
            </Row>
          </template>
          <template slot="right">
            <Equiped ref="equipedModal" @on-result-change="_rightResult"></Equiped>
          </template>
        </Collapse>
      </div>
      <div slot="footer">
        <ModalFooter ref="footerModal" @on-result-change="_footerResult" :footer="footerList"></ModalFooter>
      </div>
    </Modal>
  </div>
</template>

<script>
import Collapse from '../base/Collapse'
import ElementTable from '../table/elementTable'
import ModalFooter from '../base/modalFooter'
import { equip } from '../../api'
import EquipClassTree from './EquipClassTree'
import Equiped from './Equiped'

export default {
  components: {
    Collapse,
    Equiped,
    EquipClassTree,
    ElementTable,
    ModalFooter
  },
  data() {
    return {
      // tableHeight: document.documentElement.clientHeight - 320,
      tableHeight: 500,
      getPage: {},
      pageColumns: [
        { title: '仪器名称', key: 'name', width: 160 },
        { title: '仪器编号', key: 'labNum', width: 100 },
        { title: '品牌', key: 'brand', width: 100 },
        { title: '规格型号', key: 'spec', width: 100 },
        { title: '描述', key: 'remark', width: 260 }
      ],
      selectData: [],
      showModal: false,
      // 选中要删除的id
      delIds: [],
      // 要提交的数据
      tempData: [],
      footerList: [
        { name: '取消', type: '' },
        { name: '确定', type: 'primary' }
      ],
      // 用于区别仪器ztree
      treeName: '',
      tempObj: '', // 临时数据
      formObj: {
        name: '',
        labNum: '',
        classId: ''
      }
    }
  },
  methods: {
    _open(treeName, tempObj) {
      this.showModal = true
      this.formObj = this.$resetFields(this.formObj)
      this._hideLoading()
      if (treeName === undefined || treeName === '') {
        this.treeName = 'equipClassTree' + this.$randomCode()
      } else {
        this.treeName = treeName + this.$randomCode()
      }
      this.$refs.equipClassTree._open()
      this._page()
      this.$refs.equipedModal._empty()
      this.tempData = []
      this.selectData = []
      this.delIds = []
      this.tempObj = tempObj
    },
    // modal-footer
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          this._ok()
          break
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _page: async function() {
      // this.$refs.pageTable._page(
      //   '',
      //   'LmsEquipInfo/page',
      //   this.$serializeFormSearch(this.formObj)
      // )
      const result = await equip.page(this.$serializeFormSearch(this.formObj))
      console.log('仪器结果', result)
      if (result) {
        this.getPage = result
        this.$refs.pageTable._hideLoading()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = this.$store.state.LmsEquipInfo.page
          break
        case 'selectData':
          this.selectData = data
          break
        case 'dbSelect':
          this.selectData = [data]
          this._add()
          break
        default:
          this._page()
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    // 添加
    _add() {
      if (this.selectData.length === 0) {
        this.$Message.warning('请至少选择一条数据！')
      } else {
        this.$refs.equipedModal._open(this.selectData)
        this._page()
      }
    },
    // 删除
    _del() {
      if (this.delIds.length === 0) {
        this.$Message.warning('请至少选择一条数据！')
      } else {
        this.$refs.equipedModal._delData()
      }
    },
    _searchEquip(id) {
      this.formObj.classId = id
      this._formSearch()
    },
    _rightResult(data, ids) {
      this.delIds = ids
      this.tempData = data
    },
    _optionResult(name) {
      switch (name) {
        case '添加':
          this._add()
          break
        case '删除':
          this._del()
          break
      }
    },
    _ok() {
      this.$emit('on-result-change', this.tempData, { obj: this.tempObj })
      this._cancel()
    },
    _cancel() {
      this.showModal = false
    }
  }
}
</script>
