<script lang="ts" setup>
import { ref } from 'vue';
import { useAppStore } from '@/store/modules/app';

// 国际化
import { useI18n } from 'vue-i18n';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();

const { t } = useI18n();
const appStore = useAppStore();
const title = userStore.title
const institutionName = userStore.institutionName
defineProps({
  collapse: {
    type: Boolean,
    required: true
  }
});

const logo = ref<string>(
  new URL(userStore.webApiBaseHttp + '/image/'+ userStore.headerLogo, import.meta.url).href
);
</script>

<template>
  <transition class="ml-5 bg-white-800">
    <router-link
      key="collapse"
      class="h-[50px] flex items-center justify-center"
      to="/dashboard"
    >
      <img :src="logo" />
      <h1 class="ml-2 text-blank font-bold" :style="{fontSize: appStore.size === 'default' ? '20px' : '22px'}">{{ title }}
        <span v-if="institutionName != null && institutionName != ''" style="color: rgba(64,158,255);">{{ institutionName }}</span>
        
      </h1>
     
    </router-link>
  </transition>
</template>
