<template>
  <div>
    <Modal v-model="chemicalStockUserecordModal" title="耗材出入库记录" width="1000">
      <Row>
        <!--查询-->
        <Col span="24" />
        <Form id="search-form-22222" inline onsubmit="return false" :label-width="70">
          <label class="label-sign" />
          <Form-item label="状态:">
            <Select ref="status" v-model="type" clearable filterable style="width:180px">
              <Option v-for="item in statusList" :key="item.value" :value="item.value">
                {{ item.name }}
              </Option>
            </Select>
          </Form-item>
          <Form-item label="有效期:">
            <DatePicker
              ref="validDate"
              :value="dateValue"
              format="yyyy-MM-dd"
              type="daterange"
              placement="bottom-end"
              placeholder="请选择有效期"
              style="width: 200px"
              @on-change="_validDateChange"
            />
            <input name="beginValidDate" type="hidden">
            <input name="endValidDate" type="hidden">
          </Form-item>

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

          <Form-item class="search-item" label="操作人">
            <el-input v-model="formObj.realname" placeholder="请输入操作人" clearable @keyup.enter.native="_formSearch" />
          </Form-item>

          <Form-item label="操作时间:">
            <DatePicker
              ref="operateDate"
              :value="dateValue"
              format="yyyy-MM-dd"
              type="daterange"
              placement="bottom-end"
              placeholder="请选择操作时间"
              style="width: 200px"
              @on-change="_dateChange"
            />
            <input name="beginDate" type="hidden">
            <input name="endDate" type="hidden">
          </Form-item>
          <Form-item class="marleft-90">
            <Button type="primary" @click="_formSearch">
              搜索
            </Button>
          </Form-item>
        </Form>
        </Col>
        <!-- 表格 -->
        <Col span="24" />
        <element-table
          ref="pageTable"
          :page-columns="pageColumns"
          :table-height="tableHeight"
          :get-page="getPage"
          :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.status">
                <div v-if="scope.row[item.key]===0" class="green-color">
                  入库
                </div>
                <div v-else-if="scope.row[item.key]===1" class="warning-color">
                  出库
                </div>
                <div v-else-if="scope.row[item.key]===2" class="blue-color">
                  归还
                </div>
                <div v-else-if="scope.row[item.key]===3" class="blue-color">
                  校正
                </div>
                <div v-else-if="scope.row[item.key]===4" class="blue-color">
                  超期清零
                </div>
              </div>
              <div v-else-if="item.allstock">
                {{ scope.row.allstock }}
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
    </Modal>
  </div>
</template>
<script>
import { consumeUseRecord } from '../../../../api'

export default {
  data() {
    return {
      chemicalStockUserecordModal: false,
      chemicalId: '',
      stockId: '',
      formObj: {
        chemicalId: '',
        stockId: '',
        realname: '',
        batchNum: ''
      },
      selectIds: [],
      pageParams: {
        rows: 20
      },
      pageColumns: [
        { title: '状态', key: 'type', width: 120, status: true },
        { title: '耗材名称', key: 'chemicalName', width: 140 },
        { title: '耗材类别', key: 'chemicalCategory', width: 140 },
        { title: '出入库量', key: 'stock', width: 120 },
        { title: '库存量', key: 'allstock ', width: 100, allstock: true },
        { title: '转换量', key: 'exstock', width: 120 },
        { title: '操作人', key: 'realname', width: 100 },
        { title: '操作时间', key: 'ctime', width: 160, date: true },
        { title: '有效期', key: 'validDate', width: 120, date: true },
        { title: '生产批号/批次', key: 'batchNum', width: 170 },
        { title: '仓库位置', key: 'storehouse', width: 100 },
        { title: '备注', key: 'remark', ellipsis: true, width: 100 },
        { title: '出入库原因', key: 'reason', width: 160 }
      ],
      getPage: {},
      statusList: [
        { value: 0, name: '入库' },
        { value: 1, name: '出库' },
        { value: 2, name: '归还' },
        { value: 3, name: '校正' }
      ],
      stock: '',
      type: '',
      remark: ''
    }
  },
  computed: {
    tableHeight: function() {
      return '400'
    }
  },
  methods: {
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          // this.getPage = this.$store.state.LmsChemicalUserecord.page
          break
        case 'selectIds':
          this.selectIds = data
          break
        default:
          this._page()
      }
    },
    _open(chemicalId, stockId) {
      this.chemicalId = chemicalId
      this.stockId = stockId
      this.formObj.chemicalId = chemicalId
      this.formObj.stockId = stockId
      this.type = ''
      this._clearPage()
      this.chemicalStockUserecordModal = true
      this._page()
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await consumeUseRecord.pageByChemicalId(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    // 清楚条件搜索
    _clearPage() {
      $('#search-form-22222')
        .find('input')
        .each(function() {
          $(this).val('')
        })
      this.$refs.validDate.handleClear()
      this.$refs.operateDate.handleClear()
      this.$refs.status.clearSingleSelect()
    },
    _search() {
      this._page()
    },
    _searchParams() {
      const data = this.$serialize('search-form-22222')
      data.chemicalId = this.chemicalId
      if (this.stockId !== '') {
        data.stockId = this.stockId
      }
      if (this.type !== '') {
        data.type = this.type
      }
      return this.$extend(data, this.pageParams)
    },
    _dateChange(data) {
      $('input[name=beginDate]').val(data[0])
      $('input[name=endDate]').val(data[1])
    },
    _validDateChange(data) {
      $('input[name=beginValidDate]').val(data[0])
      $('input[name=endValidDate]').val(data[1])
    }
  }
}
</script>
