<template>
  <el-drawer
    :title="'入库单详情 · ' + (detail.inboundNo || '')"
    :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.inboundNo || '—' }}</el-descriptions-item>
        <el-descriptions-item label="入库类型">{{ detail.inboundTypeText || inboundTypeLabel(detail.inboundType) }}</el-descriptions-item>
        <el-descriptions-item label="入库时间">{{ parseTime(detail.inboundTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item label="经办人">{{ detail.operatorName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ detail.remark || '—' }}</el-descriptions-item>
      </el-descriptions>
      <p v-if="detail.inboundType === '0'" class="section-tip">系统自动入库：库存已在商品保存时写入，本单仅留痕。</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="入库数量" prop="quantity" width="100" align="center" />
      </el-table>
    </div>
  </el-drawer>
</template>

<script>
import { getSellerStockInbound } from "@/api/agri/seller/stock/inbound"

const INBOUND_TYPE_MAP = {
  "0": "新增商品规格",
  "1": "采购入库",
  "2": "退货入库",
  "3": "其他入库"
}

export default {
  name: "SellerStockInboundDetail",
  props: {
    visible: { type: Boolean, default: false },
    inboundId: { type: [Number, String], default: null }
  },
  data() {
    return {
      localVisible: false,
      loading: false,
      detail: {}
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val
      if (val && this.inboundId) {
        this.loadDetail()
      }
    },
    localVisible(val) {
      this.$emit("update:visible", val)
    },
    inboundId(val) {
      if (val && this.localVisible) {
        this.loadDetail()
      }
    }
  },
  methods: {
    inboundTypeLabel(type) {
      return INBOUND_TYPE_MAP[type] || "—"
    },
    specText(text) {
      const val = text ? String(text).trim() : ""
      return val || "—"
    },
    loadDetail() {
      if (!this.inboundId) {
        return
      }
      this.loading = true
      getSellerStockInbound(this.inboundId).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>
