<template>
	<!-- 
		* title：layout 头部导航
  -->
	<div class="p-layout-header">
		<div class="m-top g_flex_row_between g_h_56" :class="title == '交付助手' ? 'g_border_bottom_d' : 'g_border_bottom_e'">
			<div class="title g_flex_column_center g_pl_16 g_fw_bold">{{ title }}</div>
			<div class="info g_flex_row_end">
				<div class="g_flex_column_center g_mr_12 id" id="id">
					<a-dropdown :trigger="['click']" placement="bottomRight" :getPopupContainer="(node) => node.parentNode.parentNode">
						<div class="g_c_0 g_cursor_point msg g_w_40 g_h_40 g_flex_c" @click.stop="goNotice">
							<i class="iconfont icon-xiaoxi"></i>
						</div>
						<!-- <template #overlay>
              <a-menu>
                <a-menu-item class="g_pl_16 g_pr_16" @click="goSystems">
                  <div class="g_flex_row_between g_w_148 g-header-user" style="padding: 6px 0;border-bottom: 1px solid #eee;">
                    <div class="g_flex_row_start">
                      <div class="g_mr_4">
                        <i class="icon-xitongtongzhi iconfont g_mr_5 g_c_3" style="font-size: 18px;"></i>
                      </div>
                      <div class="g_fs_14 g_c_3 g_flex_column_center">系统通知</div>
                    </div>
                    <div>
                      <i class="iconfont icon-youjiantou"></i>
                    </div>
                  </div>
                </a-menu-item>
                <a-menu-item class="g_pl_16 g_pr_16" @click="goTeam" style="margin-top: -5px;">
                  <div class="g_flex_row_between g_w_148 g-header-user" style="padding: 6px 0;">
                    <div class="g_flex_row_start">
                      <div class="g_mr_4">
                        <i class="icon-tuanduitongzhi iconfont g_mr_5 g_c_3" style="font-size: 18px;"></i>
                      </div>
                      <div class="g_fs_14 g_c_3 g_flex_column_center">团队通知</div>
                    </div>
                    <div>
                      <i class="iconfont icon-youjiantou"></i>
                    </div>
                  </div>
                </a-menu-item>
              </a-menu>
            </template> -->
					</a-dropdown>
				</div>
				<div class="g_flex_column_center">
					<div class="user-box g_flex_row_end">
						<div class="username g_flex_column_center g_fs_14 g_ml_1">
							<a-dropdown :trigger="['click']" placement="bottomRight" :getPopupContainer="(node) => node.parentNode.parentNode">
								<div class="g_flex_row_start_c g_cursor_point g_flex_1">
									<div class="avatar-box g_flex_column_center g_mr_4 g_ml_12">
										<a-image v-if="info.avatar" :width="28" :src="info.avatar" :preview="false" style="border-radius: 50%" />
										<div v-if="!info.avatar">
											<i class="iconfont icon-morentouxiang g_fs_28" style="font-size: 28px"></i>
										</div>
									</div>
									<span class="g_c_6 g_fs_14 g_pr_16" style="line-height: 1" @click.prevent>{{ info.username }}</span>
								</div>
								<template #overlay>
									<a-menu>
										<a-menu-item class="g_pl_16 g_pr_16" @click="setLogout">
											<div class="g_flex_c g_w_148" style="padding: 6px 0">
												<div class="and4-out-btn g_flex_c">退出登录</div>
											</div>
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch, getCurrentInstance } from "vue";
import { useRoute, useRouter } from "vue-router";
import { HomeOutlined } from "@ant-design/icons-vue";
import { logout } from "../api/menu";
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
const route = useRoute();
const router = useRouter();
const info = ref({
	avatar: localStorage.getItem("DAOTIAN_userinfo_avatar") && localStorage.getItem("DAOTIAN_userinfo_avatar").length > 0 ? localStorage.getItem("DAOTIAN_userinfo_avatar") : "",
	username: localStorage.getItem("DAOTIAN_userinfo_name") && localStorage.getItem("DAOTIAN_userinfo_name").length > 0 ? decodeURIComponent(localStorage.getItem("DAOTIAN_userinfo_name")) : "-",
});
onMounted(() => {
	title.value = route.meta.title;
	setTimeout(() => {
		info.value = {
			avatar: localStorage.getItem("DAOTIAN_userinfo_avatar") && localStorage.getItem("DAOTIAN_userinfo_avatar").length > 0 ? localStorage.getItem("DAOTIAN_userinfo_avatar") : "",
			username: localStorage.getItem("DAOTIAN_userinfo_name") && localStorage.getItem("DAOTIAN_userinfo_name").length > 0 ? decodeURIComponent(localStorage.getItem("DAOTIAN_userinfo_name")) : "-",
		};
	}, 300);
});
watch(route, (val) => {
	title.value = val.meta.title;
});
const title = ref("用户列表");

const goJob = () => {
	commonJS.goWiondowOpenPage("list");
};
const goAdmin = () => {
	commonJS.goWiondowOpenPage("homePage");
};
const goPerson = () => {
	commonJS.goWiondowOpenPage("boundtel");
};
const goReturn = () => {
	commonJS.goWiondowOpenPage("homePage");
};
const goNotice = () => {
	console.log(123);
	router.push({
		path: "/notice/notice",
	});
};
const setLogout = () => {
	commonJS.gConfirmModal("退出", "确定要退出登录吗？", () => {
		logout()
			.then(() => {
				localStorage.removeItem("LOGIN_DATA");
				localStorage.removeItem("daotian_to_admin_token");
				localStorage.removeItem("DAOTIAN_token");
				localStorage.removeItem("DAOTIAN_userinfo_name");
				localStorage.removeItem("DAOTIAN_userinfo_avatar");
				localStorage.removeItem("DAOTIAN_userinfo_roleid");
				commonJS.goWiondowOpenPage("login");
			})
			.catch((err) => {
				console.log(err);
			});
	});
};
const dropShow = ref(false);

const visibleDropdown = (e) => {
	console.log("click left button", e);
	dropShow.value = e;
};
// visibleDropdown(visible) {
//   dropShow.value = visible
// },

const goDelivery = () => {
	commonJS.goWiondowOpenPage("delivery");
};

const goSystems = () => {
	commonJS.goWiondowOpenPage("systemMsg");
};

const goTeam = () => {
	commonJS.goWiondowOpenPage("teamMsg");
};
</script>

<style lang="less" scoped>
/deep/ .ant-dropdown {
	top: 60px !important;
}
/deep/.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:hover {
	background-color: #fff !important;
}
.p-layout-header {
	.m-top {
		.info {
			.avatar-box {
				.img {
					border-radius: 50%;
				}
			}
		}
	}
	.msg {
		background-color: #fff;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		&:hover {
			background-color: #e5e5e5;
		}
		&:active {
			background-color: #d9d9d9;
		}
	}
	.user-box {
		background-color: #fff;
		border-radius: 4px;
		height: 40px;
		margin-right: 16px;
		// padding-left: 12px;
		&:hover {
			background-color: #e5e5e5;
		}
		&:active {
			background-color: #d9d9d9;
		}
	}
}

.topMenuSvg {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	position: relative;
	align-items: center;
	cursor: pointer;
	justify-content: center;

	&:hover {
		background-color: #eee;
	}

	&:active {
		background-color: #aaa;
	}
	&.dropShow {
		background-color: #aaa;
	}
}
.fl {
	float: left;
}
.clb {
	clear: both;
}
.menuOpen {
	-webkit-box-shadow: 0 -1px 2px 0 rgba(60, 64, 67, 0.3), 0 -2px 6px 2px rgba(60, 64, 67, 0.15);
	box-shadow: 0 -1px 2px 0 rgba(60, 64, 67, 0.3), 0 -2px 6px 2px rgba(60, 64, 67, 0.15);
	// height: -webkit-calc(100% - 16px);
	// height: calc(100% - 16px);
	// left: 0;
	background-color: #fff;
	margin: 8px 0;
	position: absolute;
	top: 0;
	right: -10px;
	width: 336px;
	border-radius: 4px;
	// padding: 16px;	    // width: -webkit-calc(100% - 16px);
	// width: calc(100% - 16px);
}

.oneMenu {
	width: 72px;
	// height:64px;
	border-radius: 4px;
	text-align: center;
	padding: 4px 0;
	cursor: pointer;

	&:hover {
		background-color: #eee;
	}

	img {
		display: block;
		width: 32px;
		height: 32px;
		margin: 8px auto;
	}
}
.gridMenu {
	.oneMenu {
		margin: 10px 20px;
		a {
			color: rgba(0, 0, 0, 0.65);
		}
	}
}
</style>
