<!--
 * @Author: sjl
 * @Date: 2023-04-17 14:51:36
 * @Descripttion: 
-->
<template>
  <div :theme="getHeaderTheme" class="anticon" :class="getAppLogoClass" @click="goHome">
    <img v-if="getLogo" :src="getLogo" />
    <!-- <img v-else src="/src/assets/images/logo.png" /> -->
    <div class="ml-2-left truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
      <!-- {{ getTitle }} -->
      <!-- 地质灾害监测数据支撑子系统 -->
      YX水文气象监测系统
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, unref } from 'vue';
  // import { useGlobSetting } from '/@/hooks/setting';
  // import { useAppStore } from '/@/store/modules/app';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useUserStore } from '/@/store/modules/user';
  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';

  const props = defineProps({
    /**
     * The theme of the current parent component
     */
    theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
    /**
     * Whether to show title
     */
    showTitle: { type: Boolean, default: true },
    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: { type: Boolean },
  });

  const { prefixCls } = useDesign('app-logo');
  const prefixClsObj = useDesign('layout-header');
  const { getCollapsedShowTitle } = useMenuSetting();
  const userStore = useUserStore();
  // const { title } = useGlobSetting();
  const { getHeaderTheme } = useHeaderSetting();
  const getAppLogoClass = computed(() => {
    const theme = unref(getHeaderTheme);
    return [
      prefixCls,
      props.theme,
      { 'collapsed-show-title': unref(getCollapsedShowTitle) },
      {
        [`${prefixClsObj.prefixCls}--${theme}`]: theme,
      },
    ];
  });
  const getTitleClass = computed(() => [
    `${prefixCls}__title`,
    {
      'xs:opacity-0': !props.alwaysShowTitle,
    },
  ]);
  const getLogo = computed(() => {
    return userStore.platInfo?.logo;
  });
  // const appStore = useAppStore();
  // const getTitle = computed(() => {
  //   // 设置icon
  //   let link = (document.querySelector("link[rel*='icon']") ||
  //     document.createElement('link')) as HTMLLinkElement;
  //   link.type = 'image/x-icon';
  //   link.rel = 'shortcut icon';
  //   link.href = userStore.platInfo?.icon ?? '/favicon.ico';
  //   document.getElementsByTagName('head')[0].appendChild(link);
  //   // return userStore.platInfo?.name ?? title;
  //   return appStore.currentSystemName; //'YX水文气象监测系统';
  // });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-app-logo';
  .@{prefix-cls} {
    display: flex;
    align-items: center;
    padding-left: 7px;
    cursor: pointer;
    transition: all 0.2s ease;

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

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

    &.light &__title {
      color: @primary-color;
    }

    &.dark &__title {
      color: @white;
    }

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