<template>
  <div class="anticon" :class="getAppLogoClass" @click="goHome" style="margin-right: 184px;width: 260px !important;">
    <!-- <img v-if="getLogo" :src="getLogo" /> -->
    <img src="/src/assets/images/logo.png" style="width: 52px;height: 30px;" />
    <div class="headerName ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
      <!-- {{ getTitle }} -->
      空间数据管理平台
    </div>
  </div>
  <!-- <div class="logo"></div> -->
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { useGlobSetting } from '/@/hooks/setting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { useUserStore } from '/@/store/modules/user';

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 { getCollapsedShowTitle } = useMenuSetting();
const userStore = useUserStore();
const { title } = useGlobSetting();

const getAppLogoClass = computed(() => [
  prefixCls,
  props.theme,
  { 'collapsed-show-title': unref(getCollapsedShowTitle) },
]);
const getTitleClass = computed(() => [
  `${prefixCls}__title`,
  {
    'xs:opacity-0': !props.alwaysShowTitle,
  },
]);
const getLogo = computed(() => {
  return userStore.platInfo?.logo;
});
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 '空间数据管理平台';
});
</script>
<style lang="less" scoped>
.headerName {
  font-family: '思源黑体';
  font-size: 24px !important;
  font-weight: 900;
  line-height: 28.08px !important;
  letter-spacing: 0.24px !important;
  background: linear-gradient(180deg, #FFFFFF -3%, #E0FBFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

div.logo {
  display: flex;
  align-items: center;
  padding-left: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 48px;
  min-width: 192px;
  padding: 0 10px;
  font-size: 14px;
}

@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>
