<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      size="small"
      label-position="right"
      inline
      ref="queryForm"
      :label-width="labelWidth"
      v-show="showSearch"
      @submit.native.prevent
    >
      <el-form-item label="零件号" prop="partnumber">
        <el-input v-model="queryParams.partnumber" placeholder="请输入零件号" />
      </el-form-item>
      <el-form-item label="短批次号" prop="packageCodeClient">
        <el-input v-model="queryParams.packageCodeClient_short" placeholder="请输入批次号" />
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <vxe-table
      resizable
      keep-source
      border="inner"
      ref="xTable"
      :tree-config="{ expandAll: true, transform: true, rowField: 'packageCodeClient_son', parentField: 'packageCodeClient_short_parent' }"
      :edit-config="{ trigger: 'manual', mode: 'row' }"
      :data="dataList"
    >
      <vxe-column field="partnumber" title="零件号"></vxe-column>
      <vxe-column field="description" title="描述"></vxe-column>
      <vxe-column field="packageCodeClient_son" title="批次号" tree-node></vxe-column>
      <vxe-column field="locationCode" title="库位编码"></vxe-column>
      <vxe-column field="pack_num" title="箱数"></vxe-column>
      <vxe-column field="goodsNumLogic" title="理论库存"></vxe-column>
      <!-- <vxe-column field="goodsNumAction" title="实际库存"></vxe-column> -->
      <vxe-column field="goodsNumAction" title="实际库存" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.goodsNumAction" type="text"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column title="操作" width="160"  >
        <template #default="{ row }">
          <template v-if="$refs.xTable.isActiveByRow(row)">
            <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
            <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
          </template>
          <template v-else>
            <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
          </template>
        </template>
      </vxe-column>
      <vxe-column field="entryWarehouseTime" title="入库时间"></vxe-column>
      <vxe-column field="remark" title="备注"></vxe-column>
    </vxe-table>
    <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { Node_patch_search,updateactualInventoryQuantity } from '@/api/wmsManagement/wmGoodsNowProduction.js'
export default {
  name: 'WmpatchSearch',
  data() {
    return {
      labelWidth: '100px',
      formLabelWidth: '100px',
      // 选中id数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        partnumber: '',
        packageCodeClient_short: '',
        pageNum: 1,
        pageSize: 100,
        sort: undefined,
        sortType: undefined,
      },
      dataList: [],
      total: 0,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 查询数据
    getList() {
      this.loading = true
      Node_patch_search(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.item1
          this.total = res.data.item2
          this.loading = false
        }
      })
    },
    //todo 处理搜索请求
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams.partnumber = ''
      this.queryParams.packageCodeClient_short = ''
    },
    //todo 修改库存
    editRowEvent(row) {
      const $table = this.$refs.xTable
      $table.setActiveRow(row)
    },
    saveRowEvent(row) {
      const $table = this.$refs.xTable
      $table
        .clearActived()
        .then(() => {
          this.loading = true
          //提交修改
          const query = { id: row.id, stack_num: row.goodsNumAction }
          return updateactualInventoryQuantity(query)
        })
        .then((res) => {
          if(res.code==200&&res.data>0){
            this.$notify.success("修改成功");
            this.getList()
          }
        })
    },
    cancelRowEvent(row) {
      const $table = this.$refs.xTable
      $table.clearActived().then(() => {
        // 还原行数据
        $table.revertData(row)
        //this.getList()
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
