<!--前端样式1-->
<template>
	<el-row justify="space-between">
		<el-col :span="6">
			<div class="grid-content ep-bg-purple" />
		</el-col>
		<el-col :span="12">
			<el-menu
				:default-active="nav.frontPath"
				mode="horizontal"
				@select="handleSelect"
				router
			>
				<el-menu-item
					class="nav-name"
					v-for="r of getFrontList()" :key="r.path"
					:index="r.path">
					{{ r.name }}
				</el-menu-item>
			</el-menu>
		</el-col>
		<el-col :span="3">
			<el-button v-if="!userStore().frontIsLogin"
								 style="margin-top: 12px" type="primary"
								 round @click="router.push('/login')">登录</el-button>
			<el-dropdown v-else>
				<el-row :gutter="20">
					<el-col :span="24">
						<h6>{{ state.userInfo.nickName }}</h6>
					</el-col>
				</el-row>
				<template #dropdown>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click="to">个人中心</el-dropdown-item>
						<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</el-col>
	</el-row>



</template>
<script setup lang="ts">
import { getFrontList } from '~/utils/utils'
import { useRouter } from 'vue-router'
import { logoutFront } from '~/api/user/frontUserApi'
const router = useRouter()
const  nav = navStore()
const handleSelect = (key: string, keyPath: string[]) => {
	nav.frontPath  = key.fullPath
}
const state = reactive({
	userInfo:{}
})
onMounted(()=>{
	frontRequest.get("/api/user/userInfo").then(response =>{
		state.userInfo = response.data
	})
})

/**
 * 退出登录
 */
const logout = () => {
	logoutFront().then(() => {
		const  user = userStore()
		user.frontIsLogin = false
		user.frontToken = ''
		user.frontUserInfo = {}
		toast.success('退出成功~')
		router.push('/login')
	})
}

function to() {
	router.push('/user')
}
</script>
<style scoped>
:deep(.el-menu--horizontal) {
	border-bottom: none;
}
h6 {
	font-weight: 700;
	font-size: 16px;
	padding-top: 15px;
	letter-spacing: 0.5px;
}
.nav-name{
	font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #303133;
}
</style>
