<template>
  <header class="app-header">
    <div class="header-user">
      <img
        src="https://placehold.co/52x52/e9eef9/8f9db7?text=%E5%A4%B4"
        alt="学生头像"
        class="user-avatar"
      />
      <div class="user-info">
        <p class="user-name">HI, 张小小</p>
        <span class="user-level">Lv1</span>
      </div>
    </div>
    <div class="header-actions">
      <button class="grade-btn">
        七年级
        <span class="grade-arrow">▼</span>
      </button>
      <div class="divider" />
      <div class="action-list">
        <button
          v-for="item in actions"
          :key="item.label"
          class="action-item"
          type="button"
          @click="handleActionClick(item)"
        >
          <span class="action-icon">
            <img
              v-if="item.iconSrc"
              :src="item.iconSrc"
              :alt="item.label"
              class="action-icon-img"
            />
            <template v-else>{{ item.icon }}</template>
          </span>
          <span class="action-label">{{ item.label }}</span>
          <span v-if="item.badge > 0" class="action-badge">
            {{ item.badge }}
          </span>
        </button>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import xinxiangIcon from '@/assets/header/xinxiang.png'
import huodongIcon from '@/assets/header/huodong.png'
import setupIcon from '@/assets/header/setup.png'

const actions = [
  { label: '排行榜', icon: '□', iconSrc: xinxiangIcon, badge: 1, routeName: 'ranking-list' },
  { label: '学员管理', icon: '□', iconSrc: xinxiangIcon, badge: 1, routeName: 'student-management' },
  { label: '作业', icon: '□', iconSrc: xinxiangIcon, badge: 1 },
  { label: '信箱', icon: '✉', iconSrc: xinxiangIcon, badge: 1 },
  { label: '活动', icon: '▣', iconSrc: huodongIcon, badge: 1 },
  { label: '设置', icon: '⚙', iconSrc: setupIcon, badge: 0 },
]

const router = useRouter()

function handleActionClick(item: (typeof actions)[number]) {
  if (!item.routeName) return
  router.push({ name: item.routeName })
}
</script>

<style scoped lang="scss">
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 12px;
  padding: 32px 64px;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 88px;
}

.user-avatar {
  height: 88px;
  width: 88px;
  border-radius: 50%;
  border: 1px solid #d0daec;
  object-fit: cover;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-name {
  font-size: 34px;
  font-weight: 600;
  color: #121212;
}

.user-level {
  border-radius: 6px;
  background: #3d78f2;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

.grade-btn {
  font-size: 28px;
  color: #3f4f6e;
  background: transparent;
  border: none;
  cursor: pointer;
}

.grade-arrow {
  margin-left: 4px;
  font-size: 12px;
}

.divider {
  height: 24px;
  width: 2px;
  background: #666;
}

.action-list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.action-item {
  position: relative;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  color: #1f2937;
  cursor: pointer;
  font: inherit;
  padding: 0;
  // margin-left: 16px;
}

.action-icon {
  display: inline-flex;
  height: 48px;
  width: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  // margin-left: 16px;
}

.action-icon-img {
  height: 48px;
  width: 48px;
  object-fit: contain;
}

.action-label {
  margin-left: 16px;
  font-size: 28px;
  
}

.action-badge {
  position: absolute;
  right: -4px;
  top: -4px;
  display: inline-flex;
  height: 16px;
  min-width: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #ef4444;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
}
</style>
