<script setup lang="tsx">
import { computed } from 'vue';
import { getProjectStatusLabel, getProjectStatusTagType } from './project-master-data';
import type { CurrentProjectSummary } from './project-context-shared';

defineOptions({ name: 'ProjectContextBanner' });

interface Props {
  project: CurrentProjectSummary | null;
  caption?: string;
}

const props = withDefaults(defineProps<Props>(), {
  caption: ''
});

const projectStatusCode = computed(() => props.project?.statusCode as Api.Project.ProjectStatusCode | undefined);

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

  return [
    { label: '项目 ID', value: props.project.id || '--' },
    { label: '项目编码', value: props.project.projectCode || '--' },
    { label: '项目类型', value: props.project.projectType || '--' },
    { label: '项目负责人', value: props.project.managerUserId || '--' }
  ];
});
</script>

<template>
  <ElCard class="project-context-banner card-wrapper">
    <template v-if="project">
      <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="project-context-banner__code">{{ project.projectCode }}</span>
            <ElTag v-if="projectStatusCode" :type="getProjectStatusTagType(projectStatusCode)" effect="light" round>
              {{ getProjectStatusLabel(projectStatusCode) }}
            </ElTag>
          </div>
          <div class="mb-10px flex flex-wrap items-center gap-12px">
            <h2 class="text-24px text-[#0f172a] font-700">{{ project.projectName }}</h2>
            <span v-if="caption" 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：{{ project.id || '--' }}</span>
            <span>类型：{{ project.projectType || '--' }}</span>
            <span>项目负责人：{{ project.managerUserId || '--' }}</span>
          </div>
        </div>
        <div class="project-context-banner__stats">
          <div v-for="item in summaryItems" :key="item.label" class="project-context-banner__stat-card">
            <span class="project-context-banner__stat-label">{{ item.label }}</span>
            <strong class="project-context-banner__stat-value">{{ item.value }}</strong>
          </div>
        </div>
      </div>
    </template>
    <ElEmpty v-else description="未获取到当前项目上下文" :image-size="84" />
  </ElCard>
</template>

<style scoped>
.project-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%));
}

.project-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;
}

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

.project-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%);
}

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

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