<template>
  <div class="app-container">
    <div class="header">
      <div style="display: flex; flex-direction: row; align-items: center">
        <div class="name">
          {{ info ? info.spuName : "" }}
        </div>
        <div class="no">
          商品ID:{{ info ? info.spuId : "" }}
          <i class="el-icon-document-copy" @click="copy"></i>
        </div>
      </div>
      <div>
        出入库时间：<el-date-picker
          v-model="dateRange"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="datePicker"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="main">
      <div class="item">
        <div class="value">
          {{ tj ? tj.canOutboundNum : 0 }}
        </div>
        <div class="label">当前库存数量({{info.storeUnit}})</div>
      </div>
      <div class="item">
        <div class="value">
          {{ tj ? tj.canOutboundTotalPrice : 0 }}
        </div>
        <div class="label">当前库存总金额(￥)</div>
      </div>
      <div class="item">
        <div class="value">
          {{ tj ? tj.storeNum : 0 }}
        </div>
        <div class="label">入库总数量({{info.storeUnit}})</div>
      </div>
      <div class="item">
        <div class="value">
          {{ tj ? tj.storeTotalPrice : 0 }}
        </div>
        <div class="label">入库总金额(￥)</div>
      </div>
      <div class="item">
        <div class="value">
          {{ tj ? tj.outBoundNum : 0 }}
        </div>
        <div class="label">出库数量({{info.storeUnit}})</div>
      </div>
      <div class="item">
        <div class="value">
          {{ tj ? tj.outBoundTotalPrice : 0 }}
        </div>
        <div class="label">出库总金额(￥)</div>
      </div>
      <div class="item">
        <div class="value">
          {{ tj ? tj.outBoundProfit : 0 }}
        </div>
        <div class="label">已出库利润(￥)</div>
      </div>
    </div>
    <el-tabs v-model="queryParams.storeOutboundType" @tab-click="getList">
      <el-tab-pane label="入库记录" :name="0">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="100px"
        >
          <el-form-item prop="key">
            <el-input
              v-model="queryParams.key"
              style="width: 200px"
              placeholder="入库单号/入库订单名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="入库时间" prop="storeTime">
            <el-date-picker
              v-model="queryParams.storeTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="rksjchange"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getList"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
          <el-row :gutter="10" class="mb8">
            <el-button icon="el-icon-refresh" size="mini" @click="handleExportr"
              >批量导出</el-button
            >
          </el-row>
        </el-form>
        <el-table
          v-loading="loading"
          :data="tableList"
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="入库单号" align="center" prop="storeOdd" width="200" />
          <el-table-column label="入库订单名称" align="center" prop="storeOddName" />
          <el-table-column label="入库时间" align="center" prop="storeDate" width="200" />
          <el-table-column label="商品规格信息" align="storeGoods" width="120">
            <template slot-scope="scope">
              skuId:{{ scope.row.skuId }}<br />
              规格:{{
                scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsName : ""
              }}<br />
              内容:{{
                scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsValue : ""
              }}
              <br />计量单位:{{ scope.row.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="单位换算" align="center" prop="storeUnit">
            <template slot-scope="scope">
              <div>
                1{{ scope.row.storeUnit }} ≈{{ scope.row.unitConversion
                }}{{ scope.row.storeUnit }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="入库数量" align="center" prop="storeNum" />
          <el-table-column label="单价(￥)" align="center" prop="storeUnitPrice">
            <template slot-scope="scope">
              {{ scope.row.storeUnitPrice }}元/ {{ scope.row.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="合计金额(￥)" align="center" prop="totalStorePrice" />
          <el-table-column label="当前库存数量" align="center" prop="canOutboundNum" />
          <el-table-column
            label="当前库存总金额(￥)"
            align="center"
            prop="canOutboundTotalPrice"
          />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="出库记录" :name="1">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="100px"
        >
          <el-form-item prop="key">
            <el-input
              v-model="queryParams.key"
              style="width: 300px"
              placeholder="出库单号,关联入库订单编号,关联入库订单商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="outboundType" label="出库类型">
            <el-select v-model="queryParams.outboundType" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="销售出库" value="1" />
              <el-option label="平台出库" value="2" />
              <el-option label="下捡出库" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="出库时间" prop="outboundTime">
            <el-date-picker
              v-model="queryParams.outboundTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="cksjchange"
              style="width: 200px"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getList"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
          <el-row :gutter="10" class="mb8">
            <el-button icon="el-icon-refresh" size="mini" @click="handleExportc"
              >批量导出</el-button
            >
          </el-row>
        </el-form>
        <el-table
          :data="tableList"
          @selection-change="handleSelectionChange"
          row-key="id"
          v-loading="loading"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="出库单号" align="center" prop="outboundOdd" />

          <el-table-column label="出库类型" align="center" prop="outboundType">
            <template slot-scope="scope">
              {{
                scope.row.outboundType == 0
                  ? "下捡出库"
                  : scope.row.outboundType == 1
                  ? "销售出库"
                  : scope.row.outboundType == 2
                  ? "平台出库"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="出库时间" align="center" prop="outboundDate" />
          <el-table-column
            label="关联入库单号"
            align="center"
            prop="associationStoreNum"
          />
          <el-table-column
            label="关联入库订单名称"
            align="center"
            prop="associationStoreName"
          />
          <el-table-column label="商品规格信息" align="storeGoods" width="120">
            <template slot-scope="scope">
              skuId:{{ scope.row.skuId }}<br />
              规格:{{
                scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsName : ""
              }}<br />
              内容:{{
                scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsValue : ""
              }}
              <br />计量单位:{{ scope.row.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="单位换算" align="center" prop="storeUnit">
            <template slot-scope="scope">
              <div>
                1{{ scope.row.storeUnit }} ≈{{ scope.row.unitConversion
                }}{{ scope.row.storeUnit }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="浮动重量" align="center">
            <template slot-scope="scope">
              {{ scope.row.floatingWeight }} {{ scope.row.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="出库总数量" align="center" prop="outboundNum" />
          <el-table-column label="销售单价(￥)" align="center" prop="salePrice" />
          <el-table-column
            label="合计金额(￥)"
            align="center"
            prop="outBoundTotalPrice"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { outboundStoreSerialStatistics, queryPageDetail } from "@/api/manage/storage";
export default {
  data() {
    return {
      info: {},
      tableList: [],
      tj: {},
      queryParams: {
        pageSize: 10,
        pageNo: 1,
        storeOutboundType: 0,
        outboundType: "",
        outboundTime: "",
        storeGoodsId: this.$route.query.storeGoodsId,
        outboundStartTime: "",
        outboundEndTime: "",
        storeStartTime: "",
        storeEndTime: "",
        storeTime: "",
      },
      total: 0,
      dateRange: [],
      loading: false,
      ids: [],
    };
  },
  mounted() {
    this.info = this.$route.query;
    console.log(this.info);
    
    this.getStorageInfo();
    this.getList();
  },
  methods: {
    handleExportr() {
      this.queryParams.ids = this.ids.toString();
      this.download(
        "system/outboundStoreSerial/storeExport",
        {
          ...this.queryParams,
        },
        `入库流水表_${new Date().getTime()}.xlsx`
      );
    },
    handleExportc() {
      this.queryParams.ids = this.ids.toString();
      this.download(
        "system/outboundStoreSerial/outboundExport",
        {
          ...this.queryParams,
        },
        `出库流水表_${new Date().getTime()}.xlsx`
      );
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    datePicker(val) {
      this.getStorageInfo(val);
    },
    resetQuery() {
      this.queryParams.storeTime = "";
      this.queryParams.outboundTime = "";
      this.queryParams.outboundStartTime = "";
      this.queryParams.outboundEndTime = "";
      this.queryParams.storeStartTime = "";
      this.queryParams.storeEndTime = "";
      this.resetForm("queryForm");
      this.getList();
    },
    cksjchange(val) {
      this.queryParams.outboundStartTime = val[0];
      this.queryParams.outboundEndTime = val[1];
    },
    rksjchange(val) {
      this.queryParams.storeStartTime = val[0];
      this.queryParams.storeEndTime = val[1];
    },

    getList() {
      this.ids = [];
      this.loading = true;
      queryPageDetail(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.records;
          this.loading = false;
          this.total = res.data.total;
        }
      });
    },

    getStorageInfo(val) {
      let params = {
        storeGoodsId: this.info.storeGoodsId,
      };
      if (val) {
        params.startTime = val[0];
        params.endTime = val[1];
      }
      outboundStoreSerialStatistics(params).then((res) => {
        if (res.code == 200) {
          this.tj = res.data;
        }
      });
    },

    copy() {
      const textarea = document.createElement("textarea");
      textarea.value = this.info.spuId;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      this.$message.success("复制成功");
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .name {
    font-size: 18px;
    font-weight: 500;
  }
  .no {
    margin-left: 20px;
    font-size: 18px;
    font-weight: 500;
  }
}
.main1 {
  margin-top: 20px;
  border-radius: 20px;
  padding: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.main {
  margin-top: 20px;
  background: #f4f4f4;
  border-radius: 20px;
  padding: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
    line-height: 30px;
    .value {
      font-size: 24px;
    }
  }
}
</style>
