<script lang="ts" setup>
/**
 * 消息中心 · 仓品待审预览
 * 展示药品图/规格/报价；完整审核表单较复杂，点「去审核」打开业务审核 Modal
 */
import { computed, onMounted, ref, watch } from 'vue';

import { Button, Descriptions, Image, Spin, Tag, message } from 'ant-design-vue';

import { getDeliveryWarehouseProductInfo } from '#/views/system/delivery-warehouse-product-audit/api';

const props = defineProps<{
  notice: Record<string, any>;
}>();

const emit = defineEmits<{
  audit: [];
}>();

const loading = ref(false);
const detail = ref<Record<string, any> | null>(null);

const bizId = computed(() => Number(props.notice?.action_payload?.biz_id || 0));

async function loadDetail() {
  const id = bizId.value;
  if (id <= 0) {
    detail.value = null;
    return;
  }
  loading.value = true;
  try {
    const res = await getDeliveryWarehouseProductInfo(id);
    detail.value = res || null;
  } catch {
    message.error('加载仓品详情失败');
    detail.value = null;
  } finally {
    loading.value = false;
  }
}

watch(() => bizId.value, loadDetail);
onMounted(loadDetail);
</script>

<template>
  <div class="wh-view">
    <div class="head">
      <div>
        <div class="kicker">仓品待审</div>
        <div class="title">
          {{ detail?.drug_name || notice.title || '仓品上传待审核' }}
        </div>
        <p class="desc">{{ notice.detail || '请核对药品信息后完成分区分类审核' }}</p>
      </div>
      <div class="tags">
        <Tag v-if="detail?.type_txt">{{ detail.type_txt }}</Tag>
        <Tag v-if="detail?.audit_status_txt" color="orange">{{
          detail.audit_status_txt
        }}</Tag>
      </div>
    </div>

    <Spin :spinning="loading">
      <div v-if="!bizId" class="empty">消息未携带商品 ID</div>
      <div v-else-if="!loading && !detail" class="empty">未找到仓品记录</div>
      <div v-else-if="detail" class="body">
        <div class="preview">
          <div v-if="detail.image" class="thumb">
            <Image
              :src="detail.image"
              :width="120"
              :height="120"
              :preview="true"
            />
          </div>
          <div v-else class="thumb placeholder">无图</div>
          <Descriptions
            class="facts"
            :column="1"
            size="small"
            bordered
          >
            <Descriptions.Item label="商品 ID">#{{ detail.id }}</Descriptions.Item>
            <Descriptions.Item label="规格">{{
              detail.specification || '—'
            }}</Descriptions.Item>
            <Descriptions.Item label="上传报价">
              ¥{{ detail.upload_quote ?? '—' }}
            </Descriptions.Item>
            <Descriptions.Item label="当前状态">
              {{ detail.status_txt || '—' }}
              <span v-if="detail.audit_status_txt">
                · {{ detail.audit_status_txt }}
              </span>
            </Descriptions.Item>
          </Descriptions>
        </div>
        <div class="actions">
          <Button type="primary" size="large" @click="emit('audit')">
            打开完整审核
          </Button>
        </div>
      </div>
    </Spin>
  </div>
</template>

<style scoped>
.wh-view {
  padding: 2px 0 4px;
}

.head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background:
    radial-gradient(
      70% 120% at 100% 0%,
      hsl(190 80% 45% / 0.16),
      transparent 55%
    ),
    hsl(var(--muted) / 0.35);
}

.kicker {
  font-size: 12px;
  font-weight: 650;
  color: hsl(var(--primary));
}

.title {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.empty {
  padding: 32px 0;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

.preview {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 640px) {
  .preview {
    grid-template-columns: 1fr;
  }
}

.thumb {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card, var(--background)));
}

.thumb.placeholder {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
}

.actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
