<template>
  <article class="detail-hero panel">
    <div class="hero-banner">
      <div class="hero-banner-main">
        <div class="applicant-card">
          <div class="portrait">
            <img src="/assets/person.png" alt="" />
          </div>
          <div class="applicant-copy">
            <div class="applicant-name-row">
              <h2>{{ profile.name }}</h2>
              <span class="identity-badge">{{ profile.identity }}</span>
            </div>
            <div class="applicant-profile-meta">
              <div class="applicant-profile-meta__org">
                <span class="applicant-meta-item">
                  <em>部门</em>
                  <strong>{{ profile.department }}</strong>
                </span>
                <span class="applicant-meta-item applicant-meta-item--sub">
                  <em>直属上司</em>
                  <strong>{{ profile.manager }}</strong>
                </span>
              </div>
              <div class="applicant-profile-meta__role">
                <span class="applicant-meta-item">
                  <em>职级</em>
                  <strong>{{ profile.grade }}</strong>
                </span>
                <span class="applicant-meta-item">
                  <em>岗位</em>
                  <strong>{{ profile.position }}</strong>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="hero-fact-grid">
          <div v-for="item in heroFactItems" :key="item.key" class="hero-fact">
            <div class="hero-fact-label">
              <i v-if="item.icon" :class="item.icon"></i>
              <span>{{ item.label }}</span>
            </div>
            <strong :class="item.valueClass">{{ item.value }}</strong>
          </div>
        </div>
      </div>
    </div>
  </article>
</template>

<script setup>
defineProps({
  profile: { type: Object, required: true },
  heroFactItems: { type: Array, default: () => [] }
})
</script>
