<template>
	<div class="content-wrap">
		<el-row>
			<el-col :span="4">
				<div class="project-title">
					<p class="project-name">
						<span class="iconfont iconsheliangqiyeguanli"></span>
						<span>业务报表</span>
					</p>
				</div>
			</el-col>
			<el-col :span="20">
				<BreadCrumb></BreadCrumb>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" id="nav">
				<MenuList></MenuList>
			</el-col>
			<el-col :span="20" id="main">
				<el-scrollbar style="height: 100%; overflow-x: hidden">
					<router-view></router-view>
				</el-scrollbar>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import MenuList from '@/page/Layout/menuList/menuList'
import BreadCrumb from '@/components/common/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',
			},
		}
	},
	methods: {
		update() {
			var clientHeight =
				document.documentElement.clientHeight ||
				document.body.clientHeight ||
				document.body.offsetHeight
			var height = clientHeight - 245
			this.$nextTick(() => {
				let nav = document.querySelector('#nav')
				if (nav) nav.style.height = height + 'px'
				let main = document.querySelector('#main')
				if (main) main.style.height = height + 'px'
			})
		},
	},
	mounted() {
		this.update()
		var self = this
		window.onresize = function () {
			var timer
			if (timer) return
			var timer = setTimeout(() => {
				self.update()
				timer = null
			}, 200)
		}
	},
	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: 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>
