<template>
  <ContainerTit>
    <div slot="headr">
      <el-button type="primary" :loading="loading" @click="submit">
        提交
      </el-button>
    </div>
    <div class="detail-tab-item">
      <div class="detail-tab-title clearfix">
        <span class="float_left">基础信息</span>
      </div>
      <div class="detail-tab-main">
        <el-row class="de_from_row">
          <el-col :span="6">
            <span class="de_label">入库类型：</span>
            <span class="de_val">采购入库</span>
          </el-col>
          <el-col :span="6">
            <span class="de_label">入库仓库：</span>
            <span class="de_val">{{ purchase_detail.warehouseName }}</span>
          </el-col>
          <el-col :span="6">
            <span class="de_label">制单人员：</span>
            <span class="de_val">{{ userName }}</span>
          </el-col>
          <el-col :span="6">
            <span class="de_label">制单时间：</span>
            <span class="de_val">
              {{
                purchase_detail.createTime
                  ? $_common.formatDate(purchase_detail.createTime)
                  : "---"
              }}
            </span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="detail-tab-item">
      <p class="detail-tab-title">商品清单</p>
      <el-table style="width: 98%; margin: 0 auto" :data="goods_list">
        <el-table-column
          prop="goodsName"
          min-width="180"
          show-overflow-tooltip
          label="商品名称"
        ></el-table-column>
        <el-table-column
          prop="goodsCode"
          label="商品编码"
          min-width="120"
        ></el-table-column>
        <el-table-column prop="unitName" label="规格" min-width="140">
          <template slot-scope="scope">
            {{ scope.row.unitName }};{{ scope.row.skuName }}
          </template>
        </el-table-column>

        <el-table-column label="采购数量" min-width="120" prop="num">
          <template slot-scope="scope">
            {{ $_common.formatNub(scope.row.num) }}
          </template>
        </el-table-column>

        <el-table-column min-width="120" prop="num" label="入库数量">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.inNum"
              size="small"
              style="width: 100%"
              :min="1"
              :controls="false"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column min-width="120" prop="num" label="其他单位">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.otherNum"
              size="small"
              style="width: 100%"
              :min="1"
              :disabled="scope.row.isEq === 4"
              :controls="false"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="采购成本" min-width="140">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.unitPrice) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="采购总成本" min-width="140">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.totalPrice) }}
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="入库成本" min-width="140">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.inCost) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="入库总成本" min-width="140">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.inCostTotal) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="skuBarCode"
          label="商品条码"
          min-width="140"
        ></el-table-column>
        <el-table-column
          prop="storage"
          label="货架编码"
          min-width="120"
        ></el-table-column>
      </el-table>
    </div>
    <div class="detail-tab-item">
      <p class="detail-tab-title">备注说明</p>
      <div class="detail-tab-main">
        <el-input
          v-model="remark"
          type="textarea"
          placeholder="备注说明"
        ></el-input>
      </div>
    </div>
  </ContainerTit>
</template>

<script>
  import { getPurchaseInfoById } from "@/api/Purchase";
  export default {
    name: "StorageInfo",
    data() {
      return {
        purchase_detail: {},
        goods_list: [],
        pusrchase_id: "",
        remark: "",
        loading: false,
      };
    },
    created() {
      this.pusrchase_id = this.$route.query.purchaseId;
      this.getPurchaseInfoById();
    },
    methods: {
      //  采购单详情接口
      async getPurchaseInfoById() {
        const { data } = await getPurchaseInfoById(this.pusrchase_id);
        this.purchase_detail = data;
        this.goods_list = data.details;
      },
      submit() {},
    },
  };
</script>

<style scoped>
  .table-list-box .goods-info-box p {
    text-align: left;
  }
</style>
