<template>
  <el-drawer
    :title="'出库单详情 · ' + (detail.outboundNo || '')"
    :visible.sync="localVisible"
    direction="rtl"
    size="72%"
    append-to-body
    custom-class="detail-drawer"
  >
    <div v-loading="loading" class="drawer-content">
      <h4 class="section-header">基本信息</h4>
      <el-descriptions :column="2" border size="small" class="mb16">
        <el-descriptions-item label="出库单号">{{ detail.outboundNo || '—' }}</el-descriptions-item>
        <el-descriptions-item label="出库类型">{{ detail.outboundTypeText || outboundTypeLabel(detail.outboundType) }}</el-descriptions-item>
        <el-descriptions-item v-if="detail.refOrderNo" label="关联订单">{{ detail.refOrderNo }}</el-descriptions-item>
        <el-descriptions-item label="出库时间">{{ parseTime(detail.outboundTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item label="经办人">{{ detail.operatorName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="detail.refOrderNo ? 1 : 2">{{ detail.remark || '—' }}</el-descriptions-item>
      </el-descriptions>
      <p v-if="detail.outboundType === '0'" class="section-tip">系统自动出库：库存已在支付成功时扣减，本单仅留痕。</p>
      <p v-if="detail.outboundType === '1'" class="section-tip">删除产品规格留痕：变化量可能为 0，库存不在本单再次扣减。</p>

      <h4 class="section-header">出库明细</h4>
      <el-table border size="small" :data="detail.items || []" empty-text="暂无明细">
        <el-table-column label="商品信息" min-width="220">
          <template slot-scope="scope">
            <div class="goods-cell">
              <image-preview v-if="scope.row.mainPic" :src="scope.row.mainPic" :width="44" :height="44" />
              <span>{{ scope.row.goodsName || '—' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品规格" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ specText(scope.row.specText) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出库数量" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.quantity != null ? scope.row.quantity : '—' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变化前库存" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.stockBefore != null ? scope.row.stockBefore : '—' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变化后库存" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.stockAfter != null ? scope.row.stockAfter : '—' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<script>
import { getSellerStockOutbound } from "@/api/agri/seller/stock/outbound"

const OUTBOUND_TYPE_MAP = {
  "0": "下单扣减",
  "1": "删除产品规格",
  "2": "订单出库",
  "3": "过期出库",
  "4": "其他出库"
}

export default {
  name: "SellerStockOutboundDetail",
  props: {
    visible: { type: Boolean, default: false },
    outboundId: { type: [Number, String], default: null }
  },
  data() {
    return {
      localVisible: false,
      loading: false,
      detail: {}
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val
      if (val && this.outboundId) {
        this.loadDetail()
      }
    },
    localVisible(val) {
      this.$emit("update:visible", val)
    },
    outboundId(val) {
      if (val && this.localVisible) {
        this.loadDetail()
      }
    }
  },
  methods: {
    outboundTypeLabel(type) {
      return OUTBOUND_TYPE_MAP[type] || "—"
    },
    specText(text) {
      const val = text ? String(text).trim() : ""
      return val || "—"
    },
    loadDetail() {
      if (!this.outboundId) {
        return
      }
      this.loading = true
      getSellerStockOutbound(this.outboundId).then(response => {
        this.detail = response.data || {}
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    reload() {
      this.loadDetail()
    }
  }
}
</script>

<style scoped lang="scss">
.drawer-content {
  padding: 0 20px 20px;
}
.section-header {
  margin: 16px 0 10px;
  font-size: 15px;
  color: #303133;
  border-left: 3px solid #409EFF;
  padding-left: 8px;
}
.section-tip {
  margin: -8px 0 12px;
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
}
.mb16 {
  margin-bottom: 16px;
}
.goods-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
