<template>
  <ContainerQuery>
    <div v-if="$accessCheck($Access.queryGetInventoryAll)" slot="left">
      <el-button size="small" type="primary" plain @click="getInventoryAll(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="haveInventoryNum"
            clearable
            style="width: 150px"
            placeholder="库存状态"
            @change="pageChange(1)"
          >
            <el-option
              v-for="item in status_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>-->
      </el-form>
    </div>
    <!-- 搜索 -->
    <ul class="num-ul">
      <li class="num-li">
        总商品数
        <i style="color: #f40">{{ count || 0 }}</i>
      </li>
      <li class="num-li">
        总成本
        <i style="color: #f40">{{ $_common.formattedNumber(amount) || 0 }}</i>
      </li>
    </ul>
    <!-- 表格 -->
    <el-table :data="stock_list" @sort-change="sortChange">
      <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 label="分布仓库" min-width="100">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ `${scope.row.count}个仓库有库存` }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        v-if="unitFlag"
        prop="unitName"
        label="规格"
        min-width="80"
      >
        <template slot-scope="scope">
          {{ scope.row.unitName }};{{ scope.row.skuName }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="vendibilityFlag"
        prop="inventoryNum"
        label="可售库存"
        min-width="100"
        sortable="custom"
      >
        <template slot-scope="scope">
          {{ $_common.formatNub(scope.row.inventoryNum) }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="occupationFlag"
        prop="lockInventory"
        label="占用库存"
        min-width="100"
        sortable="custom"
      >
        <template slot-scope="scope">
          {{ $_common.formatNub(scope.row.lockInventory) }}
        </template>
      </el-table-column>
      <el-table-column label="现有库存" min-width="80">
        <template slot-scope="scope">
          {{
            $_common.formatNub(
              $NP.plus(scope.row.inventoryNum, scope.row.lockInventory)
            )
          }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="conversionRatioFlag"
        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
        v-if="conversionOfInventory"
        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-column align="left" width="160" fixed="right" label="操作">
        <template slot="header" slot-scope="scope">
          <span v-if="false">{{ scope.$index }}</span>
          <span class="operation">操作</span>
          <el-popover popper-class="custom-table-checkbox" trigger="click">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="(item, index) in columns"
                :key="index"
                :label="item.label"
                @change="change"
              ></el-checkbox>
            </el-checkbox-group>
            <el-button
              slot="reference"
              icon="el-icon-setting"
              type="text"
            ></el-button>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="getWarehouseInventory(scope.row.skuId)"
          >
            库存分布
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    批次明细-->
    <PhysicalnventoryD
      v-if="inventory_show"
      :id="queryId"
      v-model="inventory_show"
      :sku-id="skuId"
      :warehouse-id="warehouseId"
      @cancel="inventory_show = false"
    />
    <!--    库位分布-->
    <InventoryDistribution
      v-if="distribution_show"
      v-model="distribution_show"
      :sku-id="skuId"
      :warehouse-id="warehouseId"
      @close="distribution_show = false"
    />
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total_data"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <!--    库存分布弹框-->
    <vxe-modal
      v-model="stockInquiryFlag"
      title="库存分布"
      width="70%"
      @close="stockInquiryFlag = false"
    >
      <el-table
        v-loading="stockInquiry_loading"
        :data="stockInquiry_data"
        style="width: 100%"
      >
        <el-table-column
          prop="materielCode"
          label="商品编码"
          fixed="left"
          min-width="140"
        ></el-table-column>
        <el-table-column prop="image" label="商品" min-width="220">
          <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="warehouseName"
          label="仓库"
          show-overflow-tooltip
          min-width="140"
        ></el-table-column>
        <el-table-column prop="inventoryNum" label="可售库存" min-width="80">
          <template slot-scope="scope">
            {{ $_common.formatNub(scope.row.inventoryNum) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="skuValue"
          label="换算比例"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="skuNum"
          label="换算库存"
          min-width="80"
        ></el-table-column>
        <el-table-column prop="costPrice" min-width="80" label="平均成本">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.costPrice) }}
          </template>
        </el-table-column>
        <el-table-column prop="total" label="总成本" min-width="90">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.total) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="240">
          <template slot-scope="scope">
            <el-button type="text" @click="lookQuery(scope.row)">
              批次明细
            </el-button>
            <el-button
              v-if="$accessCheck($Access.flowing)"
              type="text"
              @click="goFlowing(scope.row)"
            >
              库存流水
            </el-button>
            <el-button
              v-if="$accessCheck($Access.flowing)"
              type="text"
              @click="distributionlook(scope.row)"
            >
              库位分布
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </vxe-modal>
  </ContainerQuery>
</template>

<script>
  import PhysicalnventoryD from "../component/physicalnventory.vue";
  import InventoryDistribution from "../component/InventoryDistribution.vue";
  import GoodsCategory from "@/component/common/GoodsCategory.vue";
  import {
    getAllWarehouse,
    exportGetInventoryAll,
    getInventoryAll,
    getWarehouseInventory,
  } from "@/api/Stock";
  import { mapGetters } from "vuex";
  export default {
    name: "Query",
    components: {
      PhysicalnventoryD,
      InventoryDistribution,
      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,
        distribution_show: false, //库位分布弹窗
        inventory_show: false,
        page: 1,
        pageSize: 10,
        total_data: 1,
        amount: 0,
        count: 0,
        title_data: "",
        // 商品列表
        goods_list: {
          goodsId: "",
          goodsName: "",
        },
        stock_list: [], // 库存列表
        warehouse_list: [],
        checked: "",
        checkList: [
          "规格",
          "可售库存",
          "占用库存",
          "换算比例",
          "换算库存",
          // "库存明细",
          // "平均成本",
          // "总成本",
        ],
        columns: [
          {
            label: "规格",
          },
          {
            label: "可售库存",
          },
          {
            label: "占用库存",
          },
          {
            label: "换算比例",
          },
          {
            label: "换算库存",
          },
          // {
          //   label: "库存明细",
          // },
          // {
          //   label: "平均成本",
          // },
          // {
          //   label: "总成本",
          // },
        ],
        unitFlag: true,
        vendibilityFlag: true,
        occupationFlag: true,
        conversionRatioFlag: true,
        conversionOfInventory: true,
        // inventoryDetailFlag: true,
        averageFlag: true,
        alwaysFlag: true,
        stockInquiryFlag: false,
        stockInquiry_data: [], // 库存分布
        stockInquiry_loading: false, // 库存分部加载
        merchantId: "", // 多商户商户ID
        haveInventoryNum: "",
        status_list: [
          { label: "有库存", value: 5 },
          { label: "无库存", value: 4 },
          { label: "负库存", value: 3 },
        ],
        sortType: 0, //排序
      };
    },
    computed: {
      ...mapGetters({ storeData: "MUser/storeData" }),
    },
    async created() {
      if (this.systemType === 3) {
        this.merchantId = this.storeData.merchantData.id;
      }
      // await this.getAllWarehouse();
      await this.getInventoryAll();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getInventoryAll();
    },
    methods: {
      // 批次明细
      lookQuery(row) {
        this.queryId = row.materielId;
        this.skuId = row.skuId;
        this.warehouseId = row.warehouseId;
        this.inventory_show = true;
      },
      // 库位分布
      distributionlook(row) {
        this.skuId = row.skuId;
        this.warehouseId = row.warehouseId;
        this.distribution_show = true;
      },
      // 分类下拉框
      categoryChange(val) {
        this.categoryId = val[val.length - 1];
        this.pageChange(1);
      },
      // 库存流水
      goFlowing(row) {
        let name = "";
        if (row.materielName.indexOf("/") > -1) {
          // name = row.materielName.join('/')
          row.materielName.split("/").forEach((item) => {
            name = name + "-" + item;
          });
        } else {
          name = row.materielName;
        }
        this.stockInquiryFlag = false;
        this.$router.push({
          path: `/stock/WarehouseAdmin/flowing?warehouseId=${row.warehouseId}&skuId=${row.skuId}`,
        });
      },
      //  选择仓库
      async getAllWarehouse() {
        const { data } = await getAllWarehouse({
          page: 1,
          pageSize: 999,
        });

        this.warehouse_list = data;
        this.warehouseId = data[0].id;
      },
      // 导出按钮
      async getInventoryAll(exports) {
        let params = {
          merchantId: this.merchantId,
          materielName: this.keyWord,
          warehouseId: this.warehouseId,
          categoryId: this.categoryId,
          page: this.page,
          pageSize: this.pageSize,
          haveInventoryNum: this.haveInventoryNum,
          sortType: this.sortType,
        };
        if (exports) {
          params.export = 1;
          const target = await exportGetInventoryAll({
            ...params,
          });
        } else {
          const data = await getInventoryAll({
            ...params,
          });

          this.stock_list = data.data;
          this.total_data = data.pageTotal;
          this.amount = data.amount;
          this.count = data.count;
        }
      },
      //  选择商品的数据
      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.getInventoryAll();
      },
      // 切页pageSize
      sizeChange(size) {
        this.pageSize = size;
        this.pageChange(1);
      },
      // 库存分布
      async getWarehouseInventory(skuId) {
        this.stockInquiryFlag = true;
        try {
          this.stockInquiry_loading = true;
          const { data } = await getWarehouseInventory(skuId);
          this.stockInquiry_loading = false;
          this.stockInquiry_data = data;
        } finally {
          this.stockInquiry_loading = false;
        }
      },
      // 自定义表格
      change() {
        this.unitFlag = this.checkList.some((item) => item === "库存单位");
        this.propertyFlag = this.checkList.some((item) => item === "库存属性");
        this.vendibilityFlag = this.checkList.some(
          (item) => item === "可售库存"
        );
        this.occupationFlag = this.checkList.some(
          (item) => item === "占用库存"
        );
        this.conversionRatioFlag = this.checkList.some(
          (item) => item === "换算比例"
        );
        this.conversionOfInventory = this.checkList.some(
          (item) => item === "换算库存"
        );
        // this.inventoryDetailFlag = this.checkList.some(
        //   (item) => item === "库存明细"
        // );
        // this.averageFlag = this.checkList.some((item) => item === "平均成本");
        // this.alwaysFlag = this.checkList.some((item) => item === "总成本");
      },
      sortChange(val) {
        if (!val.column.order) {
          this.sortType = 0;
          this.pageChange(1);
          return;
        }
        if (
          val.column.label === "占用库存" &&
          val.column.order === "ascending"
        ) {
          this.sortType = 4;
        }
        if (
          val.column.label === "占用库存" &&
          val.column.order === "descending"
        ) {
          this.sortType = 3;
        }
        if (
          val.column.label === "可售库存" &&
          val.column.order === "ascending"
        ) {
          this.sortType = 2;
        }
        if (
          val.column.label === "可售库存" &&
          val.column.order === "descending"
        ) {
          this.sortType = 1;
        }
        this.pageChange(1);
      },
    },
  };
</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>
