<template>
	<div class="content-wrap">
		<el-row>
			<el-col :span="4">
				<div class="project-title">
					<p class="project-name">
						<span class="iconfont iconchubeiliangguanli"></span>
						<span>项目管理</span>
						<!-- <span>{{ title }}</span> -->
					</p>
				</div>
			</el-col>
			<el-col :span="20">
				<BreadCrumb></BreadCrumb>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" id="nav" :style="{ height: wrapHeight + 'px' }">
				<MenuList @childFn="parentFn"></MenuList>
			</el-col>
			<el-col :span="20" id="main" :style="{ height: wrapHeight + 'px' }">
				<el-scrollbar style="height: 100%; overflow-x: hidden">
					<div id="main_content">
						<router-view></router-view>
					</div>
				</el-scrollbar>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import MenuList from '@/components/Layout/menuList/menuList'
import BreadCrumb from '@/components/breadcrumb'
// import Applications from "@/components/common/applications"
export default {
	name: 'layout',
	components: {
		MenuList,
		BreadCrumb,
		// Applications
	},
	data() {
		return {
			id: this.$route.params.id,
			dat: {
				name: 'admin',
				password: 'admin',
			},
			clientHeight: document.documentElement.clientHeight,
			title: '储备粮管理',
		}
	},
	computed: {
		wrapHeight() {
			return this.clientHeight - 215
		},
	},
	methods: {
		update() {
			this.clientHeight =
				document.documentElement.clientHeight ||
				document.body.clientHeight ||
				document.body.offsetHeight
		},
		parentFn(payload) {
			this.title = payload
		},
	},
	mounted() {
		if (!Element.prototype.matches) {
			Element.prototype.matches =
				Element.prototype.msMatchesSelector ||
				Element.prototype.webkitMatchesSelector
		}

		if (!Element.prototype.closest) {
			Element.prototype.closest = function (s) {
				var el = this
				if (!document.documentElement.contains(el)) return null
				do {
					if (el.matches(s)) return el
					el = el.parentElement
				} while (el !== null)
				return null
			}
		}
		this.update()
		var self = this
		window.onresize = function () {
			var timer
			if (timer) return
			var timer = setTimeout(() => {
				self.update()
				timer = null
			}, 200)
		}

		function removePickerPop() {
			let activeEl = document.activeElement
			if (activeEl.classList.contains('el-input__inner')) {
				Array.apply(null, document.body.children).forEach((d) => {
					if (
						d.classList.contains('el-select-dropdown') &&
						d.style.display != 'none'
					) {
						activeEl.click()
						activeEl.blur()
					}
				})
			}
			Array.apply(null, document.body.children).forEach((d) => {
				if (
					d.classList.contains('el-picker-panel') &&
					d.style.display != 'none'
				) {
					var mousedown = document.createEvent('MouseEvents')
					mousedown.initEvent('mousedown', true, true)
					document
						.getElementById('main_content')
						.dispatchEvent(mousedown)
					var mouseup = document.createEvent('MouseEvents')
					mouseup.initEvent('mouseup', true, true)
					document
						.getElementById('main_content')
						.dispatchEvent(mouseup)
				}
			})
		}
		var scrollbar__wrap = document
			.getElementById('main_content')
			.closest('.el-scrollbar__wrap')

		var scrolltimer
		scrollbar__wrap.onscroll = function () {
			if (scrolltimer) return
			removePickerPop()
			scrolltimer = 1
			setTimeout(() => {
				scrolltimer = null
			}, 500)
		}
	},
	beforeDestory() {
		window.onresize = null
	},
}
</script>

<style scoped>
#main,
#nav {
	overflow: hidden;
}
.el-scrollbar /deep/ .el-scrollbar__wrap {
	overflow-x: hidden;
}
.content-wrap {
	margin: 0 auto;
	overflow-x: hidden;
}
.project-title {
	color: #fff;
	background: #0357ab;
	line-height: 40px;
	height: 40px;
	padding-left: 10px;
	font-size: 14px;
}
.project-title {
	color: #fff;
	background: #0357ab;
	line-height: 40px;
	height: 45px;
	padding-left: 10px;
	font-size: 14px;
	text-align: left;
	position: relative;
}

.project-name {
	position: absolute;
	left: 0;
	margin-left: 25px;
}
</style>
<style>
body {
	overflow: hidden;
}
</style>