<script setup lang="ts">
import { useMenuStore } from '@/stores/menu'
import { useThemeStore } from '@/stores/theme'
import router from '@/router'
import config from '@/config/defaultSetting'

const menuStore = useMenuStore()

const collapse = computed(() => menuStore.collapse)

const themeStore = useThemeStore()

const themeStyle = computed(() => themeStore.themeStyle)

const logoStyle = computed(() => {
  if (themeStore.logoInHeader) {
    return {
      color: '#000'
    }
  }
  if (themeStyle.value.name === 'nav-light') {
    return {
      color: themeStyle.value.textColor,
      backgroundColor: themeStyle.value.bgColor
    }
  }
  return {
    color: '#fff',
    backgroundColor: themeStyle.value.bgColor
  }
})

const handleLogoClick = () => {
  router.push({ name: config.homeRouteName })
}
</script>

<template>
  <div
    class="logo flex items-center justify-center cursor-pointer px-10px"
    :class="{ collapse: !themeStore.logoInHeader && collapse }"
    :style="logoStyle"
    @click="handleLogoClick"
  >
    <img src="/logo.png" class="h-36px" />
    <div class="ml-2 line2" :class="{ hidden: collapse }">{{ config.title }}</div>
  </div>
</template>

<style scoped lang="scss">
.collapse {
  width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2);
}
</style>
