<template>
  <div>
    <p slot="header" style="font-size: 14px;color: #1c2438;font-weight: 700;line-height: 20px;">
      {{ modalTitle }}
    </p>
    <div>
      <Form id="edit-form-chemical-delivery" inline onsubmit="return false" :label-width="90">
        <Form-item class="search-item" label="耗材编号:">
          <el-input v-model="formObj.chemicalNum" placeholder="请输入耗材编号" clearable @keyup.enter.native="_search" />
        </Form-item>


        <Form-item class="search-item" label="耗材名称:">
          <el-input v-model="formObj.chemicalName" placeholder="请输入耗材名称" clearable @keyup.enter.native="_search" />
        </Form-item>

        <Form-item class="search-item" label="供应商:">
          <el-input v-model="formObj.supplier" placeholder="请输入供应商" clearable @keyup.enter.native="_search" />
        </Form-item>

        <Form-item class="search-item" label="规格:">
          <el-input v-model="formObj.spec" placeholder="请输入规格" clearable @keyup.enter.native="_search" />
        </Form-item>

        <Form-item class="search-item" label="制造厂商:">
          <el-input v-model="formObj.manufacturer" placeholder="请输入制造厂商" clearable @keyup.enter.native="_search" />
        </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="400"
          :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"
            :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-if="item.date">
                {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):'' }}
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="optColWidth?true:false"
            label="操作"
            align="center"
            :width="optColWidth"
            fixed="right"
          >
            <template slot-scope="scope">
              <IconList
                :msg="scope.row.state===1?'--':iconMsg"
                :row-data="scope.row"
                @on-result-change="_iconClick"
              />
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
    </div>
    <!--出库所要添加的信息-->
    <SingleOutStorage ref="storageModal" @on-result-change="_search" />
    <!--结束出库单-->
    <EndPurchase ref="endPurchaseModal" @on-result-change="_search" />
    <!--全部结束-->
    <AllStorage ref="allStorageModal" @on-result-change="_allClose" />
  </div>
</template>
<script>
import { consumeRelDelivery } from '../../../../api'
import SingleOutStorage from './SingleOutStorage.vue'
import EndPurchase from './EndPurchase.vue'
import AllStorage from './AllStorage.vue'

export default {
  components: {
    SingleOutStorage,
    EndPurchase,
    AllStorage
  },
  data() {
    return {
      iconMsg: [
        { type: 'log-out', id: '', name: '出库' },
        { type: 'trash-a', id: '', name: '结束' }
      ],
      purchaseOrder: {},
      orderStatus: 0,
      queryData: {},
      formObj: {
        chemicalNum: '',
        chemicalName: '',
        supplier: '',
        manufacturer: '',
        orderId: '',
        spec: ''
      },
      modalTitle: '出库单耗材详情列表',
      showEditModal: false,
      pageColumns: [
        { title: '耗材编号', width: 100, key: 'chemicalNum' },
        { title: '耗材名称', key: 'chemicalName', width: 140 },
        { title: '出库数量', width: 100, key: 'quantity' },
        { title: '库存量', width: 100, key: 'stock' },
        { title: '已出库数量', width: 120, key: 'alreadyQuantity' },
        { title: '计量单位', width: 100, key: 'unit' },
        { title: '有效期', width: 160, key: 'validDate', date: true },
        { title: '生产批次', width: 140, key: 'batchNum' },
        { title: '规格', width: 100, key: 'spec' },
        { title: '供应商', width: 155, key: 'supplier' },
        { title: '制造厂商', width: 100, key: 'manufacturer' },
        { title: '备注', key: 'remark', width: 150 }
      ],
      getPage: {},
      id: '',
      orderId: '',
      optionDate: {
        // 今天之前的日期被禁用
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      batchNumList: [],
      batchNumListTemp: []
    }
  },
  methods: {
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          break
        case 'selectIds':
          this.selectIds = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._page()
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '编辑':
          this._outStorage(data)
          break
        case '删除':
          this._end(data.id)
          break
      }
    },
    _open(data) {
      this.purchaseOrder = data
      this.showEditModal = true
      this.id = data.id // 采购单id
      this.orderId = data.id // 采购单id
      this.formObj.orderId = data.id // 采购单id
      // 刷新界面
      this._page()
    },

    _init() {
      this.getPage.records = []
      this.$refs.pageTable._initTable()
    },

    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await consumeRelDelivery.pageByOrderId(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _searchParams() {
      const data = this.$serialize('edit-form-chemical-delivery')
      return this.$extend(data)
    },
    _search() {
      this._page()
      this.$emit('on-result-change')
    },
    _outStorage(data) {
      // 出库
      this.$refs.storageModal._open(data, this.purchaseOrder)
    },
    _end(id) {
      // 结束
      this.$refs.endPurchaseModal._open(id)
    },
    _allStorage() {
      // 全部结束
      this.$refs.allStorageModal._open(this.id)
    },
    _cancel() {
      this.showEditModal = false
    },
    _allClose() {
      // 全部结束时后返回
      this.showEditModal = false
      this._page()
      this.$emit('on-result-change')
    },
    _validDateChange(data) {
      $('input[name=validDate]').val(data)
    }
  }
}
</script>
