<template>
	<a>
		<a-avatar shape="square" :src="logo" />
		<h2
			v-if="!collapsed || app.layout.layout === 'mix'"
			:title="name"
			:style="
				app.layout.layout === 'mix'
					? { color: token.colorBorder }
					: { color: themeV === 'light' ? token.colorText : token.colorBorder }
			"
		>
			{{ name.substring(0, 8) }}
		</h2>
	</a>
</template>
<script lang="ts" setup>
	import { useAppStore } from '@/stores/app'
	import { theme } from 'ant-design-vue'
	import logoPng from '@/assets/logo.png'
	const props = defineProps({
		logo: {
			type: String,
			required: false,
			default: () => logoPng,
		},
		collapsed: {
			type: Boolean,
			required: false,
			default: () => true,
		},
	})
	const { logo, collapsed } = toRefs(props)

	const { useToken } = theme
	const { token } = useToken()
	const app = useAppStore()
	const name = computed(() => {
		return app.isCN ? app.title : app.name
	})

	const themeV = computed(() => {
		return app.layout.navTheme === 'light' ? 'light' : 'dark'
	})
</script>
<style scoped>
	h2 {
		display: inline-block;
		margin: 0 0 0 12px;
		overflow: hidden;
		font-size: 16px;
		font-weight: 800;
		vertical-align: middle;
	}

	img {
		display: inline-block;
		height: 32px;
		vertical-align: middle;
	}
</style>
