<template>
  <header class="app-header">
    <div class="header-container">
      <div class="logo">
        <router-link to="/">
          <img src="../assets/logo.png" alt="Logo" />
          <span>云帆教育</span>
        </router-link>
      </div>
      
      <nav class="main-nav">
        <router-link to="/">首页</router-link>
        <router-link to="/course">课程中心</router-link>
        <router-link to="/exam">考试中心</router-link>
        <router-link to="/practice">练习中心</router-link>
        <router-link to="/activity">活动中心</router-link>
        <router-link to="/mall">积分商城</router-link>
        <router-link to="/announcement">公告</router-link>
      </nav>
      
      <div class="user-actions">
        <template v-if="userStore.isLoggedIn">
          <!-- 管理员入口 -->
          <router-link v-if="userStore.isAdmin" to="/admin" class="admin-link">
            <el-icon><Setting /></el-icon>
            <span>管理后台</span>
          </router-link>
          
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="user-info">
              <el-avatar :size="32" :src="userStore.userInfo.avatar" />
              <span>{{ userStore.userInfo.name }}</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="courses">我的课程</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        
        <template v-else>
          <router-link to="/login" class="login-btn">登录</router-link>
          <router-link to="/register" class="register-btn">注册</router-link>
        </template>
      </div>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { Setting, ArrowDown } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

const handleCommand = (command) => {
  if (command === 'logout') {
    userStore.logout()
    router.push('/login')
  } else if (command === 'profile') {
    router.push('/my/profile')
  } else if (command === 'courses') {
    router.push('/my/courses')
  }
}
</script>

<style lang="scss" scoped>
.app-header {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  
  .header-container {
    max-width: 1200px;
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    
    .logo {
      a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #333;
        
        img {
          height: 36px;
          margin-right: 10px;
        }
        
        span {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
    
    .main-nav {
      display: flex;
      gap: 20px;
      
      a {
        text-decoration: none;
        color: #333;
        font-size: 15px;
        padding: 5px 0;
        position: relative;
        
        &.router-link-active {
          color: #409EFF;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #409EFF;
          }
        }
        
        &:hover {
          color: #409EFF;
        }
      }
    }
    
    .user-actions {
      display: flex;
      align-items: center;
      gap: 15px;
      
      .admin-link {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #409EFF;
        text-decoration: none;
        padding: 5px 10px;
        border-radius: 4px;
        transition: background-color 0.3s;
        
        &:hover {
          background-color: #ecf5ff;
        }
      }
      
      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        
        span {
          margin: 0 5px;
        }
      }
      
      .login-btn, .register-btn {
        text-decoration: none;
        padding: 6px 15px;
        border-radius: 4px;
      }
      
      .login-btn {
        color: #409EFF;
        border: 1px solid #409EFF;
        
        &:hover {
          background-color: #ecf5ff;
        }
      }
      
      .register-btn {
        background-color: #409EFF;
        color: white;
        
        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }
}
</style> 