<template>
  <ContainerTit class="InventoryDetail">
    <div style="position: relative">
      <div class="btn-top-div">
        <el-button
          v-if="orderInfo.auditStatus !== 2"
          type="warning"
          :loading="loading"
          @click="updateAuditStatus"
        >
          审核通过
        </el-button>
      </div>
    </div>
    <!--    <div slot="headr">-->
    <!--      <el-button-->
    <!--        v-if="orderInfo.auditStatus !== 2"-->
    <!--        type="warning"-->
    <!--        :loading="loading"-->
    <!--        @click="updateAuditStatus"-->
    <!--      >-->
    <!--        审核通过-->
    <!--      </el-button>-->
    <!--    </div>-->
    <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">{{ orderInfo.no }}</span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">单据状态</span>
            <span class="form_right">
              <span v-if="orderInfo.auditStatus === 1" class="info-status">
                待审核
              </span>
              <span v-if="orderInfo.auditStatus === 2" class="success-status">
                审核通过
              </span>
              <span v-if="orderInfo.auditStatus === 3" class="danger-status">
                审核未通过
              </span>
              <span v-if="orderInfo.auditStatus === 4" class="warning-status">
                审核中
              </span>
            </span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">盘点日期</span>
            <span class="form_right">
              {{
                orderInfo.stocktakingTime
                  ? $_common.formatDate(orderInfo.stocktakingTime)
                  : "--"
              }}
            </span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">制单人员</span>
            <span class="form_right">
              {{ orderInfo.operatorName }}
            </span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">制单时间</span>
            <span class="form_right">
              {{ $_common.formatDate(orderInfo.createTime) }}
            </span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">审核人员</span>
            <span class="form_right">
              {{ orderInfo.auditName }}
            </span>
          </el-col>
          <el-col class="form" :span="6">
            <span class="form_left">审核时间</span>
            <span class="form_right">
              {{
                orderInfo.auditTime
                  ? $_common.formatDate(orderInfo.auditTime)
                  : "---"
              }}
            </span>
          </el-col>
          <el-col class="form" :span="24" style="padding-left: 68px">
            <span class="form_left">备注</span>
            <span class="form_right">
              {{ orderInfo.remark || "无" }}
            </span>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <div class="order_bottom">
      <p class="text">商品清单</p>
      <el-table size="small" :data="orderInfo.details">
        <el-table-column
          prop="materielName"
          label="商品名称"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="materielCode"
          label="商品编码"
          min-width="140"
        ></el-table-column>
        <el-table-column prop="skuName" label="规格" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.unitName }};{{ scope.row.skuName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="documentInventoryNum"
          min-width="120"
          label="库区库位"
        >
          <template slot-scope="scope">
            {{ scope.row.areaName }}-{{ scope.row.storageLocationName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="documentInventoryNum"
          min-width="120"
          label="账面库存"
        >
          <template slot-scope="scope">
            {{ $_common.formatNub(scope.row.documentInventoryNum) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="currentInventoryNum"
          min-width="120"
          label="实盘库存"
        >
          <template slot-scope="scope">
            {{ $_common.formatNub(scope.row.currentInventoryNum) }}
            <span v-if="scope.row.isEq === 5">
              ({{ $_common.formatNub(scope.row.otherNum) }})
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="differenceNum" min-width="120" label="盈亏数量">
          <template slot-scope="scope">
            {{ $_common.formatNub(scope.row.differenceNum) }}
          </template>
        </el-table-column>
        <el-table-column
          min-width="160"
          show-overflow-tooltip
          prop="remark"
          label="备注"
        ></el-table-column>
      </el-table>
      <div class="Enunciate">
        <div class="Enunciate_cont clearfix">
          <div class="float_left">
            <div>
              有 {{ plus_goods }} 款商品共计
              <span>{{ plus_num }}</span>
              件盘盈，有 {{ diff_goods }} 款商品共计
              <span>{{ diff_num }}</span>
              件盘亏
            </div>
          </div>
        </div>
      </div>
    </div>
  </ContainerTit>
</template>

<script>
  import { auditStocktaking, getStocktakingInfo } from "@/api/Stock";
  export default {
    name: "InventoryDetail",
    data() {
      return {
        sheetCode: "",
        createTime: "", // 制单时间
        operatorId: "", // 人
        warehouseId: "", // 店ID
        mark: "", // 备注
        orderInfo: {
          details: [],
        },
        queryData: [],
        loading: false,
        activeName: "one",
      };
    },
    computed: {
      plus_goods() {
        let num = 0;
        this.orderInfo.details.forEach((item) => {
          if (item.differenceStatus === 5) {
            num++;
          }
        });
        return num;
      },
      plus_num() {
        let num = 0;
        this.orderInfo.details.forEach((item) => {
          if (item.differenceStatus === 5) {
            num = num + Number(item.differenceNum);
          }
        });
        return num;
      },
      diff_goods() {
        let num = 0;
        this.orderInfo.details.forEach((item) => {
          if (item.differenceStatus === 4) {
            num++;
          }
        });
        return num;
      },
      diff_num() {
        let num = 0;
        this.orderInfo.details.forEach((item) => {
          if (item.differenceStatus === 4) {
            num = num + Number(item.differenceNum);
          }
        });
        return num;
      },
    },
    created() {
      this.invenrory_id = this.$route.params.id;
      this.getStocktakingInfo();
    },
    methods: {
      //  审核
      async updateAuditStatus() {
        this.loading = true;
        this.$confirm("确定要审核通过该单据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            try {
              const data = await auditStocktaking(this.orderInfo.id, {
                auditName: this.userName,
              });

              this.$message({
                type: "success",
                message: "审核成功",
              });
              await this.getStocktakingInfo();
              this.loading = false;
            } catch {
              this.loading = false;
            }
          })
          .catch(() => {
            this.loading = false;
          });
      },
      //  获取详情 getStocktakingInfo
      async getStocktakingInfo() {
        const { data } = await getStocktakingInfo(this.invenrory_id);

        this.orderInfo = data;
      },
    },
  };
</script>

<style scoped lang="scss">
  .table-list-box .goods-info-box p {
    text-align: left;
  }
  .price-div {
    background-color: #f7f7f7;
    border: 1px solid #eeeeee;
    margin: 0 auto;
    padding: 20px;
    text-align: right;
    width: 98%;
    border-top: 0;
  }
  .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;
    }
  }
  .btn-top-div {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 999;
  }
  .Enunciate {
    width: 100%;
    height: 96px;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    padding: 24px 24px 32px;
    .Enunciate_cont {
      background-color: #fa6400;
      border-radius: 3px;
      padding: 0 24px;
    }
  }
</style>
<style>
  .InventoryDetail {
    background-color: #fff;
  }
  .InventoryDetail .el-tabs__item {
    font-size: 16px !important;
    height: 60px !important;
    line-height: 60px !important;
  }
  .InventoryDetail .is-active {
    font-weight: 700;
    color: #000;
  }
  .InventoryDetail .el-tabs__nav {
    margin-left: 24px;
  }
</style>
