<script setup lang="ts">
import { ref } from 'vue';
import { useFullscreen } from '@vueuse/core';
import type { RouteKey } from '@elegant-router/types';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router';
import GlobalLogo from '@/layouts/modules/global-logo/index.vue';
import UserAvatar from '@/layouts/modules/global-header/components/user-avatar.vue';
import ForegroundSetting from '@/views/foreground-setting/index.vue';
import { useAuth } from '@/hooks/business/auth';

defineOptions({
  name: 'ForegroundHeader'
});
const appStore = useAppStore();
const themeStore = useThemeStore();
const home = import.meta.env.VITE_ROUTE_HOME;
const showSetting = ref(false);

const { routerPushByKey } = useRouterPush();
const { hasRole } = useAuth();

const { isFullscreen, toggle } = useFullscreen();

const navItems = [
  { key: 'foreground-home' as RouteKey, name: '合同对比', roles: ['sys_admin', 'common'] },
  { key: 'contract-review' as RouteKey, name: '合同审查', roles: ['sys_admin', 'common'] }
];

const goToPage = (key: RouteKey) => {
  routerPushByKey(key);
};

function handleSetting() {
  showSetting.value = true;
}
</script>

<template>
  <DarkModeContainer class="h-full flex-y-center px-12px shadow-header">
    <GlobalLogo class="h-full flex-[none]" :style="{ width: themeStore.sider.width + 'px' }" :to="{ name: home }" />
    <div class="h-full flex-center flex-[1] of-auto">
      <div class="nav-container">
        <div v-for="item in navItems" :key="item.key">
          <div
            v-if="hasRole(item.roles)"
            class="nav-item"
            :class="{ active: $route.name === item.key }"
            @click="goToPage(item.key)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="h-full flex-y-center flex-[none] justify-end">
      <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
      <div v-hasPermission="['sys_admin']">
        <ButtonIcon tooltip-content="设置" icon="ep:setting" @click="handleSetting" />
      </div>
      <ForegroundSetting v-model:show="showSetting" />
      <!--<ButtonIcon tooltip-content="前往后台管理" icon="ep:menu" @click="goHome" />-->
      <UserAvatar />
    </div>
  </DarkModeContainer>
</template>

<style lang="scss" scoped>
.nav-container {
  display: flex;
  gap: 24px;
  height: 100%;
}

.nav-item {
  position: relative;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
  transition: all 0.3s ease;

  &:hover {
    color: #334155;
  }

  &.active {
    color: #6366f1;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #6366f1;
    }
  }
}
</style>
