<template>
	<div class="navbar" style="background-color: #218066;">
		<logo v-if="showLogo" :collapse="isCollapse" />
		
		<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" /> -->
		<top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />

		<div class="right-menu">
			<template v-if="getters.device !== 'mobile'">
				<hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container"
					@toggleClick="toggleSideBar" />
				<ShipSelect />

				<header-search id="header-search" class="right-menu-item" style="color:var(--van-white);"/>

				<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip content="文档地址" effect="dark" placement="bottom">
          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
        </el-tooltip> -->

				<screenfull id="screenfull" class="right-menu-item hover-effect" style="color:var(--van-white);"/>
				<Notice v-hasPermi="['apply:apply:list','maintenanceRecord:maintenanceRecord:list']"
					class="right-menu-item hover-effect" />
				<div class="right-menu-item hover-effect" v-hasRole="['admin','test']">
					<svg-icon :icon-class="`dashboard`" style="color:var(--van-white);font-size:16px;"
						@click="handleShowCustomeThemeDrawer" />
				</div>
				<!-- <div class="right-menu-item hover-effect">
					<svg-icon :icon-class="`barbecue`" style="color:var(--van-white);font-size:16px;"
						@click="handleShowBarBecueChartRef"/>
				</div> -->
				<!-- <ToggleTheme /> -->
				<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip> -->
			</template>
			<div class="avatar-container">
				<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
					<div class="avatar-wrapper flex align-center">
						<!-- <el-badge :value="applyListBadge + maintenanceRecordListBadge"
              :hidden="applyListBadge + maintenanceRecordListBadge == 0">
              <img :src="getters.avatar" class="user-avatar" />
            </el-badge> -->
						<!-- <img :src="getters.avatar" class="user-avatar" /> -->
						<UserAvatar :src="$store.state.user.user.avatar" size="40px" :enablePreview="false" />
						<div class="margin-left-xs" style="color:var(--van-white);">
							<div class="text-df text-bold">{{ $store.state.user.user.nickName }}</div>
							<div class="text-sm">{{ $store.state.user.user.userName }}</div>
						</div>
						<!-- <el-icon><caret-bottom /></el-icon> -->
					</div>
					<template #dropdown>
						<el-dropdown-menu>
							<router-link to="/user/profile">
								<el-dropdown-item>个人中心</el-dropdown-item>
							</router-link>
							<!-- <router-link to="/workbench/todo">
                <el-dropdown-item>
                  <div class="" style="width:60px">
                    <el-badge :value="applyListBadge" :hidden="applyListBadge == 0">
                      <span class="">我的待办</span>
                    </el-badge>
                  </div>
                </el-dropdown-item>
              </router-link>
              <router-link to="/maintentance/maintenanceRecord">
                <el-dropdown-item>
                  <div class="" style="width:60px">
                    <el-badge :value="maintenanceRecordListBadge" :hidden="maintenanceRecordListBadge == 0">
                      <span class="">维保记录</span>
                    </el-badge>
                  </div>
                </el-dropdown-item>
              </router-link> -->
							<el-dropdown-item command="setLayout">
								<span>布局设置</span>
							</el-dropdown-item>
							<el-dropdown-item divided command="logout">
								<span>退出登录</span>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>

		<CustomeThemeDrawer ref="customeThemeDrawerRef" />
		<!-- <BarBecueChart ref="BarBecueChartRef" /> -->
	</div>
</template>

<script setup>
	import modal from "@/plugins/modal";
	import Breadcrumb from "@/components/Breadcrumb";
	import TopNav from "@/components/TopNav";
	import Hamburger from "@/components/Hamburger";
	import Screenfull from "@/components/Screenfull";
	import SizeSelect from "@/components/SizeSelect";
	import HeaderSearch from "@/components/HeaderSearch";
	import RuoYiGit from "@/components/RuoYi/Git";
	import RuoYiDoc from "@/components/RuoYi/Doc";
	import ShipSelect from "@/components/ShipSelect";
	import ToggleTheme from "@/components/ToggleTheme";
	import Notice from "@/components/Notice";
	import Logo from "./Sidebar/Logo";
	// 自定义主题
	import CustomeThemeDrawer from "@/components/CustomeTheme/drawer";
	import BarBecueChart from "@/components/Baidubce/chat";
	const showLogo = computed(() => proxy.$store.state.settings.sidebarLogo);
	const isCollapse = computed(() => !proxy.$store.state.app.sidebar.opened);
	const store = useStore();
	const getters = computed(() => store.getters);
	const {
		proxy
	} = getCurrentInstance();

	function toggleSideBar() {
		store.dispatch("app/toggleSideBar");
	}

	function handleCommand(command) {
		switch (command) {
			case "setLayout":
				setLayout();
				break;
			case "logout":
				logout();
				break;
			default:
				break;
		}
	}

	function logout() {
		console.log(proxy.$route);
		console.log(proxy.$router);
		console.log(proxy.$router.options.history.base);
		modal
			.confirm("确定注销并退出系统吗？")
			.then(() => {
				store.dispatch("LogOut").then(() => {
					// proxy.$router.push("/")
					// location.reload()
					// location.href = '/index';
					proxy.$router.replace("/login");
					proxy.$store.state.tagsView.visitedViews = [];
				});
			})
			.catch(() => {});
	}

	const emits = defineEmits(["setLayout"]);

	function setLayout() {
		emits("setLayout");
	}

	const applyListBadge = computed(() => store.state.data.applyList.length);
	const maintenanceRecordListBadge = computed(
		() => store.state.data.maintenanceRecordList.length
	);

	const handleShowCustomeThemeDrawer = () => {
		proxy.$refs["customeThemeDrawerRef"].show();
	};
	const handleShowBarBecueChartRef = () => {
		proxy.$refs["BarBecueChartRef"].show();
	};
</script>

<style lang='scss' scoped>
	.navbar {
		height: 50px;
		overflow: hidden;
		position: relative;
		// background: #fff;
		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

		.hamburger-container {
			line-height: 46px;
			height: 100%;
			float: left;
			cursor: pointer;
			transition: background 0.3s;
			-webkit-tap-highlight-color: transparent;

			&:hover {
				background: rgba(0, 0, 0, 0.025);
			}
		}

		.breadcrumb-container {
			float: left;
		}

		.topmenu-container {
			position: absolute;
			left: 50px;
		}

		.errLog-container {
			display: inline-block;
			vertical-align: top;
		}

		.right-menu {
			float: right;
			height: 100%;
			line-height: 50px;
			display: flex;

			&:focus {
				outline: none;
			}

			.right-menu-item {
				display: inline-block;
				padding: 0 8px;
				height: 100%;
				font-size: 18px;
				color: #5a5e66;
				vertical-align: text-bottom;

				&.hover-effect {
					cursor: pointer;
					transition: background 0.3s;

					&:hover {
						background: rgba(0, 0, 0, 0.025);
					}
				}
			}

			.avatar-container {
				margin-right: 20px;

				.avatar-wrapper {
					margin-top: 5px;
					position: relative;

					.user-avatar {
						cursor: pointer;
						width: 40px;
						height: 40px;
						border-radius: 10px;
					}

					i {
						cursor: pointer;
						position: absolute;
						right: -20px;
						top: 25px;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>