<template>
  <div class="app-container">
    <div class="header">
      <div style="display: flex; flex-direction: row; align-items: center">
        <div class="name">
          {{ info ? info.storeOddName : "" }}
        </div>
        <div class="no">
          入库单号:{{ info ? info.storeOdd : "" }}
          <i class="el-icon-document-copy" @click="copy"></i>
        </div>
      </div>
      <div>入库时间：{{ info ? info.storeDate : "" }}</div>
    </div>
    <div class="main">
      <div class="item">
        <div class="value">
          {{ info.storeStatisticsVo ? info.storeStatisticsVo.storeNum : "" }}
        </div>
        <div class="label">入库数量(斤)</div>
      </div>
      <div class="item">
        <div class="value">
          {{ info.storeStatisticsVo ? info.storeStatisticsVo.totalPrice : "" }}
        </div>
        <div class="label">合计金额(￥)</div>
      </div>
      <div class="item">
        <div class="value">
          {{ info.storeStatisticsVo ? info.storeStatisticsVo.outBoundNum : "" }}
        </div>
        <div class="label">已出库数量(斤)</div>
      </div>
      <div class="item">
        <div class="value">
          {{ info.storeStatisticsVo ? info.storeStatisticsVo.outBoundNumTotalPrice : "" }}
        </div>
        <div class="label">已出库总金额(￥)</div>
      </div>
      <div class="item">
        <div class="value">
          {{ info.storeStatisticsVo ? info.storeStatisticsVo.outBoundProfit : "" }}
        </div>
        <div class="label">已出库利润(￥)</div>
      </div>
    </div>
    <div class="main1">
      <el-descriptions
        :labelStyle="{ fontSize: '16px', fontWeight: 400 }"
        :contentStyle="{ fontSize: '16px', fontWeight: 600 }"
      >
        <el-descriptions-item label="入库单位">{{
          info ? info.storeUnit : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="生产日期">{{
          info ? info.produceDate : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="保质期"
          >{{ info ? info.shelfLife : ""
          }}{{
            info
              ? info.shelfLifeUnit == 0
                ? "天"
                : info.shelfLifeUnit == 1
                ? "月"
                : info.shelfLifeUnit == 2
                ? "年"
                : ""
              : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item label="预警天数"
          >{{ info ? info.warningDay : "" }}
        </el-descriptions-item>
        <el-descriptions-item label="供应商名称">{{
          info ? info.supplierName : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商电话">{{
          info ? info.supplierPhone : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="采购员">{{
          info ? info.buyer : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{
          info ? info.remark : ""
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="入库商品" name="1">
        <el-table
          :data="info.storeGoodsList"
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <el-table-column label="商品ID" align="center" prop="spuId" />
          <el-table-column label="商品名称" align="center" prop="spuName" />
          <el-table-column label="分类" align="center" prop="categoryName" />
          <el-table-column label="规格计量单位" align="center" prop="spuUnit" />
          <el-table-column label="skuId" align="center" prop="skuId" />
          <el-table-column label="规格名称" align="center" prop="skuSpecName" />
          <el-table-column label="规格内容" align="center" prop="skuSpecName" />
          <el-table-column label="单位换算" align="center" width="200">
            <template slot-scope="scope">
              <div>
                1{{ scope.row.spuUnit }} ≈{{ scope.row.unitConversion
                }}{{ info.storeUnit }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="浮动重量" align="center">
            <template slot-scope="scope"> {{ scope.row.floatingWeight }}斤 </template>
          </el-table-column>
          <el-table-column label="入库数量" align="center">
            <template slot-scope="scope">
              {{ scope.row.storeNum }}{{ info.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="入库单价" align="center">
            <template slot-scope="scope"> {{ scope.row.storeUnitPrice }}元/斤 </template>
          </el-table-column>
          <el-table-column label="销售单价" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.salePrice }}元/{{ info.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="总入库数量" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.totalStoreNum }}{{ info.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="总入库金额" align="center" width="120">
            <template slot-scope="scope"> {{ scope.row.totalStorePrice }}元 </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="关联出库订单" name="2">
        <el-table
          :data="tableList"
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <el-table-column label="商品ID" align="center" prop="spuId" />
          <el-table-column label="商品名称" align="center" prop="spuName" />
          <el-table-column label="skuId" align="center" prop="skuId" />
          <el-table-column label="规格名称" align="center" prop="skuSpecName">
            <template slot-scope="scope">
              {{ scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsName : "" }}
            </template>
          </el-table-column>
          <el-table-column label="规格内容" align="center" prop="skuSpecName">
            <template slot-scope="scope">
              {{ scope.row.skuSpecs ? JSON.parse(scope.row.skuSpecs)[0].specsValue : "" }}
            </template>
          </el-table-column>
          <el-table-column
            label="出库单号"
            align="center"
            prop="outboundOdd"
            width="200"
          />
          <el-table-column label="出库时间" align="center" prop="outboundDate" />
          <el-table-column label="出库类型" align="center">
            <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">
            <template slot-scope="scope">
              1 {{ info.storeUnit }} ≈ {{ scope.row.unitConversion
              }}{{ scope.row.spuUnit }}</template
            >
          </el-table-column>
          <el-table-column label="浮动重量" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.floatingWeight }}{{ info.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="入库数量" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.storeNum }}{{ info.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="总出库数量" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.outboundNum }}{{ info.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="销售单价" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.salePrice }}{{ info.storeUnit }}
            </template>
          </el-table-column>
          <el-table-column label="合计金额(￥)" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.totalOutboundPrice }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { storeManageCheck, queryOutboundOddByStoreOdd } from "@/api/manage/storage";
export default {
  data() {
    return {
      info: {},
      activeName: "1",
      tableList: [],
    };
  },
  mounted() {
    this.getStorageInfo();
    this.getqueryOutboundOddByStoreOdd();
  },
  methods: {
    getqueryOutboundOddByStoreOdd() {
      queryOutboundOddByStoreOdd({ storeOdd: this.$route.query.storeOdd }).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data;
        }
      });
    },
    copy() {
      const textarea = document.createElement("textarea");
      textarea.value = this.info.storeOdd;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      this.$message.success("复制成功");
    },
    getStorageInfo() {
      storeManageCheck(this.$route.query.id).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
        }
      });
    },
  },
};
</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>
