<template>
	<div>
		<!-- //根据平台不同传不同参0后台（管理员）1老师2学生   eduIdentity
		{{userInfo.eduIdentity}}
		管理员 -->
		<div style="display: flex; width: 100%; justify-content: center; align-items: center; position: relative; background: white ">
			<div style="display: flex;width: 1624px ;justify-content: space-between; ">
				<div style="display: flex; padding-left: 0%; ">
					<a-menu v-model:selectedKeys="current"  mode="horizontal" theme="light" @click="onClick" >
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="">资源中心</a-menu-item>
						<a-sub-menu  key="course">
							<template #title>
								<!-- 使用 Ant Design Vue 的图标 -->
								<span>课程相关</span>
							</template>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="portal/courseManagement">课程管理</a-menu-item>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="classManagement">班级管理</a-menu-item>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="announcementManagement">课程公告发布</a-menu-item>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="courseOpen">课程开课</a-menu-item>
						</a-sub-menu>




						<!--					<a-menu-item style="margin-left: 1px; margin-right: 1px"></a-menu-item>-->
						<a-sub-menu  key="">
							<template #title>
								<!-- 使用 Ant Design Vue 的图标 -->
								<span>考试相关</span>
							</template>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="examinationManagement">考试管理</a-menu-item>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="questionnaireManagement">问卷管理</a-menu-item>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="exampaper">试卷管理</a-menu-item>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="student/record/">考试批改</a-menu-item>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="question">题目列表</a-menu-item>
						</a-sub-menu>
						<a-sub-menu  key="res">
							<template #title>
								<!-- 使用 Ant Design Vue 的图标 -->
								<span>统计相关</span>
							</template>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="statistics">统计分析</a-menu-item>
							<a-menu-item style="margin-left: 1px; margin-right: 1px" key="resourceStatistics">资源统计</a-menu-item>


						</a-sub-menu>



						<a-menu-item style="margin-left: 1px; margin-right: 1px" key="forum">论坛</a-menu-item>

						<a-menu-item style="margin-left: 1px; margin-right: 1px" key="resourceConversionLog">资源转换</a-menu-item>
						<!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">站内信</a-menu-item>-->
						<a-menu-item style="margin-left: 1px; margin-right: 1px" key="portal/personalResources">个人资源</a-menu-item>


					</a-menu>

				</div>
				<div style="width: auto; margin-right: 10px; display: flex; align-items: center; " >
					<UserHeader></UserHeader>
				</div>
			</div>



<!--			<div class="header-right">-->
<!--				<div style="display: flex">-->
<!--					<UserOutlined :style="{ fontSize: '16px', color: '#00000083' }" />-->
<!--					<div style="width: 5px"></div>-->
<!--					<span style="font-size: 12px; color: #00000083">登录</span>-->
<!--				</div>-->
<!--				<div style="width: 20px"></div>-->
<!--				<div style="display: flex">-->
<!--					<span style="font-size: 12px; color: #00000083">注册</span>-->
<!--				</div>-->
<!--			</div>-->
			<div class="line" style=""></div>
		</div>

	</div>
</template>

<script setup>
	import { createVNode } from 'vue'
	import {ExclamationCircleOutlined, FolderOutlined} from '@ant-design/icons-vue'
	import { Modal } from 'ant-design-vue'
	import UserHeader from '@/views/portal/components/UserHeader.vue'
	import loginApi from '@/api/auth/loginApi'
	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'
	import EventBus from "@/utils/EventBus";
	const emit = defineEmits(['onChangeCurrent'])
	const userInfo = tool.data.get('USER_INFO')
	watch(
		() => current.value,
		(newVal, oldVal) => {
			if (newVal != oldVal) {
				// emit('onChangeCurrent', newVal)
				// onChangeCurrent(newVal)
			}
		}
	)
	watch(() => route.path,(newPath, oldPath) => { 
		current.value = [newPath.slice(1)]
	 },{ immediate: true });

	const list = ref([
	]);

	const onClick = (e) => {
		console.log('Header.vue: onClick. e:', e);
		onChangeCurrent(e.key)
		// current.value = [e.key]
		// router.push(e.key)
	}

// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="">资源中心</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="portal/personalResources">个人资源</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="portal/courseManagement">课程管理</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="answerManagement">问答管理</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="classManagement">班级管理</a-menu-item>
//
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="examinationManagement">考试管理</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="questionnaireManagement">问卷管理</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="exampaper">试卷管理</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="student/record/">考试批改</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="question">题目列表</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="statistics">统计分析</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="usercenter">个人中心</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="forum">论坛</a-menu-item>
// <!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">站内信</a-menu-item>-->
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="announcementManagement">课程公告发布</a-menu-item>
// 	<a-menu-item style="margin-left: 1px; margin-right: 1px" key="resourceConversionLog">资源转换</a-menu-item>
// 	<a-menu-item style="margin-left: 10px; margin-right: 10px" key="courseOpen">课程开课</a-menu-item>



	const onChangeCurrent = (current) => {
		console.log('收到了呢','原来是啥',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: '/slogin' })
						})
						.catch(() => {
							tool.data.clear()
							router.replace({ path: '/slogin' })
							location.reload()
						})
				},
				onCancel() {}
			})
		}
	}
	onMounted(() => {
		list.value =[
			{
				key: '1',
				title: '项目信息管理1',
				path: '/infomationManage',
				icon:'iconfont icon-information'
			},
			{
				key: '2',
				title: '安全信息管理2',
				path: '/safeInfoManage',
				icon:'iconfont icon-anquan',
				children: [
					{
						key: '2.1',
						title: '安全风险管理2.1',
						path: '/safeRisk',
						icon:'',
						children: [
							{
								key: '2.1.1',
								title: '风险分类管理2.1.1',
								path: '/riskClassifyManage',
								icon:'',
							},
							{
								key: '2.1.2',
								title: '分类辨识2.1.2',
								path: '/classifyIdentity',
								icon:'',
							}
						],
					},
				],
			},
			{
				key: '3',
				title: '质量信息管理3',
				path: '/qualityInfoManage',
				icon:'iconfont icon-zhiliang',
				children:[
					{
						key: '3.1',
						title: '质量控制点管理3.1',
						path: '/controlPointManage',
						icon:'',
					}
				]
			}
		]
	})
	const onSetHeader = (data) => {
		console.log('收到了呢',data,'原来是啥',current.value)
		current.value = [data]
	}

	EventBus.off('onSetHeader', onSetHeader)
	EventBus.on('onSetHeader', onSetHeader)
	console.log('注册了呢','onSetHeader')
</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;
	}
</style>
