<template>
  <div
    class="logo"
    :class="{
      'collapsed-login': isCollapsed,
    }"
    v-if="isMixMenuNoneSub"
  >
    <img src="~@/assets/images/logo.png" alt="" :class="{ 'mr-2': !isCollapsed }" />
    <h2 v-show="!isCollapsed" class="mt-0 title">云恒WMS</h2>
  </div>
</template>

<script lang="ts" setup>
  import { inject, computed, unref } from 'vue';
  import { useThemeVars } from 'naive-ui';
  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';
  import { useRoute } from 'vue-router';

  const { getNavMode, getNavTheme, getMenuSetting } = useProjectSetting();

  const settingStore = useProjectSettingStore();
  const { getDarkTheme } = useDesignSetting();

  const isCollapsed = inject('collapsed');

  const themeVars = useThemeVars();

  const navMode = getNavMode;

  const minMenuWidth = computed(() => {
    return getMenuSetting.value.minMenuWidth + 'px';
  });

  const menuWidth = computed(() => {
    return getMenuSetting.value.menuWidth + 'px';
  });

  const isMixMenuNoneSub = computed(() => {
    const mixMenu = settingStore.menuSetting.mixMenu;
    const currentRoute = useRoute();
    if (unref(navMode) != 'horizontal-mix') return true;
    if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute?.meta.isRoot) {
      return false;
    }
    return true;
  });

  const getBgColor = computed(() => {
    let isLight = getNavTheme.value === 'light';
    return getDarkTheme.value
      ? themeVars.value.cardColor
      : isLight
      ? '#FFFFFF'
      : themeVars.value.invertedColor;
  });

  const getColor = computed(() => {
    let isLight = getNavTheme.value === 'light';
    return isLight ? themeVars.value.textColor1 : '#FFFFFF';
  });
</script>

<style lang="less" scoped>
  .logo {
    width: v-bind(menuWidth);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    line-height: 64px;
    overflow: hidden;
    white-space: nowrap;
    background: v-bind(getBgColor);
    color: v-bind(getColor);
    transition: all 0.2s ease-in-out;

    img {
      width: auto;
      height: 32px;
    }

    .title {
      margin-bottom: 0;
    }
  }

  .collapsed-login {
    width: v-bind(minMenuWidth);
  }
</style>
