<template>
	<a-space class="right-content">
		<a-dropdown arrow>
			<a class="ant-dropdown-link" @click.prevent>
				<a-space>
					<a-avatar :size="32" style="background-color: #0e6dc794">
						{{ (user.fullName || user.userName).substring(0, 1) }}
					</a-avatar>
					<a-typography-text>{{ user.fullName || user.userName }}</a-typography-text>
				</a-space>
			</a>
			<template #overlay>
				<a-menu>
					<a-menu-item>
						<template #icon>
							<icon-font type="icon-cogs"></icon-font>
						</template>
						用户设置
					</a-menu-item>
					<a-menu-item @click="logout">
						<template #icon>
							<icon-font type="icon-logout"></icon-font>
						</template>
						退出登录
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown>
		<a-avatar :size="32" @click="showThemeDrawer">
			<template #icon><icon-font type="icon-theme" /></template>
		</a-avatar>
	</a-space>
	<theme-switcher-drawer ref="themeDrawer"></theme-switcher-drawer>
</template>
<script lang="ts" setup>
	import { useUserStore } from '@/stores/user'

	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import { Modal } from 'ant-design-vue'
	import { createVNode } from 'vue'
	import ThemeSwitcherDrawer from './theme-switcher-drawer.vue'
	const user = useUserStore()
	const logout = () => {
		Modal.confirm({
			title: '退出登录',
			icon: createVNode(ExclamationCircleOutlined),
			content: createVNode('div', { style: 'color:red;' }, '确定退出登录当前用户吗？'),
			okText: '确认',
			cancelText: '取消',
			onOk() {
				user.logout()
			},
		})
	}
	const themeDrawer = ref<typeof ThemeSwitcherDrawer>()
	const showThemeDrawer = () => {
		themeDrawer.value?.showDrawer()
	}
</script>
<style lang="css" scoped>
	.right-content {
		color: #fff;
	}

	.ant-avatar {
		cursor: pointer;
	}
</style>
