<!--库存流水-->
<template>
  <ContainerQuery>
    <el-button
      v-if="$accessCheck($Access.flowingGetInventoryDetailsAll)"
      slot="left"
      size="small"
      type="primary"
      @click="getInventoryDetailsAll(1)"
    >
      导出
    </el-button>

    <div
      v-if="$accessCheck($Access.flowingSearchAllInventoryDetails)"
      slot="more"
    >
      <el-form inline size="small">
        <el-form-item>
          <el-input
            v-model="searchData.keyWord"
            placeholder="商品名称/单据编号"
            clearable
            style="width: 200px"
            @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>
          <el-select
            v-model="searchData.warehouseId"
            filterable
            placeholder="选择仓库"
            style="width: 150px"
            @change="getInventoryDetailsAll()"
          >
            <el-option
              v-for="item in stock_list"
              :key="item.id"
              :label="item.warehouseName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchData.source"
            filterable
            placeholder="单据类型"
            style="width: 150px"
            clearable
            @change="pageChange(1)"
          >
            <el-option
              v-for="item in source_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="operatorName"
            placeholder="选择操作人"
            clearable
            style="width: 150px"
            @clear="clearStaff"
            @blur="operatorName = ''"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="staff_show = true"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="search_time"
            type="daterange"
            :unlink-panels="true"
            range-separator="-"
            start-placeholder="库存流水开始时间"
            end-placeholder="库存流水结束时间"
            @change="searchTimeChange"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <!-- // 搜索 -->
    <!-- 表格 -->
    <el-table :data="flowingData">
      <el-table-column
        prop="id"
        label="ID"
        fixed="left"
        min-width="50"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="sourceNo"
        align="left"
        label="单据编号"
        show-overflow-tooltip
        min-width="180"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.sourceId"
            class="click-div"
            @click="goDetail(scope.row)"
          >
            {{ scope.row.sourceNo }}
          </span>
          <span v-else>{{ scope.row.sourceNo }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="timeFlag"
        prop="createTime"
        align="left"
        label="制单时间"
        min-width="160"
      >
        <template slot-scope="scope">
          {{ $_common.formatDate(scope.row.createTime, "yyyy-MM-dd hh:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="typeOfDocumentFlag"
        prop="sourceName"
        align="left"
        label="单据类型"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="materielName"
        align="left"
        label="商品名称"
        min-width="120"
      ></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="outFlag"-->
      <!--        prop="goodsWeight"-->
      <!--        align="left"-->
      <!--        label="出入库"-->
      <!--        min-width="120"-->
      <!--      >-->
      <!--        <template slot-scope="scope">-->
      <!--          &lt;!&ndash; +入库，颜色为绿色  -为出库，颜色为红色 &ndash;&gt;-->
      <!--          <span v-if="scope.row.actionType === 5" class="success-status">-->
      <!--            +{{ $_common.formatNub(scope.row.inventoryNum) }}-->
      <!--          </span>-->
      <!--          <span v-else class="danger-status">-->
      <!--            -{{ $_common.formatNub(scope.row.inventoryNum) }}-->
      <!--          </span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="出库" min-width="120">
        <template slot-scope="scope">
          <!-- +入库，颜色为绿色  -为出库，颜色为红色 -->
          <span v-if="scope.row.actionType === 4" class="danger-status">
            -{{ $_common.formatNub(scope.row.inventoryNum) }}
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="入库" min-width="120">
        <template slot-scope="scope">
          <!-- +入库，颜色为绿色  -为出库，颜色为红色 -->
          <span v-if="scope.row.actionType === 5" class="success-status">
            +{{ $_common.formatNub(scope.row.inventoryNum) }}
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="surplusFlag"
        prop="inventoryChangeNum"
        align="left"
        label="剩余量"
        min-width="120"
      >
        <template slot-scope="scope">
          {{ $_common.formatNub(scope.row.inventoryChangeNum) }}
        </template>
      </el-table-column>
      <el-table-column prop="otherNum" label="其他单位">
        <template slot-scope="scope">
          <span v-if="scope.row.isEq === 5">
            {{ $_common.formatNub(scope.row.otherNum) }}
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="averageFlag"
        v-show="$accessCheck($Access.moneyshowcostPriceShow)"
        prop="averageCost"
        align="left"
        label="平均成本"
        min-width="120"
      >
        <template slot-scope="scope">
          {{ $_common.formattedNumber(scope.row.averageCost) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="operatorName"
        align="center"
        label="操作人"
        min-width="100"
      >
        <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>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total_data"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <!--    业务员-->
    <staffListModal
      v-if="staff_show"
      :is-check="false"
      :is-show="staff_show"
      @cancel="staff_show = false"
      @confirm="selStaff"
    />
  </ContainerQuery>
</template>

<script>
  import staffListModal from "@/component/common/staffListModal.vue";
  import {
    getAllWarehouse,
    getInventoryDetailsAll,
    exportGetInventoryDetailsAll,
    searchAllInventoryDetails,
    exportSearchAllInventoryDetails,
  } from "@/api/Stock";
  import { mapGetters } from "vuex";
  export default {
    name: "Flowing",
    components: {
      staffListModal,
    },
    data() {
      return {
        search_time: [],
        shopId: "",
        shopName: "",
        goodsId: "",
        operatorName: "",
        staff_show: false,
        show_shop: false,
        show_selgoods: false,
        operator_list: [],
        page: 1, // 页码
        pageSize: 10, // 每页显示条数
        total_data: 0,
        flowingData: [], // 流水数据
        value: "",
        // 商品列表
        sheetTypeData: [
          { value: "CGRK", label: "采购入库单" },
          { value: "CTCK", label: "采购退货出库" },
          { value: "XSCK", label: "销售出库单" },
          { value: "XTRK", label: "销售退货入库" },
          { value: "QCKC", label: "期初库存" },
        ],
        stock_list: [],
        source_list: [
          {
            label: "采购入库",
            value: 3,
          },
          {
            label: "销售出库",
            value: 5,
          },
          {
            label: "调拨出库",
            value: 8,
          },
          {
            label: "调拨入库",
            value: 12,
          },
          {
            label: "采购退货出库",
            value: 14,
          },
          {
            label: "销售退货入库",
            value: 15,
          },
        ],
        searchData: {
          keyWord: "",
          skuId: "",
          source: "",
          warehouseId: "", // 仓库ID
          operatorId: "", // 操作员ID
          startTime: "", // 制单开始时间
          endTime: "", // 制单结束时间
        },
        checkList: [
          "制单时间",
          "单据类型",
          "规格",
          // "出入库",
          "剩余量",
          "平均成本(元)",
        ],
        columns: [
          {
            label: "制单时间",
          },
          {
            label: "单据类型",
          },
          {
            label: "规格",
          },
          // {
          //   label: "出入库",
          // },
          {
            label: "剩余量",
          },
          {
            label: "平均成本(元)",
          },
        ],
        timeFlag: true,
        typeOfDocumentFlag: true,
        unitFlag: true,
        // outFlag: true,
        surplusFlag: true,
        averageFlag: true,
        merchantId: "", // 多商户商户ID
      };
    },
    computed: {
      ...mapGetters({ storeData: "MUser/storeData" }),
    },
    async created() {
      if (this.systemType === 3) {
        this.merchantId = this.storeData.merchantData.id;
      }
      if (this.$route.query.warehouseId) {
        this.searchData.warehouseId = parseInt(this.$route.query.warehouseId);
      }
      if (this.$route.query.skuId) {
        this.searchData.skuId = this.$route.query.skuId;
      }
      this.searchData.startTime =
        new Date(this.$_common.showMonthFirstDay()).getTime() / 1000;
      this.searchData.endTime = new Date().getTime() / 1000;
      this.search_time = [
        new Date(this.$_common.showMonthFirstDay()).getTime(),
        new Date().getTime(),
      ];
      await this.getAllWarehouse();
      await this.getData();
    },
    activated() {
      if (this.$_isInit()) return;
      if (this.$route.query.warehouseId) {
        this.searchData.warehouseId = parseInt(this.$route.query.warehouseId);
      }
      if (this.$route.query.skuId) {
        this.searchData.skuId = this.$route.query.skuId;
      }
      this.getData();
    },
    methods: {
      async getAllWarehouse() {
        const { data } = await getAllWarehouse({
          page: 1,
          pageSize: 999,
        });

        this.stock_list = data;
        if (!this.searchData.warehouseId) {
          this.searchData.warehouseId = data[0].id;
        }
      },
      // 获取流水列表
      async getInventoryDetailsAll(exports) {
        let params = {
          merchantId: this.merchantId,
          skuId: this.searchData.skuId,
          warehouseId: this.searchData.warehouseId,
          operatorId: this.searchData.operatorId,
          page: this.page,
          pageSize: this.pageSize,
        };
        if (exports === 1) {
          params.export = 1;
          const target = await exportGetInventoryDetailsAll(params);
        } else {
          const data = await getInventoryDetailsAll(params);

          this.flowingData = data.data;
          this.total_data = data.pageTotal;
        }
      },
      //  流水搜索
      async searchAllInventoryDetails(exports) {
        let params = {
          merchantId: this.merchantId,
          warehouseId: this.searchData.warehouseId,
          skuId: this.searchData.skuId,
          operatorId: this.searchData.operatorId,
          start: parseInt(this.searchData.startTime),
          end: parseInt(this.searchData.endTime),
          search: this.searchData.keyWord,
          page: this.page,
          pageSize: this.pageSize,
          source: this.searchData.source,
        };
        if (exports) {
          params.export = 1;
          const target = await exportSearchAllInventoryDetails(params);
        } else {
          const data = await searchAllInventoryDetails(params);

          this.flowingData = data.data;
          this.total_data = data.pageTotal;
        }
      },
      //  判断搜索和列表接口
      getData(exports) {
        const obj = {
          start: this.searchData.startTime,
          end: this.searchData.endTime,
          search: this.searchData.keyWord,
        };
        const isKey = this.$_common.isSerch(obj);
        if (isKey) {
          this.searchAllInventoryDetails(exports);
        } else {
          this.getInventoryDetailsAll(exports);
        }
      },
      // 选择操作人
      selStaff(row) {
        this.searchData.operatorId = row[0].id;
        this.operatorName = row[0].staffName;
        this.pageChange(1);
      },
      clearStaff() {
        this.searchData.operatorId = "";
        this.operatorName = "";
        this.pageChange(1);
      },
      pageChange(page) {
        this.page = page;
        this.getData();
      },
      sizeChange(size) {
        this.pageSize = size;
        this.pageChange(1);
      },
      //  选择时间
      searchTimeChange(val) {
        // 时间组件导出数据
        if (val && val.length) {
          this.searchData.startTime = parseInt(val[0] / 1000);
          this.searchData.endTime = parseInt(val[1] / 1000) + 86399;
        } else {
          this.searchData.startTime = "";
          this.searchData.endTime = "";
        }
        this.pageChange(1);
      },
      // 导出
      async exportData() {},
      change() {
        this.timeFlag = this.checkList.some((item) => item === "制单时间");
        this.typeOfDocumentFlag = this.checkList.some(
          (item) => item === "单据类型"
        );
        this.unitFlag = this.checkList.some((item) => item === "规格");
        // this.outFlag = this.checkList.some((item) => item === "出入库");
        this.surplusFlag = this.checkList.some((item) => item === "剩余量");
        this.averageFlag = this.checkList.some(
          (item) => item === "平均成本(元)"
        );
      },
      goDetail(row) {
        if (
          row.source === 30 ||
          row.source === 15 ||
          row.source === 3 ||
          row.source === 12
        ) {
          this.$router.push("/stock/OutIn/storageInfo/" + row.sourceId);
        }
        if (row.source === 5 || row.source === 14 || row.source === 8) {
          this.$router.push("/stock/OutIn/outgoingInfo/" + row.sourceId);
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .box-search-form .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  .custom-table-checkbox {
    .el-checkbox {
      display: block !important;
      margin: 0 0 $base-padding/4 0;
    }
  }
</style>
