<template>
	<a-row type="flex" justify="center">
		<a-col span="18">
			<a-row>
				<a-col span="4">
					<image-container :imgObj="{src: '/images/logo.png',width: '153px',height:'50px'}"></image-container>
				</a-col>
				<a-col span="16" style="color: aliceblue;">
					<a-top-menu></a-top-menu>
				</a-col>
				<a-col span="4">
					<div class="login-label">
						<template v-if="token">
							<template v-if="role == 'company'">
								<a-button size="small" @click="returnHome" v-if="pageType == 'company'">返回首页</a-button>
								<a-dropdown placement="bottomRight">
									<template #overlay>
										<a-menu @click="handleMenuClick">
											<a-menu-item key="1">
												<a-space :size="80">
													<div>发布中</div>
													<div>{{companyJobListLength}}</div>
												</a-space>
											</a-menu-item>
											<a-menu-item key="2">
												<a-space :size="80">
													<div>未查看</div>
													<div>{{companyResumeListLength}}</div>
												</a-space>
											</a-menu-item>
											<a-menu-item key="3">
												<a-space :size="80">
													<div>管理中心</div>
												</a-space>
											</a-menu-item>
											<a-menu-item key="4">
												<a-space :size="80">
													<div>职位管理</div>
												</a-space>
											</a-menu-item>
											<a-menu-item key="5">
												<a-space :size="80">
													<div>简历管理</div>
												</a-space>
											</a-menu-item>
											<a-menu-item key="6">
												<a-space :size="80">
													<div @click="quit">安全退出</div>
												</a-space>
											</a-menu-item>
										</a-menu>
									</template>
									<a-space :size="10">
										<div style="color: aliceblue;">招聘者</div>
										<a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar>
									</a-space>
								</a-dropdown>
							</template>
							<template v-else-if="role == 'personal'">
								<a-button size="small" @click="returnHome" v-if="pageType == 'personal'">返回首页</a-button>
								<a-dropdown placement="bottomRight">
									<template #overlay>
										<a-menu @click="personalMenuClick">
											<a-menu-item key="1">
												<a-space :size="80">
													<div>面试通知</div>
													<div>{{interviewListLength}}个</div>
												</a-space>
											</a-menu-item>
							<!-- 				<a-menu-item key="2">
												<a-space :size="80">
													<div>简历完成度</div>
													<div><a-rate v-model:value="value" /></div>
												</a-space>
											</a-menu-item> -->
											<a-menu-item key="3" v-if="pageType != 'personal'">
												<a-space :size="80">
													<div>管理中心</div>
												</a-space>
											</a-menu-item>
											<a-menu-item key="4">
												<a-space :size="80">
													<div>修改简历</div>
												</a-space>
											</a-menu-item>
											<a-menu-item key="5">
												<a-space :size="80">
													<div>搜索职位</div>
												</a-space>
											</a-menu-item>
											<a-menu-item key="6">
												<a-space :size="80">
													<div>成为招聘者</div>
												</a-space>
											</a-menu-item>
											<a-menu-item key="7">
												<a-space :size="80">
													<div @click="quit">安全退出</div>
												</a-space>
											</a-menu-item>
										</a-menu>
									</template>
									<a-space :size="10">
										<div style="color: aliceblue;">求职者</div>
										<a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar>
									</a-space>
								</a-dropdown>
							</template>
						</template>
						<template v-else>
							<div @click="toLogin" style="cursor: pointer;">
								登录/注册
							</div>
						</template>
					</div>
				</a-col>
			</a-row>
		</a-col>
	</a-row>
	<a-modal v-model:open="openHr" centered title="成为招聘者" @ok="hrOk">
		<a-input v-model:value="form.code" placeholder="请输入验证码" size="large" />
	</a-modal>
</template>
<script lang="ts" setup>
	import { ref, onMounted, computed, defineProps, defineEmits } from 'vue';
	import ATopMenu from '@/components/layout/menu/aMenu.vue';
	import { PostCustomerVerify, GetPersonInterviewList, GetCompanyResumeList, PostCompanyJobList } from '@/apis/models';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { store } from '@/store/index';
	import { router } from '@/router/index';
	import { useMenu } from '@/hooks/useMenu';
	let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu();
	const emit = defineEmits();

	// 成为招聘者
	let openHr = ref<Boolean>(false);
	let form = ref({
		code: ''
	}) 

	const token = computed(() => {
		return store.state.token
	})

	const role = computed(() => {
		return store.state.role
	})

	const pageType = computed(() => {
		return store.state.pageType
	})


	const toLogin = () => {
		router.push('/login')
	}

	const quit = () => {
		if(routerCur() == '/job/home') {
			sessionStorage.clear()
			location.reload()
		} else {
			store.commit('getPageType', {
				pageType: ''
			})
			store.commit('setShowLoginBox', {
				showLoginBox: false
			})
			sessionStorage.clear()
			sessionStorage.setItem('pageType', '')
			store.commit('permissions/SET_PERMISSION', null)
			store.commit('permissions/SET_MENU', [])
			router.push('/job/home')
		}
		
	}

	const returnHome = () => {
		store.commit('getPageType', {
			pageType: ''
		})
		store.commit('setShowLoginBox', {
			showLoginBox: false
		})
		sessionStorage.setItem('pageType', '')
		store.commit('permissions/SET_PERMISSION', null)
		store.commit('permissions/SET_MENU', [])
		router.push('/job/home')
	}

	const handleMenuClick = (val) => {
		if (val.key == 1) {
			if(routerCur() != '/manage/invite') {
				store.commit('getPageType', {
					pageType: 'company'
				})
				sessionStorage.setItem('pageType', 'company')
				store.commit('permissions/SET_PERMISSION', null)
				store.commit('permissions/SET_MENU', [])
				router.push('/manage/invite')
			}
		}
		if (val.key == 2) {
			if(routerCur() != '/manage/resume') {
				store.commit('getPageType', {
					pageType: 'company'
				})
				sessionStorage.setItem('pageType', 'company')
				store.commit('permissions/SET_PERMISSION', null)
				store.commit('permissions/SET_MENU', [])
				router.push('/manage/resume')
			}
		}
		if (val.key == 3) {
			if(routerCur() != '/manage/home') {
				store.commit('getPageType', {
					pageType: 'company'
				})
				sessionStorage.setItem('pageType', 'company')
				store.commit('permissions/SET_PERMISSION', null)
				store.commit('permissions/SET_MENU', [])
				router.push('/manage/home')
			}
		}
		if (val.key == 4) {
			if(routerCur() != '/manage/invite') {
				store.commit('getPageType', {
					pageType: 'company'
				})
				sessionStorage.setItem('pageType', 'company')
				store.commit('permissions/SET_PERMISSION', null)
				store.commit('permissions/SET_MENU', [])
				router.push('/manage/invite')
			}
		}
		if (val.key == 5) {
			if(routerCur() != '/manage/resume') {
				store.commit('getPageType', {
					pageType: 'company'
				})
				sessionStorage.setItem('pageType', 'company')
				store.commit('permissions/SET_PERMISSION', null)
				store.commit('permissions/SET_MENU', [])
				router.push('/manage/resume')
			}
		}
	}
	const personalMenuClick = (val) => {
		if (val.key == 3) {
			store.commit('getPageType', {
				pageType: 'personal'
			})
			sessionStorage.setItem('pageType', 'personal')
			store.commit('permissions/SET_PERMISSION', null)
			store.commit('permissions/SET_MENU', [])
			router.push('/jobseeker/home')
		}
		if (val.key == 4) {
			if(routerCur() == '/jobseeker/resume') {
				location.reload()
			} else {
				store.commit('getPageType', {
					pageType: 'personal'
				})
				sessionStorage.setItem('pageType', 'personal')
				store.commit('permissions/SET_PERMISSION', null)
				store.commit('permissions/SET_MENU', [])
				router.push('/jobseeker/resume')
			}
			
		}
		if (val.key == 5) {
			store.commit('getPageType', {
				pageType: ''
			})
			store.commit('setShowLoginBox', {
				showLoginBox: false
			})
			sessionStorage.setItem('pageType', '')
			store.commit('permissions/SET_PERMISSION', null)
			store.commit('permissions/SET_MENU', [])
			router.push('/personal')
		}
		if (val.key == 6) {
			
			openHr.value = true
			form.value.code = ''
		}

		if (val.key == 7) {
			// store.commit('getPageType', {
			// 	pageType: 'personal'
			// })
			// sessionStorage.setItem('pageType', 'personal')
			// store.commit('permissions/SET_PERMISSION', null)
			// store.commit('permissions/SET_MENU', [])
			// router.push('/jobseeker/home')
		}
	}



	const hrOk = () => {
		if (!form.value.code) {
			warnToast('请输入验证码')
			return;
		} else {
			form.value.code = Number(form.value.code)
			PostCustomerVerify(form.value).then(res => {
				successToast('已经成为招聘者，请重新登录')
				store.commit('getPageType', {
					pageType: ''
				})
				store.commit('setShowLoginBox', {
					showLoginBox: false
				})
				sessionStorage.clear()
				sessionStorage.setItem('pageType', '')
				store.commit('permissions/SET_PERMISSION', null)
				store.commit('permissions/SET_MENU', [])
				router.push('/login')
			})
		}

	}
	
	let interviewListLength = ref<Number>(0)
	let companyResumeListLength = ref<Number>(0)
	let companyJobListLength = ref<Number>(0)
	
	onMounted(() => {
		if(sessionStorage.getItem('pageType') == 'personal' && sessionStorage.getItem('role') == 'personal') {
			GetPersonInterviewList({ status: 0 }).then(res => {
				interviewListLength.value = res.data.total
			})
		}
		if(sessionStorage.getItem('pageType') == 'company' && sessionStorage.getItem('role') == 'company') {
			GetCompanyResumeList().then(res => {
				companyResumeListLength.value = res.data.total
			})
			PostCompanyJobList().then(res => {
				companyJobListLength.value = res.data.total
			})
		}
		
	})
</script>

<style lang="less" scoped>
	.logo {
		float: left;
		width: 120px;
		height: 31px;
		margin: 16px 34px 16px 0;
		background: #fff;
	}

	.login-label {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #fff;
	}


	:deep(.ant-btn) {
		margin-right: 20px !important;
	}
</style>