<!-- 入库 -->
<template>
  <div class="inWarehouse">
    <ele-pro-table
      ref="table1"
      height="calc(100vh - 300px)"
      :columns="columns"
      :datasource="datasource"
      :pageSize="20"
      row-key="id"
      :initLoad="false"
    >
      <template v-slot:toolbar>
        <div style="display: flex; align-items: center">
          列表维度:
          <el-select
            clearable
            v-model="dimension"
            @change="handleChange"
            placeholder="请选择"
            style="margin-left: 10px"
          >
            <el-option label="批次维度" :value="2"> </el-option>
            <el-option label="包装维度" :value="3"> </el-option>
          </el-select>
        </div>
      </template>
    </ele-pro-table>
  </div>
</template>
<script>
  import storageApi from '@/api/warehouseManagement/index.js';
  export default {
    props: {
      categoryCode: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        dimension: 3,
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            label: '序号',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center'
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'categoryName',
            prop: 'categoryName',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'inventoryCycle',
            label: '存货周期(天)',
            align: 'center',
            width: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryModel',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'level',
            label: '级别',
            showOverflowTooltip: true
          },
          {
            prop: 'measureQuantity',
            label: '计量数量',
            sortable: 'custom',
            showOverflowTooltip: true,
            width: 130,
            align: 'center'
          },
          {
            prop: 'measureUnit',
            label: '计量单位',
            align: 'center'
          },
          {
            prop: 'weight',
            label: '重量',
            showOverflowTooltip: true
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            showOverflowTooltip: true
          },
          {
            prop: 'packageNo',
            label: '包装编码',
            showOverflowTooltip: true
          },
          {
            prop: 'packingQuantity',
            label: '包装数量	',
            showOverflowTooltip: true
          },
          {
            prop: 'packingUnit',
            label: '包装单位	',
            showOverflowTooltip: true
          },
          {
            prop: 'warehouseName',
            label: '仓库	',
            showOverflowTooltip: true
          },
          {
            prop: 'areaName',
            label: '货区	',
            showOverflowTooltip: true
          },
          {
            prop: 'goodsAllocationName',
            label: '货架',
            showOverflowTooltip: true
          },
          {
            prop: 'goodsShelfName',
            label: '货位',
            showOverflowTooltip: true
          },
          {
            prop: 'productionDate',
            label: '生产日期',
            showOverflowTooltip: true
          },
          {
            prop: 'purchaseDate',
            label: '采购日期',
            showOverflowTooltip: true
          },
          {
            prop: 'barcodes',
            label: '发货条码	',
            showOverflowTooltip: true
          },
          {
            prop: 'clientCode',
            label: '客户代号',
            showOverflowTooltip: true
          },
          {
            prop: 'engrave',
            label: '刻码	',
            showOverflowTooltip: true
          },
          {
            prop: 'materielDesignation',
            label: '物料代号',
            width: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'supplierCode',
            label: '供应商代号',
            width: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'provenance',
            label: '产地',
            showOverflowTooltip: true
          }
        ]
      };
    },
    created() {
      this.reload({ keyWord: this.categoryCode });
    },
    methods: {
      datasource({ page, limit, where }) {
        let api =
          this.dimension == '3'
            ? storageApi.getPackingList
            : storageApi.getBatchList;
        const data = api({
          ...where,
          pageNum: page,
          size: limit
        });
        return data;
      },
      handleChange() {
        this.$refs.table1.reload({
          pageNum: 1,
          where: { keyWord: this.categoryCode }
        });
      },
      reload(where) {
        this.$nextTick(() => {
          if (this.$refs.table1 && this.$refs.table1.reload)
            this.$refs.table1.reload({ pageNum: 1, where: where });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .inWarehouse {
    height: 100%;
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    :deep(.table) {
      flex: 1;
      display: flex;
      flex-direction: column;

      .el-table__body-wrapper {
        flex: 1;
      }
    }

    .pagination {
      flex: 0 0 50px;
      display: flex;
      align-items: center;
    }
  }
</style>
