<template>
  <div class="DetailAllocationForm">
    <el-tabs v-model="activeName">
      <el-tab-pane label="调拨单详情" name="one">
        <el-row style="padding-bottom: 13px">
          <el-col :span="24">
            <p
              style="padding-left: 20px"
              class="order_midden_left_text el-icon-arrow-right"
            >
              调拨单信息
            </p>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">单据编号</span>
            <span class="form_right">{{ allData.no }}</span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">调出仓库</span>
            <span class="form_right">{{ allData.warehouseName }}</span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">调入仓库</span>
            <span class="form_right">{{ allData.inWarehouseName }}</span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">制单人员</span>
            <span class="form_right">{{ allData.operatorName }}</span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">制单时间</span>
            <span class="form_right">{{ createTime }}</span>
          </el-col>
          <el-col v-if="allData.auditStatus === 2" class="form" :span="6">
            <span class="form_left">审核人员</span>
            <span class="form_right">{{ allData.operatorName }}</span>
          </el-col>
          <el-col v-if="allData.auditStatus === 2" class="form" :span="6">
            <span class="form_left">审核时间</span>
            <span class="form_right">
              {{ $_common.formatDate(allData.auditTime) }}
            </span>
          </el-col>
          <el-col class="form" :span="24" style="padding-left: 68px">
            <span class="form_left">备注</span>
            <span class="form_right">
              {{ allData.remark || "无" }}
            </span>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <div class="order_bottom">
      <p class="text">商品清单</p>
      <vxe-table
        border="inner"
        resizable
        show-footer
        show-overflow
        :data="goods_list"
        :footer-method="objectSpanMethod"
      >
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column
          field="materielCode"
          title="商品编码"
        ></vxe-table-column>
        <vxe-table-column
          field="materielName"
          title="商品名称"
        ></vxe-table-column>
        <vxe-table-column field="unitName" title="规格">
          <template #default="{ row }">
            {{ row.unitName }};{{ row.skuName }}
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="warehouseName"
          title="所属仓库"
        ></vxe-table-column>
        <vxe-table-column
          v-if="enableLocationManagement === 5"
          title="调出库区库位"
        >
          <template #default="{ row }">
            {{ row.inStorageLocationName }}
          </template>
        </vxe-table-column>
        <vxe-table-column
          v-if="enableLocationManagement === 5"
          title="调入库区库位"
        >
          <template #default="{ row }">
            {{ row.outStorageLocationName }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="inventoryNum" title="可售库存">
          <template #default="{ row }">
            {{ $_common.formatNub(row.inventoryNum) }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="num" title="调拨数量">
          <template #default="{ row }">
            {{ $_common.formatNub(row.num) }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="otherNum" title="其他单位">
          <template #default="{ row }">
            <span v-if="row.isEq === 4">--</span>
            <span v-else>{{ $_common.formatNub(row.otherNum) }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column title="调入仓库">
          <template #default="{ $rowIndex }">
            <span v-if="false">{{ $rowIndex }}</span>
            {{ allData.inWarehouseName }}
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
  </div>
</template>
<script>
  import { getAllocateInfo } from "@/api/Stock";
  import { mapGetters } from "vuex";
  export default {
    data() {
      return {
        allData: {},
        goods_list: [],
        createTime: "",
        Allocat_id: "",
        activeName: "one",
      };
    },
    computed: {
      ...mapGetters({
        enableLocationManagement: "MUser/enableLocationManagement",
      }),
    },
    created() {
      this.createTime = this.$_common.formatDate(new Date().getTime());
      if (this.$route.params.id) {
        this.Allocat_id = this.$route.params.id;
        this.getAllocateInfo();
      }
    },
    methods: {
      //  获取详情
      async getAllocateInfo() {
        const { data } = await getAllocateInfo(this.Allocat_id);
        this.allData = data;
        this.goods_list = data.details.map((item) => {
          return {
            ...item,
            otherNum: item.isEq === 5 ? item.otherNum : "",
            warehouseName: data.warehouseName,
            inwarehouseName: data.inWarehouseName,
          };
        });
      },
      objectSpanMethod({ columns, data }) {
        const properties = ["otherNum"];
        return this.$_common.getSummariesVxe(columns, data, properties);
      },
    },
  };
</script>
<style scoped lang="scss">
  .order_bottom {
    border-top: 16px solid #f6f8f9;
    width: 100%;
    background-color: #ffffff;
    border-radius: 3px;
    .text {
      font-size: 16px;
      font-weight: 600;
      color: #2d405e;
      line-height: 64px;
      padding: 0px 24px;
    }
  }
  .order_midden_left_text {
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 27px 0;
  }
  .form {
    padding-left: 40px;
    font-size: 14px;
    margin-bottom: 19px;
    .form_left {
      margin-right: 32px;
      color: #62738e;
      font-weight: 400;
    }
    .form_right {
      color: #2d405e;
      font-weight: 500;
    }
  }
</style>
<style>
  .DetailAllocationForm {
    background-color: #fff;
  }
  .DetailAllocationForm .el-tabs__item {
    font-size: 16px !important;
    height: 60px !important;
    line-height: 60px !important;
  }
  .DetailAllocationForm .is-active {
    font-weight: 700;
    color: #000;
  }
  .DetailAllocationForm .el-tabs__nav {
    margin-left: 24px;
  }
</style>
