<!--
 * @Author: Vben
 * @Description: logo component
-->
<template>
  <div class="anticon" :class="getAppLogoClass" @click="goHome">
    <a href="https://www.learun.cn/" target="_blank">
      <img
        :src="logoConfig.menuLogoUrl || logofull"
        width="124"
        style="height: 26px"
        v-if="getMenuMode == MenuModeEnum.VERTICAL && isCollapse"
      />
      <img :src="logoConfig.smallMenuLogoUrl || logo" width="24" style="height: 30px" v-else />
    </a>
    <div v-if="getMenuMode == MenuModeEnum.HORIZONTAL" class="title"
      >{{ logoConfig.systemName || title }}
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, unref } from 'vue';
  import { MenuModeEnum } from '/@/enums/menuEnum';
  import { useGo } from '/@/hooks/web/usePage';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { PageEnum } from '/@/enums/pageEnum';
  import { useUserStore } from '/@/store/modules/user';
  import { useAppStore } from '/@/store/modules/app';
  import logo from '/@/assets/images/logo.svg';
  import logofull from '/@/assets/images/logo-full.png';
  import { useGlobSetting } from '/@/hooks/setting';
  const props = defineProps({
    /**
     * The theme of the current parent component
     */
    theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
    /**
     * Whether to show title
     */
    isCollapse: { type: Boolean, default: true },
    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: { type: Boolean },
  });
  const { title } = useGlobSetting();
  const { prefixCls } = useDesign('app-logo');
  const { getCollapsedShowTitle, getMenuMode } = useMenuSetting();
  const userStore = useUserStore();
  // const { title } = useGlobSetting();
  const go = useGo();
  const appStore = useAppStore();
  const logoConfig = appStore.getLogoConfig;
  const getAppLogoClass = computed(() => [
    prefixCls,
    props.theme,
    { 'collapsed-show-title': unref(getCollapsedShowTitle) },
  ]);

  // const getTitleClass = computed(() => [
  //   `${prefixCls}__title`,
  //   {
  //     'xs:opacity-0': !props.alwaysShowTitle,
  //   },
  // ]);

  function goHome() {
    go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-app-logo';

  .@{prefix-cls} {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    justify-content: center;

    &.light {
      border-bottom: 1px solid @border-color-base;
    }

    &.collapsed-show-title {
      padding-left: 20px;
    }

    .title {
      font-weight: bold;
      font-size: 18px;
      color: @primary-color;
      line-height: 44px;
      height: 44px;
      border-right: 1px solid #254165;
      padding-right: 27px;
      padding-left: 16px;
      max-width: 203px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    // &.light &__title {
    //   color: @primary-color;
    // }

    // &.dark &__title {
    //   color: #0096df;
    // }

    // &__title {
    //   font-size: 20px;
    //   font-weight: 400;
    //   transition: all 0.5s;
    //   line-height: normal;
    // }
  }
</style>
