<template>
  <vxe-modal title="批次明细" width="60%" :value="isShow" @close="cancel">
    <template #default>
      <el-table :data="queryList" style="text-align: center">
        <el-table-column
          prop="materielName"
          label="商品名称"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="warehouseName"
          label="仓库"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="unitName" label="规格" min-width="140">
          <template slot-scope="scope">
            {{ scope.row.unitName }};{{ scope.row.skuName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="batchNo"
          label="批号"
          min-width="180"
        ></el-table-column>
        <el-table-column prop="num" label="实际库存" min-width="100">
          <template slot-scope="scope">
            {{ $_common.formatNub(scope.row.num) }}
          </template>
        </el-table-column>
        <el-table-column prop="batchCost" label="批次成本" min-width="100">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.batchCost) }}
          </template>
        </el-table-column>
        <el-table-column prop="total" label="总成本" min-width="100">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.batchCost * scope.row.num) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          prop="goodsCode"
          label="操作"
          min-width="110"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="goBatch(scope.row)">
              批次追踪
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <FooterPage
        :page-size="pre_page"
        :total-page.sync="total"
        :current-page.sync="page"
        @pageChange="pageChange"
        @sizeChange="sizeChange"
      ></FooterPage>
    </template>
  </vxe-modal>
</template>

<script>
  import FooterPage from "@/component/common/FooterPage";
  import { getAllBatch } from "@/api/Stock";
  export default {
    name: "Physicalnventory",
    components: {
      FooterPage,
    },
    model: {
      prop: "isShow",
      event: "change",
    },
    props: {
      isShow: {
        type: Boolean,
        default: false,
      },
      isCheck: {
        type: Boolean,
        default: true,
      },
      id: {
        type: [Number, String],
        default: 0,
      },
      skuId: {
        type: [Number, String],
        default: 0,
      },
      warehouseId: {
        type: [Number, String],
        default: 0,
      },
    },
    data() {
      return {
        choose_data: [],
        activityGoods: [],
        pre_page: 10,
        page: 1,
        // modalShow: this.clientModalShow,
        selectedIndex: null,
        searchForm: {
          keyWord: "",
        },
        total: 0,
        loading: false,
        pageLayout: "total, prev, pager, next",
        queryList: [],
      };
    },
    created() {
      this.pageChange(1);
    },
    methods: {
      async getList() {
        this.loading = true;
        const { data, pageTotal } = await getAllBatch({
          page: this.page,
          pageSize: this.pre_page,
          skuId: this.skuId,
          materielId: this.id,
          warehouseId: this.warehouseId,
        });
        this.loading = false;

        this.queryList = data;
        this.total = pageTotal;
      },
      // 关闭弹窗
      cancel() {
        this.$emit("cancel");
      },
      // 改变页数
      pageChange(val) {
        this.page = val;
        this.getList();
      },
      sizeChange(val) {
        this.pre_page = val;
        this.pageChange(1);
      },
      goBatch(row) {
        this.cancel();
        this.$router.push(
          `/stock/WarehouseAdmin/Batch?no=${row.batchNo}&warehouseId=${row.warehouseId}&skuId=${this.skuId}`
        );
      },
    },
  };
</script>

<style scoped></style>
