<template>
	<div class="main-header">
		<div class="menu-name">{{ menuName }}</div>

		<!--菜单的选项-->
		<a-radio-group v-if="showMenuTab" v-model:value="menuIndex" size="large">
			<a-radio-button v-for="(item, index) of menuList" :key="item.id" :value="index">
				{{ item.menuName }}
			</a-radio-button>
		</a-radio-group>

		<div class="spacer"></div>

		<!--搜索的icon-->
		<a-auto-complete
			:fieldNames="{ value: 'displayName', label: 'displayName' }"
			:filterOption="filterOption"
			:options="menuOptions"
			@select="selectOption"
		>
			<template #default>
				<a-input allowClear placeholder="搜索菜单" />
			</template>
		</a-auto-complete>
		<!--		<search-outlined class="icon"/>-->

		<!--消息-->
		<a-badge class="icon" count="0">
			<bell-outlined />
		</a-badge>

		<!--个人信息-->
		<a-dropdown>
			<div class="info">
				<a-avatar :size="32" class="avatar">
					<template #icon>
						<img v-if="userStore.avatar" :src="userStore.avatar" />
						<UserOutlined v-else />
					</template>
				</a-avatar>

				<div class="user-name">{{ userStore.userName }}</div>

				<DownOutlined />
			</div>

			<!--个人信息菜单-->
			<template #overlay>
				<a-menu>
					<a-menu-item key="info" @click="handleInfo()">
						<user-outlined />
						个人信息
					</a-menu-item>
					<a-menu-item key="settings" @click="handleSetting()">
						<setting-outlined />
						个人设置
					</a-menu-item>
					<a-menu-item key="clear-cache" @click="handleClearCache()">
						<clear-outlined />
						清除缓存
					</a-menu-item>
					<a-menu-divider />
					<a-menu-item key="logout" @click="handleLogout()">
						<logout-outlined />
						退出登录
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown>
	</div>
</template>

<script lang="ts" setup>
import { BellOutlined, ClearOutlined, DownOutlined, LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '../../../store/user'
import requestMethod from '../../../api/login/login'
import { messageMethod } from '../../../utils/message-util'
import { useSystemStore } from '../../../store/system'
import { useRoute, useRouter } from 'vue-router'
import { useMenuStore } from '../../../store/menu'
import { computed, onMounted, ref, watchEffect } from 'vue'
import { SystemMenu } from '../../../entity/system/system-menu'
import { useRequestStore } from '../../../store/request'
import { useDynamicTableStore } from '../../../store/dynamic-table'

// 菜单缓存
const menuStore = useMenuStore()

/**
 * 是否显示tab
 */
const showMenuTab = computed(() => menuStore.showMenuTab)
const menuList = computed(() => menuStore.menuList)
/**
 * 当前的菜单序号
 */
const menuIndex = computed({
	get: () => menuStore.menuIndex,
	set: value => {
		menuStore.setIndex(value)
	}
})

// 用户存储
// 使用系统存储
const systemStore = useSystemStore()
// 用户信息
const userStore = useUserStore()
// 使用请求缓存信息
const requestStore = useRequestStore()
// 使用动态表缓存
const dynamicTableStore = useDynamicTableStore()

const router = useRouter()

// 左上角的菜单
onMounted(() => {
	// 更新缓存
	menuStore.registerMenu()
})

// 面包屑
let route = useRoute()
const menuName = ref<string>('')

/**
 * 根据路由的地址查找菜单，并开启
 */
watchEffect(() => {
	let systemMenu = menuStore.menuMap[route.path]
	// 设置面包屑
	if (systemMenu) {
		menuName.value = systemMenu.displayName?.split(',').slice(1).join(' · ') ?? ''
	} else {
		menuName.value = ''
	}
})

/**
 * 自动完成
 */
const menuOptions = computed(() =>
	Object.values(menuStore.menuMap)
		.filter((value, index) => value?.menuLevel > 2 && value.isShow)
		.map(menu => {
			return {
				...menu,
				displayName: menu.displayName.split(',').slice(1).join(' - ')
			}
		})
)

/**
 * 过滤菜单
 * @param inputValue
 * @param option
 */
function filterOption(inputValue: string, option: SystemMenu) {
	return option.displayName?.indexOf(inputValue) >= 0 || false
}

/**
 * 选中菜单
 * @param value
 * @param option
 */
function selectOption(value: string, option: SystemMenu) {
	if (!option.linkUrl) return

	const pattern = /^((http|https|ftp):\/\/)/

	if (pattern.test(option.linkUrl)) {
		// 如果是http开头，那么就是网址
		window.open(option.linkUrl, '_blank')
	} else {
		// 否则打开路由
		router.replace(option.linkUrl)
	}
}

/**
 * 退出登录
 */
async function handleLogout() {
	const { message } = await requestMethod.loginOut()
	messageMethod.success(message)
	// 设置系统信息缓存
	systemStore.setToken('')
	// 设置用户信息缓存
	userStore.clearInfo()

	// 返回登录
	await router.replace('/login')
}

/**
 * 个人信息
 */
function handleInfo() {
	// 否则打开路由
	router.replace('/account/information')
}

/**
 * 个人信息设置
 */
function handleSetting() {
	router.replace('/account/information/detail')
}

/**
 * 清除缓存信息
 */
function handleClearCache() {
	requestStore.$reset()
	dynamicTableStore.$reset()
	messageMethod.success('清除缓存成功')
}
</script>
<script lang="ts">
export default {
	name: 'IndexHeader'
}
</script>

<style lang="scss" scoped>
.main-header {
	height: 64px;
	background: #ffffff;
	//box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
	box-shadow: 0 5px 15px 3px rgba(4, 32, 24, 0.15);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 2;
	padding: 0 24px;

	.menu-name {
		font-size: 1rem;
		color: #232d2c;
		font-weight: bold;
	}

	// 图标
	.icon {
		font-size: 1.125rem;
		margin: 0 12px;
	}

	.info {
		display: flex;
		align-items: center;
		margin-left: 24px;

		// 用户名称
		.user-name {
			margin-left: 8px;
			font-size: 0.875rem;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.65);
			margin-right: 8px;
		}
	}
}
</style>
