<template>
  <div>
    <Modal v-model="showStorageDetailModal" width="1000" footer-hide>
      <p slot="header">
        库存详情
      </p>
      <Row>
        <!--查询-->
        <Col span="24" />
        <Form id="search-forms-out-apply" inline onsubmit="return false" :label-width="80">
          <label class="label-sign" />
          <Form-item class="search-item" label="CAS编号:">
            <el-input v-model="formObj.casNum" placeholder="请输入CAS编号" clearable @keyup.enter.native="_formSearch" />
          </Form-item>

          <Form-item class="search-item" label="生产批号:">
            <el-input v-model="formObj.batchNum" placeholder="请输入生产批号" clearable @keyup.enter.native="_formSearch" />
          </Form-item>

          <Form-item label="有效期:">
            <DatePicker
              ref="Dates"
              :value="dateValue"
              format="yyyy-MM-dd"
              type="daterange"
              placement="bottom-end"
              placeholder="请选择有效期"
              style="width: 200px"
              @on-change="_dateChange"
            />
            <input name="beginValidDate" type="hidden">
            <input name="endValidDate" type="hidden">
          </Form-item>
          <Form-item class="marleft-90">
            <Button type="primary" @click="_formSearch">
              搜索
            </Button>
          </Form-item>
        </Form>
        </Col>
        <!-- 耗材基本信息 -->
        <Col span="24" style="margin-bottom: 10px" />
        <table class="tableClass">
          <tbody>
            <tr>
              <th>耗材编号</th>
              <td>{{ chemical.num }}</td>
              <th>耗材名称</th>
              <td>{{ chemical.name }}</td>
              <th>耗材类别</th>
              <td>{{ chemical.category }}</td>
              <th>仓库位置</th>
              <td>{{ chemical.storehouse }}</td>
            </tr>
            <tr>
              <th>库存量</th>
              <td>{{ chemical.stock }}</td>
              <th>计量方式</th>
              <td>{{ chemical.unit }}</td>
              <th>备注</th>
              <td colspan="3">
                {{ chemical.remark }}
              </td>
            </tr>
          </tbody>
        </table>
        </Col>
        <Col span="24" style="margin-bottom: 10px" />
        <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.date">
                {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):'' }}
              </div>
              <div v-else-if="item.key==='state'">
                <span v-if="scope.row[item.key]===0">
                  {{ '正常' }}
                </span>
              </div>
              <div v-else-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>
    </Modal>
    <!-- 耗材出库 -->
    <LmsChemicalApplyStockOut ref="chemicalApplyStockOutModal" @on-result-change="_search" />
    <!-- 出入库使用记录 -->
    <LmsChemicalBatchStockUserecord
      ref="chemicalStockUserecordModal"
      @on-result-change="_search"
    />
  </div>
</template>
<script>
import { consumeStock } from '../../../api'
import LmsChemicalApplyStockOut from './LmsChemicalApplyStockOut.vue'
import LmsChemicalBatchStockUserecord from './LmsChemicalBatchStockUserecord.vue'

export default {
  components: {
    LmsChemicalApplyStockOut,
    LmsChemicalBatchStockUserecord
  },
  data() {
    return {
      dateValue: [], // 有效期
      heightSearch: '',
      showStorageDetailModal: false,
      formObj: {
        casNum: '',
        batchNum: '',
        chemicalId: ''
      },
      chemical: {
        id: '',
        num: '',
        category: '',
        name: '',
        storehouse: ''
      },
      RelQuoteList: [],
      pageColumns: [
        { title: 'CAS编号', width: 150, key: 'casNum', fixed: 'left' },
        { title: '商品编码', width: 150, key: 'productCode', fixed: 'left' },
        { title: '状态', width: 150, key: 'state' },
        { title: '库存量', width: 100, key: 'stock' },
        { title: '有效期', key: 'validDate', width: 110, date: true },
        { title: '距离有效期（/天）', key: 'validDay', width: 150 },
        { title: '单价', key: 'unitPrice', width: 80 },
        { title: '生产批号（批次）', width: 150, key: 'batchNum' },
        { title: '规格型号', width: 120, key: 'spec' },
        { title: '已使用量', width: 100, key: 'exused' },
        { title: '供应商', width: 200, key: 'supplier' },
        { title: '制造厂商', width: 200, key: 'manufacturer' },
        { title: '备注', key: 'remark' }
      ],
      iconMsg: [
        { type: 'pt-edit', id: '', name: '出库' },
        { type: 'pt-edit', id: '', name: '使用记录' }
      ],
      iconMsg1: [
        { type: 'pt-edit', id: '', name: '出库', disabled: true },
        { type: 'pt-edit', id: '', name: '使用记录' }
      ],
      getPage: {},
      manufacturer: ''
    }
  },
  methods: {
    _iconClick(res, data) {
      switch (res) {
        case '出库':
          this._chemicalApplyStockOutModal(data)
          break
        case '使用记录':
          this._chemicalStockUserecordModal(data.chemicalId, data.id)
          break
      }
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await consumeStock.page(this.$serializeForm(this.formObj))
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _formSearch() {
      this._page()
    },
    _chemicalApplyStockOutModal(data) {
      // 出库
      this.$refs.chemicalApplyStockOutModal._open(data)
    },
    _chemicalStockUserecordModal(chemicalId, id) {
      // 详情
      this.$refs.chemicalStockUserecordModal._open(chemicalId, id)
    },
    _search() {
      this._page()
    },
    _openStorage(data) {
      this.$refs.Dates.handleClear()
      this.showStorageDetailModal = true
      this.chemical = data
      this.manufacturer = data.manufacturer
      this.formObj.chemicalId = data.id
      this._page()
    },
    _dateChange(data) {
      // 有效期
      if (data[0] === '') {
        // 开始和结束为同一天
        $('input[name=beginValidDate]').val(data[0])
        $('input[name=endValidDate]').val(data[0])
      } else {
        $('input[name=beginValidDate]').val(data[0])
        $('input[name=endValidDate]').val(data[1])
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          // this.getPage = this.$store.state.LmsChemicalStock.page
          // this.getPage.records.forEach((item, index) => {
          //   item.manufacturer = this.manufacturer
          // })
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._page()
      }
    }
  }
}
</script>
