<template>
	<div class="mobile-nav-button" @click="showMobileNav($event)" v-drag><el-icon><el-icon-menu /></el-icon></div>

	<el-drawer ref="mobileNavBox" v-model="nav" direction="ltr" :size="205" :with-header="false" destroy-on-close>
		<el-container class="mobile-nav">
			<el-header>
				<div class="logo-bar"><img class="logo" src="img/login_logo.png"><span>{{ $CONFIG.LOGIN_TITLE.slice(4) }}</span></div>
			</el-header>
			<el-main class="nopadding">
				<el-scrollbar>
					<el-menu :default-active="$route.meta.active || $route.fullPath" @select="select" router>
						<NavMenu :navMenus="menu"></NavMenu>
					</el-menu>
				</el-scrollbar>
			</el-main>
		</el-container>
	</el-drawer>
</template>

<script>
	import NavMenu from "./NavMenu";

	export default {
		components: {
			NavMenu
		},

		directives: {
			drag(el) {
				let oDiv = el; //当前元素
				let firstTime = "", lastTime = "";
				//禁止选择网页上的文字
				// document.onselectstart = function() {
				// 	return false;
				// };
				oDiv.onmousedown = function(e) {
					// 鼠标按下，计算当前元素距离可视区的距离
					let disX = e.clientX - oDiv.offsetLeft;
					let disY = e.clientY - oDiv.offsetTop;

					document.onmousemove = function(e) {
						oDiv.setAttribute("drag-flag", true);
						firstTime = new Date().getTime();
						//通过事件委托，计算移动的距离
						let l = e.clientX - disX;
						let t = e.clientY - disY;

						// 移动当前元素
						if (t > 0 && t < document.body.clientHeight - 50) {
							oDiv.style.top = t + "px";
						}
						if (l > 0 && l < document.body.clientWidth - 50) {
							oDiv.style.left = l + "px";
						}
					}

					document.onmouseup = function() {
						lastTime = new Date().getTime();
						if ((lastTime - firstTime) > 200) {
							oDiv.setAttribute("drag-flag", false);
						}
						document.onmousemove = null;
						document.onmouseup = null;
					};
					
					//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
					return false;
				};
			}
		},

		data() {
			return {
				nav: false,
				menu: []
			}
		},
		
		created() {
			this.menu = this.filterUrl(this.$TOOL.data.get("MENU"));
		},

		methods: {
			showMobileNav(e) {
				var isdrag = e.currentTarget.getAttribute("drag-flag");
				if (isdrag == "true") return false;
				else this.nav = true;
			},

			select() {
				this.$refs.mobileNavBox.handleClose();
			},

			// 转换外部链接的路由
			filterUrl(map) {
				let newMap = [];
				map && map.forEach(item => {
					item.meta = item.meta ? item.meta : {};
					// 处理隐藏
					if (item.hidden) return false;
					// 递归循环
					if (item.children && item.children.length > 0) item.children = this.filterUrl(item.children);
					newMap.push(item);
				});
				return newMap;
			}
		}
	}
</script>

<style lang="scss" scoped>
.mobile-nav-button {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--el-color-primary);
  box-shadow: 0 2px 12px 0 var(--el-color-primary);
  border-radius: 50%;

  i {
    font-size: 20px;
    color: #fff;
  }
}

.mobile-nav .el-header .logo-bar {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: bold;
  color: var(--el-color-primary);

  img {
    width: 30px;
    margin-right: 10px;
  }
}
</style>
