<template>
  <header class="header">
    <div class="header-navbar" :class="headerTheme">
      <div class="flex-1 flex items-center gap-2">
        <el-tooltip
          effect="dark"
          :content="isCollapsed ? '展开菜单' : '收起菜单'"
          placement="bottom"
          :disabled="(!showSidebar || isMobile) && !isCollapsed"
          v-if="showSwitchSidebar"
        >
          <div class="header-item" @click="isCollapsed = !isCollapsed">
            <el-icon size="var(--el-font-size-extra-large)" v-if="isCollapsed">
              <Expand />
            </el-icon>
            <el-icon size="var(--el-font-size-extra-large)" v-else>
              <Fold />
            </el-icon>
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="刷新" placement="bottom">
          <div class="header-item" @click="refreshRouterView">
            <el-icon size="var(--el-font-size-extra-large)">
              <RefreshRight />
            </el-icon>
          </div>
        </el-tooltip>
        <el-breadcrumb class="ml-2" separator="/" v-if="showBreadcrumb">
          <el-breadcrumb-item v-for="(route, index) in breadcrumb" :to="route.path" class="inter" :key="index">
            <div class="flex items-center gap-1.5">
              <template v-if="showBreadcrumbIcon && route.meta?.icon">
                <icon :name="route.meta.icon" :type="route.meta.iconType" />
              </template>
              <span class="text-base">{{ route.meta.title }}</span>
            </div>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="flex items-center gap-2">
        <el-tooltip effect="dark" content="搜索" placement="bottom">
          <div class="header-item" @click="isSearchDialogOpen = true">
            <icon name="search" size="var(--el-font-size-large)" :type="2" />
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" :content="isDark ? '浅色模式' : '深色模式'" placement="bottom">
          <div class="header-item" @click="toggleDark()">
            <icon name="sunny" size="var(--el-font-size-extra-large)" :type="2" v-if="isDark" />
            <icon name="moon" size="var(--el-font-size-extra-large)" :type="2" v-else />
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="主题设置" placement="bottom">
          <div class="header-item" @click="isSettingDrawerOpen = true">
            <el-icon size="var(--el-font-size-extra-large)">
              <Tools />
            </el-icon>
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏模式'" placement="bottom">
          <div class="header-item" @click="toggleFullscreen">
            <icon name="fullscreen-exit" size="var(--el-font-size-extra-large)" :type="2" v-if="isFullscreen" />
            <icon name="fullscreen" size="var(--el-font-size-extra-large)" :type="2" v-else />
          </div>
        </el-tooltip>
        <UserInfo />
      </div>
      <SettingDrawer v-model:visible="isSettingDrawerOpen" />
      <Search v-model="isSearchDialogOpen" />
    </div>
    <tabs-view />
  </header>
</template>

<script setup lang="ts">
import { useDark, useFullscreen, useToggle } from '@vueuse/core'
import { useConfigStore } from '@/stores/modules/config'
import { useSettingStore } from '@/stores/modules/setting'
import { setThemeColor } from '@/utils/util'
import SettingDrawer from './Setting.vue'
import UserInfo from './UserInfo.vue'
import TabsView from './Tabs.vue'
import Search from './Search.vue'

const isSettingDrawerOpen = ref(false)
const isSearchDialogOpen = ref(false)
const configStore = useConfigStore()
const settingStore = useSettingStore()
const route = useRoute()
const showSidebar = computed(() => settingStore.showSidebar)
const headerTheme = computed(() => settingStore.headerTheme)
const showBreadcrumb = computed(() => {
  return settingStore.showBreadcrumb && configStore.windowSizeLevel === 0
})
const showBreadcrumbIcon = computed(() => settingStore.showBreadcrumbIcon)
const isMobile = computed(() => configStore.windowSizeLevel === 1)
const showSwitchSidebar = computed(() => settingStore.showSwitchSidebar)
const isCollapsed = computed({
  get() {
    if (settingStore.showSidebar && !isMobile.value) {
      return configStore.sideCollapsed
    } else {
      return !configStore.sideDrawerShow
    }
  },
  set(value) {
    if (settingStore.showSidebar && !isMobile.value) {
      configStore.toggleCollapsed(value)
    } else {
      configStore.toggleDrawerShow(!value)
    }
  }
})

// 刷新视图
const refreshRouterView = () => {
  configStore.refreshRouterView()
}

// 面包屑导航
const breadcrumb = computed(() => {
  const matched = route.matched.filter((item) => {
    return item.meta.title
  })
  if (matched[0] && matched[0].path == '/') matched.splice(0, 1)
  return matched
})

// 主题模式
const isDark = useDark()
const toggleDark = () => {
  useToggle(isDark)()
  setThemeColor(useSettingStore().theme, isDark.value ? 'dark' : 'light')
}

// 全屏模式
const { toggle: toggleFullscreen, isFullscreen } = useFullscreen()
</script>

<style lang="scss" scoped>
.header {
  .header-navbar {
    @apply bg-body shadow-light flex px-3;
    height: var(--navbar-height);

    .header-item {
      @apply cursor-pointer size-8 flex justify-center items-center rounded-[50%];
      transition: all 0.3s;

      &:hover {
        background-color: var(--el-fill-color-dark);
      }
    }

    .header-user {
      @apply cursor-pointer flex items-center gap-2 px-2 py-1 rounded-md;
      transition: all 0.3s;

      &:hover {
        background-color: var(--el-fill-color-dark);
      }
    }

    &.dark {
      background: var(--el-bg-color-dark);
      color: #fff;
      --el-text-color-primary: #fff;
      --el-text-color-placeholder: #fff;
      --el-text-color-regular: #fff;
      --el-fill-color-dark: hsl(0, 0%, 28%);
    }
  }
}
</style>
