<template>
  <ContainerQuery>
    <div v-if="$accessCheck($Access.queryGetInventoryAll)" slot="left">
      <el-button
        size="small"
        type="primary"
        plain
        @click="getInventoryByWarehouseId(1)"
      >
        导出
      </el-button>
    </div>
    <div slot="more">
      <el-form inline size="small">
        <el-form-item>
          <el-input
            v-model="keyWord"
            placeholder="商品名称"
            clearable
            style="width: 220px"
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="pageChange(1)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <GoodsCategory
            v-model="searchCate.categoryPath"
            check-strictly
            clearable
            size="small"
            width="150"
            @change="categoryChange"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="warehouseId"
            filterable
            placeholder="请选择仓库"
            @change="pageChange(1)"
          >
            <el-option
              v-for="item in warehouse_list"
              :key="item.id"
              :label="item.warehouseName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table :data="stock_list">
      <el-table-column
        prop="materielCode"
        label="商品编码"
        fixed="left"
        min-width="140"
      ></el-table-column>
      <el-table-column prop="image" label="商品" min-width="210">
        <template slot-scope="scope">
          <div class="clearfix">
            <div
              v-if="scope.row.images && scope.row.images.length"
              class="float_left"
            >
              <el-image :src="scope.row.images[0]" fit="cover" />
            </div>
            <div class="float_left goods-name-view">
              {{ scope.row.materielName }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="unitName" label="规格" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.unitName }};{{ scope.row.skuName }}
        </template>
      </el-table-column>
      <el-table-column prop="inventoryNum" label="仓库库存" min-width="100">
        <template slot-scope="scope">
          {{ $_common.formatNub(scope.row.inventoryNum) }}
        </template>
      </el-table-column>
      <el-table-column prop="skuValue" label="换算比例" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.isEq === 4">
            {{ scope.row.skuValue || "--" }}
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="skuNum" label="换算库存" min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.isEq === 5">
            {{ $_common.formatNub(scope.row.otherNum) }}
          </span>
          <span v-else>
            {{ scope.row.skuNum }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total_data"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <!--    库存分布弹框-->
  </ContainerQuery>
</template>

<script>
  // import PhysicalnventoryD from "../component/physicalnventory.vue";
  import GoodsCategory from "@/component/common/GoodsCategory.vue";

  import {
    getAllWarehouse,
    getInventoryByWarehouseId,
    exportgetInventoryByWarehouseId,
    exportGetInventoryAll,
    getInventoryAll,
  } from "@/api/Stock";
  import { mapGetters } from "vuex";
  export default {
    name: "WarehouseInventory",
    components: {
      // PhysicalnventoryD,
      GoodsCategory,
    },
    data() {
      return {
        queryId: 0,
        goodsId: "",
        skuId: "",
        keyWord: "",
        warehouseId: "", // 仓库id,
        categoryId: "",
        category_props: {
          value: "category_id",
          label: "category_name",
          children: "children",
        },
        searchCate: {
          categoryPath: [],
        },
        dialogVisible: false,
        page: 1,
        pageSize: 10,
        total_data: 1,
        amount: 0,
        count: 0,
        title_data: "",
        // 商品列表
        goods_list: {
          goodsId: "",
          goodsName: "",
        },
        stock_list: [], // 库存列表
        warehouse_list: [],
        checked: "",
        stockInquiryFlag: false,
        stockInquiry_data: [], // 库存分布
        stockInquiry_loading: false, // 库存分部加载
        merchantId: "", // 多商户商户ID
      };
    },
    computed: {
      ...mapGetters({ storeData: "MUser/storeData" }),
    },
    async created() {
      if (this.systemType === 3) {
        this.merchantId = this.storeData.merchantData.id;
      }
      await this.getAllWarehouse();
      await this.getInventoryByWarehouseId();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getInventoryByWarehouseId();
    },
    methods: {
      // 分类下拉框
      categoryChange(val) {
        this.categoryId = val[val.length - 1];
        this.pageChange(1);
      },
      //  选择仓库
      async getAllWarehouse() {
        const { data } = await getAllWarehouse({
          page: 1,
          pageSize: 999,
        });

        this.warehouse_list = data;
        this.warehouseId = data[0].id;
      },
      //  选择商品的数据
      selMoreGoods(val) {
        if (val.length > 1) {
          this.$message({
            type: "error",
            message: "请选择一个品牌！",
          });
          return;
        }
        this.goods_list.goodsId = val[0].id;
        this.goods_list.goodsName = val[0].title;
      },
      // 切页page
      pageChange(page) {
        this.page = page;
        this.getInventoryByWarehouseId();
      },
      // 切页pageSize
      sizeChange(size) {
        this.pageSize = size;
        this.pageChange(1);
      },
      async getInventoryByWarehouseId(exports) {
        let params = {
          merchantId: this.merchantId,
          search: this.keyWord,
          warehouseId: this.warehouseId,
          page: this.page,
          pageSize: this.pageSize,
          categoryId: this.categoryId,
        };
        if (exports) {
          params.export = 1;
          const target = await exportgetInventoryByWarehouseId({
            ...params,
          });
        } else {
          const res = await getInventoryByWarehouseId({
            ...params,
          });
          this.stock_list = res.data;
          this.total_data = res.pageTotal;
          // this.amount = data.amount;
          // this.count = data.count;
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .num-ul {
    line-height: 50px;
    padding: 0 16px;
  }
  .num-ul > li {
    display: inline-block;
    padding-right: 10px;
  }
  .custom-table-checkbox {
    .el-checkbox {
      display: block !important;
      margin: 0 0 $base-padding/4 0;
    }
  }
</style>
