<script setup lang="ts">
import { computed } from 'vue';
import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
import { useDict } from '@/hooks/business/dict';
import { getProductStatusLabel, getProductStatusTagType } from './product-master-data';
import type { CurrentProductSummary } from './product-context-shared';

defineOptions({ name: 'ProductContextBanner' });

interface Props {
  product: CurrentProductSummary | null;
  caption: string;
}

const props = defineProps<Props>();
const { getLabel: getDirectionLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
const productStatusCode = computed(() => props.product?.statusCode as Api.Product.ProductStatusCode | undefined);

const summaryItems = computed(() => {
  if (!props.product) {
    return [];
  }

  return [
    { label: '产品 ID', value: props.product.id || '--' },
    { label: '产品编码', value: props.product.code || '--' },
    { label: '产品方向', value: getDirectionLabel(props.product.directionCode, '--') },
    { label: '产品经理', value: props.product.managerUserId || '--' }
  ];
});
</script>

<template>
  <ElCard class="product-context-banner card-wrapper">
    <template v-if="product">
      <div class="flex flex-col gap-20px lg:flex-row lg:items-start lg:justify-between">
        <div class="min-w-0 flex-1">
          <div class="mb-12px flex flex-wrap items-center gap-10px">
            <span class="product-context-banner__code">{{ product.code }}</span>
            <ElTag :type="getProductStatusTagType(productStatusCode!)" effect="light" round>
              {{ getProductStatusLabel(productStatusCode!) }}
            </ElTag>
          </div>
          <div class="mb-10px flex flex-wrap items-center gap-12px">
            <h2 class="text-24px text-[#0f172a] font-700">{{ product.name }}</h2>
            <span class="text-14px text-[#64748b]">{{ caption }}</span>
          </div>
          <div class="flex flex-wrap gap-x-18px gap-y-8px text-13px text-[#64748b] leading-22px">
            <span>对象 ID：{{ product.id || '--' }}</span>
            <span>方向：{{ getDirectionLabel(product.directionCode, '--') }}</span>
            <span>产品经理：{{ product.managerUserId || '--' }}</span>
          </div>
        </div>
        <div class="product-context-banner__stats">
          <div v-for="item in summaryItems" :key="item.label" class="product-context-banner__stat-card">
            <span class="product-context-banner__stat-label">{{ item.label }}</span>
            <strong class="product-context-banner__stat-value">{{ item.value }}</strong>
          </div>
        </div>
      </div>
    </template>
    <ElEmpty v-else description="未获取到当前产品上下文" :image-size="84" />
  </ElCard>
</template>

<style scoped>
.product-context-banner {
  overflow: hidden;
  border: 1px solid rgb(226 232 240 / 88%);
  background:
    radial-gradient(circle at top left, rgb(14 165 233 / 10%), transparent 32%),
    linear-gradient(135deg, rgb(255 255 255 / 98%), rgb(248 250 252 / 96%));
}

.product-context-banner__code {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background-color: rgb(15 23 42 / 88%);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.product-context-banner__stats {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 12px;
  width: min(100%, 320px);
}

.product-context-banner__stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgb(148 163 184 / 18%);
  border-radius: 16px;
  background-color: rgb(255 255 255 / 72%);
}

.product-context-banner__stat-label {
  color: rgb(100 116 139 / 90%);
  font-size: 12px;
}

.product-context-banner__stat-value {
  color: rgb(15 23 42 / 94%);
  font-size: 20px;
  line-height: 1.2;
}
</style>
