<template>
  <div>
    <Modal v-model="chemicalStockUserecordModal" title="耗材出入库记录" width="1000">
      <Row>
        <!--查询-->
        <Col span="24" />
        <Form id="search-use-form" inline onsubmit="return false" :label-width="95">
          <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 label="生产批号:">
            <Input name="batchNum" placeholder="请输入生产批号" style="width:180px" @on-enter="_pageChange(1)" /></Input>
          </Form-item>
          <Form-item label="操作人:" style="margin-left: 5px;">
            <Input name="realname" placeholder="请输入操作人" style="width:180px" @on-enter="_pageChange(1)" /></Input>
          </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="_pageChange(1)">
              搜索
            </Button>
          </Form-item>
        </Form>
        </Col>
        <!-- 表格 -->
        <Col span="24" style="margin-bottom: 10px;" />
        <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.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-if="scope.row[item.key]===0">
                入库
              </div>
              <div v-else-if="scope.row[item.key]===1">
                出库
              </div>
              <div v-else-if="scope.row[item.key]===2">
                归还
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      chemicalStockUserecordModal: false,
      chemicalId: '',
      stockId: '',
      selectIds: [],
      pageParams: {
        rows: 20
      },
      iconMsg: [],
      pageColumns: [
        {
          title: '状态',
          key: 'type',
          width: 120
        },
        {
          title: '耗材名称',
          key: 'chemicalName',
          width: 140
        },
        {
          title: '耗材类别',
          key: 'category',
          width: 140
        },
        {
          title: '出入库量',
          key: 'stock',
          width: 120
        },
        {
          title: '库存量',
          key: 'batchstock ',
          width: 100
        },
        {
          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',
          width: 100
        },
        {
          title: '出入库原因',
          key: 'reason',
          width: 100
        }
      ],
      getPage: {},
      statusList: [
        { value: 0, name: '入库' },
        { value: 1, name: '出库' },
        { value: 2, name: '归还' }
      ],
      stock: '',
      type: '',
      remark: '',
      searchOpen: false
    }
  },
  computed: {
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('search')
      } else {
        return this.$tableHeight('noSearch')
      }
    }
  },
  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.type = ''
      this._clearPage()
      this.chemicalStockUserecordModal = true
      this._page()
    },
    _page() {
      // this.$refs.pageTable._page(
      //   'search-use-form',
      //   'LmsChemicalUserecord/pageByChemicalId',
      //   this._searchParams()
      // )
    },
    _pageChange(page) {
      this.pageParams.page = page
      this._page()
    },
    // 清楚条件搜索
    _clearPage() {
      $('#search-use-form')
        .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-use-form')
      // 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>
