<template>
  <div>
    <p slot="header" style="font-size: 14px;color: #1c2438;font-weight: 700;line-height: 20px;">
      {{ modalTitle }}
    </p>
    <div>
      <Form id="edit-form-equip-delivery" inline onsubmit="return false" :label-width="70">
        <Form-item label="仪器编号:">
          <Input v-model="formObj.equipNum" placeholder="请输入仪器编号" style="width:180px" @on-enter="_search" /></Input>
        </Form-item>
        <Form-item label="仪器名称:">
          <Input v-model="formObj.equipName" style="width: 160px;" placeholder="请输入仪器名称" @on-enter="_search" /></Input>
        </Form-item>
        <Form-item label="规格型号:">
          <Input v-model="formObj.spec" placeholder="请输入规格型号" style="width:180px" @on-enter="_search" /></Input>
        </Form-item>
        <Form-item label="制造厂商:">
          <Input v-model="formObj.manufacturer" placeholder="请输入制造厂商" style="width:180px" @on-enter="_search" /></Input>
        </Form-item>
        <Form-item style="margin-left: -70px;">
          <Button type="primary" @click="_search">
            搜索
          </Button>
        </Form-item>
      </Form>
      <Row>
        <!-- 表格 -->
        <Col span="24" />
        <element-table
          ref="pageTable"
          :page-columns="pageColumns"
          :table-height="tableHeight"
          :get-page="getPage"
          :icon-msg="iconMsg"
          :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"
            :width="item.width"
            :min-width="200"
            :fixed="item.fixed?item.fixed:undefined"
          >
            <template slot-scope="scope">
              <div>{{ scope.row[item.key] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            :fixed="right"
            :width="100"
          >
            <template slot-scope="scope">
              <IconList
                :msg="scope.row.state==2?iconMsg:'--'"
                :row-data="scope.row"
                @on-result-change="_iconClick"
              />
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
    </div>
    <!--出库所要添加的信息-->
    <LmsEquipOut ref="storageModal" @on-result-change="_search" />
  </div>
</template>
<script>
import { equipRelDelivery } from '../../../../api'
import LmsEquipOut from './LmsEquipOut.vue'

export default {
  components: {
    LmsEquipOut
  },
  data() {
    return {
      iconMsg: [{ type: 'log-out', id: '', name: '出库' }],
      purchaseOrder: {},
      orderStatus: 0,
      queryData: {},
      modalTitle: '出库单仪器详情列表',
      showEditModal: false,
      pageColumns: [
        { title: '仪器编号', width: 150, key: 'equipNum' },
        { title: '仪器名称', key: 'equipName', width: 160 },
        { title: '规格型号', width: 120, key: 'spec' },
        { title: '存储位置', width: 140, key: 'locationName' },
        { title: '制造厂商', key: 'manufacturer' },
        { title: '备注', key: 'remark' }
      ],
      getPage: {},
      id: '',
      optionDate: {
        // 今天之前的日期被禁用
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      batchNumList: [],
      batchNumListTemp: [],
      applyer: '',
      formObj: {
        equipNum: '',
        equipName: '',
        orderId: '',
        spec: '',
        manufacturer: ''
      }
    }
  },
  computed: {
    tableHeight: function() {
      if (this.searchOpen) {
        return '400'
      } else {
        return '600'
      }
    }
  },
  methods: {
    _iconClick(res, data) {
      switch (res) {
        case '出库':
          this._outStorage(data)
          break
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._page()
      }
    },
    _open(data) {
      if (undefined === data) {
        this.getPage = []
        this.$refs.pageTable._initTable()
        return false
      }
      this.purchaseOrder = data
      this.formObj.orderId = data.id
      this.applyer = data.applyer
      this.showEditModal = true
      this.id = data.id // 采购单id
      this.formObj = this.$resetFields(this.formObj)
      // 刷新界面
      this._page()
    },
    // 清空数据
    _clear() {
      this.id = ''
      this.applyer = ''
      this.purchaseOrder = {}
      this.formObj = this.$resetFields(this.formObj)
      this.getPage.records = []
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await equipRelDelivery.page(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _searchParams() {
      const data = this.$serializeFormSearch(this.formObj)
      return this.$extend(data)
    },
    _search() {
      if (this.id) {
        this._page()
      } else {
        this.$Message.warning('请选中数据后再搜索~')
      }
    },
    _outStorage(data) {
      // 出库
      this.$refs.storageModal._open(data, this.purchaseOrder)
    },
    _cancel() {
      this.showEditModal = false
    },
    _allClose() {
      // 全部结束时后返回
      this.showEditModal = false
      this._page()
      this.$emit('on-result-change')
    }
  }
}
</script>
