<template>
  <div class="app-container">
    <div class="header">
      <div style="display: flex; flex-direction: row; align-items: center">
        <div class="no">
          出库单号:{{ info ? info.outboundOdd : "" }}
          <i class="el-icon-document-copy" @click="copy"></i>
        </div>
      </div>
      <div>出库时间：{{ info ? info.outboundDate : "" }}</div>
    </div>
    <div class="main1">
      <el-descriptions
        :labelStyle="{ fontSize: '16px', fontWeight: 400 }"
        :contentStyle="{ fontSize: '16px', fontWeight: 600 }"
      >
        <el-descriptions-item label="出库类型">{{
          info
            ? info.outboundType == 0
              ? "下捡出库"
              : info.outboundType == 1
              ? "销售出库"
              : info.outboundType == 2
              ? "平台出库"
              : ""
            : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="出库员">{{
          info ? info.outboundUser : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="备注"
          >{{ info ? info.remark : "" }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-descriptions title="出库明细"></el-descriptions>
    <el-table
      :data="info.storeGoodsList"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column label="关联入库订单" align="center" prop="storeOdd" />
      <el-table-column label="关联入库订单名称" align="center" prop="storeOddName" />
      <el-table-column label="出库商品ID" align="center" prop="spuId" />
      <el-table-column label="出库商品名称" align="center" prop="spuName" />
      <el-table-column label="出库商品规格信息" align="center" width="150">
        <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" />
      <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 }}{{ scope.row.storeUnit }}
        </template>
      </el-table-column>
      <el-table-column label="入库数量" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.storeNum }}
        </template>
      </el-table-column>
      <el-table-column label="入库单价" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.storeUnitPrice }}{{ scope.row.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-column label="出库数量" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.outboundNum }}{{ scope.row.storeUnit }}
        </template>
      </el-table-column>
      <el-table-column label="销售单价" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.salePrice }}元/{{ scope.row.storeUnit }}
        </template>
      </el-table-column>
      <el-table-column label="合计出库数量" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.outboundNum }}{{ scope.row.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>
  </div>
</template>

<script>
import { outboundManageInfo, queryOutboundOddByStoreOdd } from "@/api/manage/storage";
export default {
  data() {
    return {
      info: {},
      activeName: "1",
      tableList: [],
    };
  },
  mounted() {
    this.getStorageInfo();
  },
  methods: {
    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() {
      outboundManageInfo({ id: 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>
