<template>
	<div class="app-topbar">
		<div class="app-topbar__collapse" @click="collapse">
			<i :class="[menuCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"></i>
		</div>

		<!-- 一级菜单 -->
		<div v-if="app.conf.showAMenu" class="app-topbar__menu">
			<cl-menu-topbar />
		</div>

		<!-- 路由导航 -->
		<div v-if="app.conf.showRouteNav" class="app-topbar__route-nav">
			<cl-route-nav />
		</div>

		<div class="flex1"></div>

		<!-- 工具栏 -->
		<ul class="app-topbar__tools">
			<!-- 搜索栏 -->
			<li @click="visible = true">
				<svg
					t="1631154602079"
					class="icon"
					viewBox="0 0 1024 1024"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					p-id="4999"
					width="14"
					height="14"
				>
					<path
						d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288 358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z"
						fill="#262626"
						p-id="5000"
					></path>
				</svg>
				<!-- <el-tooltip key="index" content="全局搜索" >
					<icon-svg size="18" name="icon-search" />
				</el-tooltip> -->
				<!-- <i class="el-icon-search" style="font-size: 16px;color: #000000;" ></i> -->
			</li>

			<!-- 消息通知 -->
			<li v-if="modules.chat">
				<cl-chat-notice />
			</li>

			<!-- 主题 -->
			<li v-if="modules.theme">
				<cl-theme />
			</li>
		</ul>

		<!-- 用户信息 -->
		<div class="app-topbar__user">
			<el-dropdown trigger="click" :hide-on-click="false" @command="onCommand">
				<span v-if="userInfo" class="el-dropdown-link">
					<span class="name">{{ userInfo.nickName }}</span>
					<img class="avatar" :src="userInfo.headImg" />
				</span>

				<template #dropdown>
					<el-dropdown-menu class="dropdown-menu__user">
						<el-dropdown-item command="my">个人中心</el-dropdown-item>
						<el-dropdown-item command="exit">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>

		<!-- 全局搜索 -->
		<cl-dialog title="全局搜索" v-model="visible" :drag="false">
			<div class="router">
				<el-select v-model="url" size="medium" filterable prefix-icon="el-icon-search">
					<el-option
						v-for="(item, index) in routes"
						:key="index"
						:label="item.name"
						:value="item.path"
					>
						<span style="float: left">{{ item.name }}</span>
						<span style="float: right">{{ item.path }}</span>
					</el-option>
				</el-select>
				<el-button
					size="small"
					@click="
						navTo();
						visible = false;
					"
					>跳转</el-button
				>
			</div>
		</cl-dialog>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { href } from "/@/core/utils";

export default defineComponent({
	data() {
		return {
			visible: false
		};
	},
	setup() {
		const store = useStore();
		const router = useRouter();
		const url = ref<string>("");

		const routes = computed(() => store.getters.routes);

		// 菜单是否展开
		const menuCollapse = computed<any>(() => store.getters.menuCollapse);

		// 模块列表
		const modules = computed<any>(() => store.getters.modules);

		// 应用信息
		const app = computed<any>(() => store.getters.app);

		// 用户信息
		const userInfo = computed<any>(() => store.getters.userInfo);

		// 跳转官网
		async function onCommand(name: string) {
			switch (name) {
				case "my":
					router.push("/my/info");
					break;
				case "exit":
					await store.dispatch("userLogout");
					href("/login");
					break;
			}
		}

		// 展开
		function collapse() {
			store.commit("COLLAPSE_MENU", !menuCollapse.value);
		}

		function navTo() {
			router.push(url.value);
		}

		return {
			url,
			userInfo,
			menuCollapse,
			routes,
			modules,
			app,
			onCommand,
			collapse,
			navTo
		};
	}
});
</script>

<style lang="scss">
.dropdown-menu__user {
	width: 120px;
}
.router {
	display: flex;
	justify-content: center;
	margin-top: 0px;
	// max-width: 450px;
	width: 100%;

	.el-select {
		font-size: 18px;
		flex: 1;
	}

	.el-button {
		margin-left: 15px;
		background-color: $color-primary;
		border-color: $color-primary;
		border-radius: 5px;
		color: #fff;
		padding: 0 30px;
		letter-spacing: 1px;
		height: 30px;
		line-height: 30px;
	}
}
.app-topbar {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 10px;
	background-color: #fff;

	&__collapse {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		width: 40px;
		cursor: pointer;
		margin-right: 10px;

		i {
			font-size: 22px;
			color: #666;
		}
	}

	.flex1 {
		flex: 1;
	}

	&__tools {
		display: flex;
		margin-right: 20px;

		& > li {
			display: flex;
			justify-content: center;
			align-items: center;
			list-style: none;
			height: 45px;
			padding: 0 10px;
			margin-right: 10px;
			cursor: pointer;

			i {
				font-size: 18px;

				&:hover {
					opacity: 0.8;
				}
			}
		}
	}

	&__user {
		margin-right: 10px;
		cursor: pointer;

		.el-dropdown-link {
			display: flex;
			align-items: center;
		}

		.avatar {
			height: 32px;
			width: 32px;
			border-radius: 32px;
		}

		.name {
			white-space: nowrap;
			margin-right: 15px;
		}

		.el-icon-arrow-down {
			margin-left: 10px;
		}
	}
}
</style>
