<template>
  <vxe-modal
    :value="show"
    title="库位分布"
    width="60%"
    :mask="false"
    @close="close"
  >
    <template #default>
      <vxe-table show-overflow border="inner" :data="tableData">
        <vxe-table-column
          field="materielName"
          title="商品名称"
        ></vxe-table-column>
        <vxe-table-column field="warehouseName" title="仓库"></vxe-table-column>
        <vxe-table-column field="name" title="规格">
          <template #default="{ row }">
            {{ row.unitName }};{{ row.skuName }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="num" title="实际库存"></vxe-table-column>
        <vxe-table-column
          field="storageLocationName"
          title="库位"
        ></vxe-table-column>
        <vxe-table-column
          field="storageLocationCode"
          title="库位编码"
        ></vxe-table-column>
        <vxe-table-column field="areaName" title="库区"></vxe-table-column>
        <vxe-table-column field="areaCode" title="库区编码"></vxe-table-column>
      </vxe-table>
    </template>
  </vxe-modal>
</template>

<script>
  import { getAreaDateBySkuId } from "@/api/Stock";
  export default {
    name: "InventoryDistribution",
    model: {
      prop: "show",
      event: "change",
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      skuId: {
        type: [Number, String],
        default: 0,
      },
      warehouseId: {
        type: [Number, String],
        default: 0,
      },
    },
    data() {
      return {
        tableData: [],
        pre_page: 10,
        page: 1,
        total: 0,
      };
    },
    created() {
      this.getAreaDateBySkuId();
    },
    methods: {
      close() {
        this.$emit("close");
      },
      async getAreaDateBySkuId() {
        const { data } = await getAreaDateBySkuId({
          warehouseId: this.warehouseId,
          skuId: this.skuId,
        });
        if (data.length) {
          this.tableData = data[0].areaDate.map((item) => {
            return {
              ...item,
              warehouseId: data[0].warehouseId,
              warehouseName: data[0].warehouseName,
            };
          });
        }
      },
    },
  };
</script>

<style scoped></style>
