<template>
  <header class="header">
    <div class="left">
      <el-icon class="icon-btn" @click="emit('toggle')">
        <component :is="collapsed ? 'Expand' : 'Fold'" />
      </el-icon>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="b in breadcrumb" :key="b">{{ b }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="right">
      <el-tooltip content="刷新" placement="bottom">
        <el-icon class="icon-btn" @click="refresh"><Refresh /></el-icon>
      </el-tooltip>
      <el-tooltip content="全屏" placement="bottom">
        <el-icon class="icon-btn" @click="toggleFullscreen"><FullScreen /></el-icon>
      </el-tooltip>
      <el-dropdown trigger="click">
        <span class="user">
          <el-avatar :size="30" style="background: var(--admin-primary)">
            {{ user.username.charAt(0).toUpperCase() }}
          </el-avatar>
          <span class="username">{{ user.username }}</span>
          <el-icon><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item disabled>{{ user.username }}</el-dropdown-item>
            <el-dropdown-item divided @click="logout">
              <el-icon><SwitchButton /></el-icon> 退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { ElMessage } from 'element-plus';

defineProps<{ collapsed: boolean }>();
const emit = defineEmits<{ toggle: [] }>();

const route = useRoute();
const router = useRouter();
const user = useUserStore();

const breadcrumb = computed(() =>
  route.meta.title ? [route.meta.title as string] : [],
);

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

function refresh() {
  router.go(0);
}

function logout() {
  user.logout();
  ElMessage.success('已退出登录');
  router.replace({ name: 'Login' });
}
</script>

<style scoped>
.header {
  height: 60px;
  background: var(--admin-header-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.icon-btn {
  font-size: 20px;
  cursor: pointer;
  color: #5b6573;
}
.icon-btn:hover {
  color: var(--admin-primary);
}
.user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  outline: none;
}
.username {
  font-size: 14px;
  color: #303133;
}
</style>
