<template>
	<div>
		<a-dropdown >


			<div style="display: flex;  justify-content: center;  align-items: center">
				<a-badge :count="allCount" :offset=[x,y]>
					<div v-if="userInfo && userInfo.avatar" class="account-center-avatarHolder" style="margin-top: 0px; ">
						<div class="avatar">
							<a-spin size="small" :spinning="false">
								<img :src="userInfo.avatar" />
							</a-spin>
							<!--						<a @click="uploadLogo">-->
							<!--							<div :class="userInfo.avatar ? 'mask' : 'mask-notImg'"><upload-outlined /></div>-->
							<!--						</a>-->
						</div>
					</div>
				</a-badge>
				<div style="display: inline ">
					<span style="cursor: pointer;  margin-left: 10px">{{userInfo.name}}</span>
				</div>
			</div>

			<template #overlay>
				<a-menu forceSubMenuRender>
					<div>
							<a-menu-item @click="onChangeCurrent('usercenter')">
								个人中心
							</a-menu-item>
					</div>
					<div>
						<a-badge :count="myMsgCount" :offset=[xx,yy]>
							<a-menu-item @click="onChangeCurrent('myMsg')">
								站内信
							</a-menu-item>
						</a-badge>
					</div>
				<div>
						<a-menu-item @click="onChangeCurrent('answerManagement')">
							问答管理
						</a-menu-item>
				</div>
					<div>
						<a-badge :count="announcementLookManagementCount" :offset=[xxx,yyy]>
							<a-menu-item @click="onChangeCurrent('announcementLookManagement')">
								课程公告
							</a-menu-item>
						</a-badge>
					</div>
				<div>
					<a-menu-item @click="handleUser('outLogin')">
						退出账号
					</a-menu-item>
				</div>

				</a-menu>
			</template>

		</a-dropdown>


	</div>
</template>

<script setup>
	import { createVNode } from 'vue'
	import {ExclamationCircleOutlined, FolderOutlined} from '@ant-design/icons-vue'
	import { Modal } from 'ant-design-vue'
	import loginApi from '@/api/auth/loginApi'
	import { getCount } from '@/api/portal'
	import { message } from 'ant-design-vue'
	import { ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	const current = ref([route.path.slice(1)]) // 默认选中“资源中心”
	import tool from '@/utils/tool'
	const emit = defineEmits(['onChangeCurrent'])
	import { globalStore } from '@/store'
	import EventBus from "@/utils/EventBus";

	const global_store = globalStore()

	const allCount = ref(0)
	const myMsgCount = ref(0)
	const answerManagementCount = ref(0)
	const announcementLookManagementCount = ref(0)


	const userInfo = computed(() => {
		console.log('用户信息',global_store.userInfo)
		return global_store.userInfo
	})

	// watch(
	// 	() => current.value,
	// 	(newVal, oldVal) => {
	// 		if (newVal != oldVal) {
	// 			// emit('onChangeCurrent', newVal)
	// 			onChangeCurrent(newVal)
	// 		}
	// 	}
	// )

	const list = ref([
	]);
	const x = ref(0);
	const y = ref(5);

	const xx = ref(15);
	const yy = ref(15);

	const xxx = ref(2);
	const yyy = ref(15);

	const onChangeCurrent = (current) => {

		router.push({
			path: '/' + current
		})
	}
	const slogin = () =>{
		router.push({
			path: '/slogin'
		})
	}
	const handleUser = (key) => {
		if (key === 'outLogin') {
			Modal.confirm({
				title: '提示',
				content: '确认退出当前用户？',
				icon: createVNode(ExclamationCircleOutlined),
				maskClosable: false,
				onOk() {
					// 取得缓存中的token
					const token = tool.data.get('TOKEN')
					const param = {
						token: token
					}
					message.loading('退出中...', 1)
					loginApi
						.logout(param)
						.then(() => {
							// 清理掉个人的一些信息
							tool.data.remove('TOKEN')
							tool.data.remove('USER_INFO')
							tool.data.remove('MENU')
							tool.data.remove('PERMISSIONS')
							tool.cookie.remove('Token')
							router.replace({ path: '/tlogin' })
						})
						.catch(() => {
							tool.data.clear()
							router.replace({ path: '/tlogin' })
							location.reload()
						})
				},
				onCancel() {}
			})
		}
	}

	const getCounts = async () => {
// 获取路径部分
		const currentPath = window.location.pathname;
		console.log('当前路径',' currentPath ',currentPath)
		if(currentPath != '/tlogin' && currentPath != '/jump'){
			if(tool.data.get('TOKEN')){
				//站内信
				let funcType1 = await getCount({funcType : 1})
				console.log('获取未读数量 站内信',funcType1)
				let funcType2 = await getCount({funcType : 2})
				console.log('获取未读数量 公告',funcType2)
				myMsgCount.value = funcType1.data.unreadCount
				announcementLookManagementCount.value = funcType2.data.unreadCount
				allCount.value = funcType1.data.unreadCount+ funcType2.data.unreadCount
			}

		}



	}


	onMounted(() => {
		console.log('都掏出来',userInfo)
		getCounts()
	})

	EventBus.off('getCounts', getCounts)
	EventBus.on('getCounts', getCounts)
</script>

<style scoped lang="less">
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 50px;
	}
	.headerBtn {
		display: flex;
		padding-left: 10%;
		flex:1;
		:deep(.ant-menu-horizontal) {
			line-height: 55px;
		}
	}
	.header-right {
		display: flex;
		align-items: center;
		margin-right: 20%;
	}
	.fcbc {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.line {
		width: 100%;
		height: 2px;
		position: absolute;
		bottom: 0px;
		background-color: #00000013;
	}
	.account-center-avatarHolder {
		text-align: center;

		& > .avatar {
			margin: 0 auto;
			width: 35px;
			height: 35px;
			margin-bottom: 1px;
			border-radius: 50%;
			overflow: hidden;

			img {
				height: 100%;
				width: 100%;
			}
		}
	}
</style>
