<template>
  <div class="size-full flex justify-center">
    <div class="header-content">
      <div class="flex-1 min-w-0 flex">
        <NuxtLink v-if="config.web_logo || config.web_title" class="flex items-center max-w-[100%]" to="/">
          <el-image v-if="config.web_logo" :src="config.web_logo" class="h-9" />
          <span v-if="config.web_title" class="ml-2 flex-1 text-lg font-semibold truncate">{{ config.web_title }}</span>
        </NuxtLink>
      </div>
      <el-tooltip effect="dark" :content="isDark ? '浅色模式' : '深色模式'" placement="bottom">
        <div class="header-content__item" @click="toggleDark()">
          <SvgIcon v-if="isDark" name="sunny" size="var(--el-font-size-extra-large)" />
          <SvgIcon v-else name="moon" size="var(--el-font-size-extra-large)" />
        </div>
      </el-tooltip>
      <NuxtLink class="hidden md:block text-base" to="/">
        <div class="hover:text-primary duration-300">系统首页</div>
      </NuxtLink>
      <user-info />
    </div>
  </div>
</template>

<script setup lang="ts">
import UserInfo from './UserInfo.vue'
import { useAppStore } from '~/stores/app'
import { useDark, useToggle } from '@vueuse/core'
import { setThemeColor } from '~/utils/util'
import settings from '~/settings'

const isDark = useDark()
const toggleDark = () => {
  useToggle(isDark)()
  setThemeColor(settings.theme, isDark.value ? 'dark' : 'light')
}

const appStore = useAppStore()
const config = computed(() => appStore.config)
</script>

<style scoped lang="scss">
.header-content {
  @apply flex items-center gap-4 min-w-0;
  @apply flex-1 md:px-[4%] lg:px-[8%] xl:px-[12%];
  @apply md:gap-8 lg:gap-10;

  @media screen and (max-width: 768px) {
    padding: 0 1rem;
  }

  &__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);
    }
  }
}
</style>
