<template>
  <div>
    <Row>
      <!--查询-->
      <Col span="24" />
      <Form inline onsubmit="return false" :label-width="70">
        <label class="label-sign" />
        <Form-item label="生产批号:">
          <Input v-model="formObj.batchNum" placeholder="请输入生产批号" style="width:200px" @on-enter="_formSearch" /></Input>
        </Form-item>
        <Form-item class="search-btn">
          <Button type="primary" @click="_formSearch">
            搜索
          </Button>
        </Form-item>
        <Form-item class="search-btn">
          <Button type="success" :disabled="!showAdd" @click="_add">
            添加
          </Button>
        </Form-item>
      </Form>
      </Col>
      <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"
          :min-width="item.width"
          :fixed="item.fixed?item.fixed:undefined"
        >
          <template slot-scope="scope">
            <div v-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
          label="操作"
          align="center"
          :width="100"
          fixed="right"
        >
          <template slot-scope="scope">
            <IconList
              :msg="showAdd?iconMsg:iconMsg1"
              :row-data="scope.row"
              @on-result-change="_iconClick"
            />
          </template>
        </el-table-column>
      </element-table>
      </Col>
    </Row>
    <!--首次入库-->
    <LmsChemicalStockAdd ref="addModal" :chemical="leftData" @on-result-change="_search" />
    <!-- 耗材入库 -->
    <LmsChemicalStockIn ref="inStockModal" @on-result-change="_search" />
  </div>
</template>
<script>
import LmsChemicalStockIn from './LmsChemicalStockIn.vue'
import LmsChemicalStockAdd from './LmsChemicalStockAdd.vue'

export default {
  components: {
    LmsChemicalStockIn,
    LmsChemicalStockAdd
  },
  data() {
    return {
      formObj: {
        chemicalId: '',
        batchNum: ''
      },
      iconMsg: [
        { type: 'log-in', id: 'chemical-manage-stock-in', name: '入库' }
      ],
      iconMsg1: [
        {
          type: 'log-in',
          id: 'chemical-manage-stock-in',
          name: '入库',
          disabled: true
        }
      ],
      getPage: {
        records: []
      },
      pageColumns: [
        { title: '库存数量', key: 'stock', width: 100 },
        { title: '有效期', key: 'validDate', width: 110, date: true },
        { title: '生产批号', key: 'batchNum', width: 120 },
        { title: '商品编码', key: 'productCode', width: 120 },
        { title: 'CAS编号', key: 'casNum', width: 120 },
        { title: '规格', key: 'spec', width: 150 },
        { title: '供应商', key: 'supplier', width: 150 },
        { title: '价格', key: 'unitPrice', width: 150 },
        { title: '制造厂商', key: 'manufacturer', width: 150 },
        { title: '备注', key: 'remark', width: 220 }
      ],
      showAdd: true,
      orderId: '',
      leftData: {}
    }
  },
  methods: {
    _open(data, orderId) {
      this.leftData = data
      this.orderId = orderId
      this.formObj.chemicalId = data.chemicalId
      this.formObj.spec = data.spec
      if (data.state === 3 || data.state === 1) {
        this.showAdd = false
      } else {
        this.showAdd = true
      }
      this._page()
    },
    _page() {
      // this.$refs.pageTable._page(
      //   '',
      //   'LmsChemicalStock/page',
      //   this.$serializeFormSearch(this.formObj)
      // )
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = []
          break
        default:
          this._page()
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '入库':
          this._inStock(data)
          break
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _inStock(data) {
      // 入库
      this.$refs.inStockModal._open(data, this.leftData, this.orderId)
    },
    _search() {
      this._page()
      this.$emit('on-result-change', false)
    },
    // 首次入库
    _add() {
      if (this.formObj.chemicalId === '') {
        this.$Message.warning('请选择一条耗材数据！')
      } else {
        this.$refs.addModal._open(this.formObj.chemicalId)
      }
    }
  }
}
</script>
