<template>
	<div class="login-menu">
		<t-dropdown
			v-if="userStore.isLogged() && userStore.loginUser.user"
			class="logged"
			trigger="click"
			v-popup:config="popupUserStore.config"
			@mouseenter="popupUserStore.user.value = userStore.loginUser.user"
		>
			<t-button class="button" variant="text">
				<template #icon>
					<t-avatar
						class="icon"
						:class="(<any>ImageType)[userStore.loginUser.user.profile.avatarType]"
						:image="UserAPI.getAvatarURL(userStore.loginUser.user.profile)"
						size="small"
						shape="round"
					/>
				</template>
				<span v-text="userStore.loginUser.user.name"></span>
				<template #suffix>
					<icon name="ARROW_1_S" />
				</template>
			</t-button>
			<t-dropdown-menu>
				<t-dropdown-item @click="toUserSpace">
					<template #prefixIcon>
						<icon name="USER" />
					</template>
					<span>个人中心</span>
				</t-dropdown-item>
				<t-dropdown-item @click="userStore.logout()">
					<template #prefixIcon>
						<icon />
					</template>
					<span>退出登录</span>
				</t-dropdown-item>
			</t-dropdown-menu>
		</t-dropdown>
		<t-button
			v-else
			variant="text"
			@click="visitableAuth = true"
		>
			<template #icon>
				<icon class="icon" name="USER" />
			</template>
			<span>登录</span>
		</t-button>
	</div>
	<t-dialog
		v-model:visible="visitableAuth"
		attach="body"
		:close-btn="false"
		:header="false"
		:footer="false"
	>
		<authorize-form
			v-if="visitableAuth"
			@login-success="visitableAuth = false"
			@register-success="visitableAuth = false"
		/>
	</t-dialog>
</template>
<script lang="ts" setup>
import { Icon, ImageType, SettingKey, SettingMapper, UserAPI, userStore } from "timi-web";
import { AuthorizeForm, popupUserStore } from "timi-tdesign-pc";

const visitableAuth = ref<boolean>(false);

const toUserSpace = () => {
	const loginUserId = userStore.loginUser.token?.id;
	if (loginUserId) {
		window.open(`${SettingMapper.getDomainLink(SettingKey.DOMAIN_SPACE)}/${loginUserId}`, "_blank");
	}
};
</script>
<style lang="less" scoped>
.login-menu {

	.icon {
		margin-right: .5rem;
	}

	.logged {

		&.button {
			padding: 0;
		}
	}
}
</style>
