<template>
  <el-affix :offset="0" @change="onAffix">
    <header
        class="header z-100 top-0 w-full bg-white/75 opacity-90 backdrop-blur  border-b border-gray-200 dark:border-gray-800 -mb-px sticky top-0 z-50 lg:mb-0 lg:border-0"
        :class="affix ? 'absolute blur-xs' : 'sticky bg-white/75'">
      <div class="xl:w-screen-xl xl:p-0 px-4 flex items-center between w-full m-auto">
        <div class="header___left flex items-center">
          <div class="logo mt-1 sm:w-[150px] h-7 w-auto py-2 flex items-center">
            <nuxt-link v-if="config?.siteLogo" to="/">
              <div class="flex flex-col text-center xl:p-0">
                <el-image
                    :src="config.siteLogo"
                    shape="square"
                    fit="fill"
                    class="lg:h-7 lg:w-auto pb-2 h-5 w-[90px] h-[28px]"
                    :alt="config.siteName"
                    :title="config.siteName"
                />
                <!--              <span class="text-gray-500 text-2.5" style="line-height: 1rem">云应用开发平台</span>-->
              </div>

            </nuxt-link>
            <nuxt-link v-else to="/">
              <text>{{ config?.siteName }}</text>
            </nuxt-link>
          </div>
          <div class="hidden sm:flex">
            <el-menu
                :default-active="currentIndex"
                mode="horizontal"
                background-color="transparent"
                :collapse="true"
                :ellipsis="false"
                style="border: none"
                @select="handleSelect"
            >
              <template v-for="(item, index) in navigations">
                <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${item.path}`">
                  <template #title><h3>{{ item.title }}</h3></template>
                  <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${sub.path}`">{{
                      sub.title
                    }}
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="`${item.path}`"><h3>{{ item.title }}</h3></el-menu-item>
              </template>
            </el-menu>
          </div>
        </div>
        <div class="header__right items-center pr-4 xl:pr-0 md:flex hidden">
          <el-space class="sm:flex hidden" size="large" v-if="config.showSearchTools">
            <!--          <el-button v-if="token" @click="navigateTo(`/manage`)">控制台</el-button>-->
            <!--          <el-button v-if="config.showSearchIcon" circle :icon="ElIconSearch" @click="navigateTo('/search')"></el-button>-->
            <el-button v-if="token && sysDomain"
                       @click="loginAdminByToken">控制台
            </el-button>
            <ClientOnly>
              <template v-if="token">
                <el-dropdown @command="handleCommand">
                  <el-avatar class="cursor-pointer" :src="user?.avatar" :size="30"/>
                  <el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="user">账户中心</el-dropdown-item>
                      <el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
              <template v-else>
                <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>
              </template>
            </ClientOnly>
          </el-space>
        </div>
        <!-- 移动端菜单 -->
        <div class="sm:hidden flex xl:p-0 px-8">
          <el-dropdown>
            <el-space class="el-dropdown-link flex items-center">
              <span>{{ user.nickname }}</span>
              <el-avatar v-if="token" class="cursor-pointer" :src="user?.avatar" :size="30"/>
              <el-button v-else :icon="ElIconMenu"></el-button>
            </el-space>
            <template #dropdown>
              <el-dropdown-menu>
                <template v-for="(item, index) in navigations">
                  <el-dropdown-item>
                    <span @click="openSpmUrl(`${item.path}`,item,item.navigationId)">{{ item.title }}</span>
                  </el-dropdown-item>
                </template>
                <template v-if="token">
                  <el-dropdown-item divided v-if="sysDomain" @click="loginAdminByToken">控制台</el-dropdown-item>
                  <el-dropdown-item divided command="user" @click="navigateTo(`/user`)">账户中心</el-dropdown-item>
                  <el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item>
                </template>
                <el-dropdown-item v-if="!token" divided @click="navigateTo(`/passport/login`)">登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <Passport :visible="showPassport" @done="reload"/>
    </header>
    <div class="header__height__placeholder"></div>
  </el-affix>
</template>

<script setup lang="ts">
// 引入所需的图标
import {
  useConfigInfo,
  useMenu,
  useProductAffix,
  useSysDomain,
  useToken,
  useUser
} from "~/composables/configState";
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api";
import type {User} from "~/api/system/user/model";
import {navigateTo, openSpmUrl} from "#imports";
import type {Company} from "~/api/system/company/model";
import {loginAdminByToken} from "~/utils/common";

const route = useRoute();
// 配置信息
const runtimeConfig = useRuntimeConfig();
const showPassport = ref<boolean>(false);
const token = useToken();
const user = useUser();
const navigations = useMenu();
const config = useConfigInfo();
const affix = useProductAffix();
const sysDomain = useSysDomain();

// 顶部栏初始数
const visibleNumber = ref<number>(6);
config.value.elMenuMaxNumber = 8;
// 当前激活菜单的 index
const currentIndex = ref<string>('/');

function handleCommand(command: string) {
  switch (command) {
    case 'logOut':
      logOut();
      break;
    default:
      navigateTo('/user');
      break;
  }
}

const onAffix = (index: boolean) => {
  affix.value = index;
}

function logOut() {
  token.value = ''
  localStorage.clear();
  navigateTo('/passport/login')
}

function goLogin() {
  navigateTo('/passport/login')
}

function handleSelect(key: string, keyPath: any) {
  currentIndex.value = key;
  navigateTo(`${key}`);
}

const reload = async () => {
  const token = localStorage.getItem('token');
  const domain = localStorage.getItem('SysDomain');
  if (domain) {
    sysDomain.value = domain;
  }
  // 获取用户信息
  if (token && token != '') {
    const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user', {baseURL: runtimeConfig.public.apiServer})
    if (response.value?.data) {
      user.value = response.value?.data;
    }
    // 获取后台管理地址
    const {data: company} = await useServerRequest<ApiResult<Company>>('/system/company/profile', {baseURL: runtimeConfig.public.apiServer})
    console.log(company.value,'>>>>90')
    if (company.value?.data?.domain) {
      sysDomain.value = company.value?.data?.domain;
      localStorage.setItem('SysDomain', `${company.value?.data?.domain}`);
    }
  }
}

reload();
</script>

<style lang="scss">
body {
  background-color: #f3f6f8;
}

.el-menu-item:visited, .el-menu-item:hover {
  background: none !important; /* 你可以根据需要设置不同的颜色 */
  transition: background-color 0.3s linear;
}

.is-active:hover {
  border-bottom: none !important;
}
</style>
