<template>
	<el-container style="height: 100%">
		<el-header>
			<div class="sys-name">
				<img src="../assets/images/logo.png" @click="collapseFun" />
				智慧农业大数据平台
			</div>
			<div class="navbarBtn">
				<!-- 轮播消息 -->
				<!-- <div class="messageFrame">
					<el-carousel
						height="50px"
						:interval="5000"
						direction="vertical"
						:autoplay="true"
					>
						<el-carousel-item v-for="item in 3" :key="item">
							<div class="medium">
								<i
									style="font-size: 23px; float: left"
									class="iconfont icon-xinxi1"
								></i
								>：太阳能气象站监测终端指标预警太阳能气象站监测终端指标预警太阳能气象站监测终端指标预警
							</div>
						</el-carousel-item>
					</el-carousel>
				</div> -->
				<div class="userInfoBtns">
					<!-- 更换首页 -->
					<div class="iconFont">
						<i
							@click="changeHomedialogVisible = true"
							class="iconfont icon-BAI-wuzi"
						></i>
					</div>
					<!-- 更换皮肤 -->
					<!-- <div class="iconFont">
						<el-dropdown
							@command="handleCommand"
							placement="bottom"
							trigger="click"
						>
							<span class="el-dropdown-link">
								<i class="iconfont icon-zhuti_tiaosepan_o"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="ffffff">深色</el-dropdown-item>
								<el-dropdown-item command>浅色</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div> -->
					<!-- 铃铛 -->
					<!-- <div class="iconFont">
						<el-dropdown
							@command="handleCommand"
							placement="bottom-end"
							trigger="click"
						>
							<span class="el-dropdown-link">
								<el-badge is-dot class="item">
									<i class="iconfont icon-icon_huabanfuben"></i>
								</el-badge>
							</span>
							<el-dropdown-menu slot="dropdown" class="newsDropdown">
								<h5>2016 新的系统通知</h5>
								<div>
									<ul>
										<li class="news">
											<div class="txtContent">
												<a href
													>太阳能气象站监测终端指标预警太阳能气象站监测终端指标预警太阳能气象站监测终端指标预警</a
												>
											</div>
											<el-badge value="new" class="item"></el-badge>
										</li>
										<li class="news">
											<div class="txtContent">
												<a href>太阳能气象站监测终端指标预警太阳指标预警</a>
											</div>
											<el-badge value="new" class="item"></el-badge>
										</li>
										<li class="news">
											<div class="txtContent">
												<a href>终端指标预警</a>
											</div>
											<el-badge value="new" class="item"></el-badge>
										</li>
										<li class="news">
											<div class="txtContent">
												<a href>太阳能气象站监测</a>
											</div>
											<el-badge value="new" class="item"></el-badge>
										</li>
										<li class="news">
											<div class="txtContent">
												<a href>太阳能气象站监测终端指标预警太阳能</a>
											</div>
											<el-badge value="new" class="item"></el-badge>
										</li>
										<li class="news">
											<div class="txtContent">
												<a href style="color: #2489c5">查看全部系统通知</a>
											</div>
										</li>
									</ul>
								</div>
							</el-dropdown-menu>
						</el-dropdown>
					</div> -->
					<!-- 用户 -->
					<div>
						<el-dropdown trigger="click" @command="dropdownHandle">
							<span class="el-dropdown-link" style="cursor: pointer">
								{{ username }}
								<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="personMsg"
									>个人中心</el-dropdown-item
								>
								<el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
								<el-dropdown-item command="outSys">退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
		</el-header>
		<!-- 更换首页HTML -->
		<el-dialog
			title="更换首页"
			:visible.sync="changeHomedialogVisible"
			width="30%"
			@close="changeHomeDialogClosed"
		>
			<el-row :gutter="20">
				<el-col :span="12" v-for="(item, index) in homeList" :key="index">
					<div class="grid-content changeHomeItem" @click="changeHome(index)">
						<div>
							<img :src="item.img" />
						</div>
						<div class="tit">{{ item.name }}</div>
					</div>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="changeHomedialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="changeHomedialogVisible = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
		<!-- 修改密码对话框 -->
		<el-dialog
			title="重置密码"
			:visible.sync="resetPassDialogVisible"
			width="500px"
			@close="resetPassDialogClosed"
		>
			<el-form
				ref="resetPassFormRef"
				:model="resetPassForm"
				label-width="90px"
				:rules="resetPassFormRules"
			>
				<el-form-item label="原始密码 : " prop="oldPass">
					<el-input type="password" v-model="resetPassForm.oldPass"></el-input>
				</el-form-item>
				<el-form-item label="新密码 : " prop="newPass">
					<el-input type="password" v-model="resetPassForm.newPass"></el-input>
				</el-form-item>
				<el-form-item label="确认新密码 : " prop="checkNewPass">
					<el-input
						type="password"
						v-model="resetPassForm.checkNewPass"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetPassDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="resetPassSubm">确认</el-button>
			</span>
		</el-dialog>
		<el-container style="overflow: auto">
			<!-- 菜单 -->
			<el-aside :width="isCollapse ? '0px' : '200px'" class="sysAside">
				<el-menu
					default-active="2"
					class="el-menu-vertical-demo"
					:router="isRouter"
					:collapse-transition="true"
					active-text-color="rgb(57, 249, 190)"
				>
					<el-submenu index="11">
						<template slot="title">
							<i class="iconfont icon-shujuzhanshi"></i>
							<span>数据展示</span>
						</template>
						<el-menu-item index="" @click="goBD('/bHome')"
							>投屏入口</el-menu-item
						>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-aside width="200px">
				<el-menu
					:default-openeds="menuOpeneds"
					:default-active="$route.path"
					:collapse-transition="false"
					class="el-menu-vertical-demo"
					unique-opened
					:router="isRouter"
					active-text-color="rgb(57, 249, 190)"
				>
					<el-menu-item
						:index="selHome()"
						v-for="item in menuList1"
						:key="item.pur_id"
					>
						<i class="iconfont icon-shouye"></i>
						<span slot="title">{{ item.purview_name }}</span>
					</el-menu-item>
					<el-submenu
						:index="item.pur_id.toString()"
						v-for="item in menuList2"
						:key="item.pur_id"
					>
						<template slot="title">
							<i :class="iconObj[item.pur_id]"></i>
							<span>{{ item.purview_name }}</span>
						</template>
						<el-menu-item
							:index="menuIndex(subItem.menu)"
							v-for="subItem in item.children"
							:key="subItem.pur_id"
							@click="saveNavState('/index/' + subItem.menu)"
						>
							<template slot="title">
								<span>{{ subItem.purview_name }}</span>
							</template>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-container>
				<el-main>
					<keep-alive>
						<router-view v-if="this.$route.meta.keepAlive"></router-view>
					</keep-alive>
					<router-view v-if="!this.$route.meta.keepAlive"></router-view>
				</el-main>
			</el-container>
		</el-container>
	</el-container>
</template>

<script>
export default {
	data() {
		var validateNewPass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'))
			} else {
				if (this.resetPassForm.checkPass !== '') {
					this.$refs.resetPassFormRef.validateField('checkNewPass')
				}
				callback()
			}
		}
		var validateCheckPass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.resetPassForm.newPass) {
				callback(new Error('两次输入密码不一致!'))
			} else {
				callback()
			}
		}
		return {
			// refresh: true, //控制整个页面刷新
			isCollapse: true,
			widthHover: '0px',
			isRouter: true,
			// 被激活导航地址
			// activePath:this.$store.state.activePath,
			changeHomedialogVisible: false,
			iconObj: {
				20: 'iconfont icon-shujuzhanshi',
				22: 'iconfont icon-shebei',
				25: 'iconfont icon-jidi',
				28: 'iconfont icon-xitong',
				36: 'iconfont icon-cebaoguanli',
				40: 'iconfont icon-huanjingjiance',
				42: 'iconfont icon-jiankong',
				44: 'iconfont icon-fangzhi',
				46: 'iconfont icon-nongchangguanli',
				48: 'iconfont icon-nongshiguanli',
				58: 'iconfont icon-suyuan',
				124: 'iconfont icon-zhuanjia',
				129: 'iconfont icon-shouhou'
			},
			homeList: [
				{
					img: require('@/assets/images/home/1.jpg'),
					name: '首页一',
					url: '/index/home'
				},
				{
					img: require('@/assets/images/home/2.jpg'),
					name: '首页二',
					url: '/index/mapView'
				},
				// {
				// 	img: require('@/assets/images/home/3.jpg'),
				// 	name: '首页三',
				// 	url: '/index/home02'
				// }
			],
			menuList1: [], //首页菜单
			menuList2: [], //出首页的其他菜单
			// 被激活导航地址
			// activePath:'',
			username: '',
			resetPassDialogVisible: false,
			resetPassForm: {
				oldPass: '',
				newPass: '',
				checkNewPass: ''
			},
			resetPassFormRules: {
				oldPass: [
					{ required: true, message: '请输入原始密码', trigger: 'blur' }
				],
				newPass: [{ validator: validateNewPass, trigger: 'blur' }],
				checkNewPass: [{ validator: validateCheckPass, trigger: 'blur' }]
			},
			menuOpeneds: []
		}
	},
	created: function () {
		// this.username = localStorage.getItem('username')
		// this.getNavList()
		// this.activePath=window.sessionStorage.getItem('activePath')
		// document.body.className = window.sessionStorage.getItem('bodyCalss')
	},
	computed: {
		activePath: function () {
			return this.$store.state.activePath
		},
		homePath: function () {
			return this.$store.state.homePath
		}
	},
	watch: {
		'$route.path': function (newVal) {
			if (
				newVal == '/index/home' ||
				newVal == '/index/home02' ||
				newVal == '/index/mapView'
			) {
				this.menuOpeneds = []
			}
		}
	},
	mounted() {
		// this.$EventBus.$on('refresh', (data) => {
		// 	console.log('bus')
		// 	this.refresh = false
		// 	this.$nextTick( ()=> {
		// 		this.refresh = true
		// 	})
		// })
		this.username = localStorage.getItem('username')
		this.getNavList()
	},
	methods: {
		dropdownHandle(command) {
			if (command == 'editPwd') {
				this.changePass()
			} else if (command == 'outSys') {
				this.outSys()
			} else {
				this.$router.push({ path: command })
			}
		},
		getNavList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=user.login.user_login_info'
			}).then((res) => {
				if (res.data.message == '') {
					let navList = res.data.data.children
					navList.forEach((item) => {
						if (item.children) {
							this.menuList2.push(item)
						} else {
							this.menuList1.push(item)
						}
					})
					let firstPage = '' //左侧菜单第一项
					if (this.menuList1.length > 0) {
						firstPage = this.menuList1[0].menu
					} else {
						firstPage = this.menuList2[0].children[0].menu
					}
					this.$EventBus.$emit('firstPage', firstPage) //第一个页面

					let userType = res.data.data.myuser_type //用户类型
					let userName = res.data.data.username //用户名
					localStorage.setItem(
						'lastEnter',
						this.formatTime(res.data.data.user_login_time * 1000)
					)
					window.sessionStorage.setItem('myuser_type', userType)
				}
			})
		},
		changeHome(index) {
			this.changeHomedialogVisible = false
			var url = this.homeList[index].url
			sessionStorage.setItem('selHome', url) //保存选择的首页路由
			this.$router.push({ path: url })
		},
		changeHomeDialogClosed(done) {
			// this.$confirm('确认关闭？')
			// .then(_ => {
			//     done();
			// })
			// .catch(_ => {});
		},
		dropdownHandle(command) {
			if (command == 'editPwd') {
				this.changePass()
			} else if (command == 'outSys') {
				this.outSys()
			} else {
				this.$router.push({ path: command })
			}
		},
		handleCommand(command) {
			// this.$message('click on item ' + command);
			document.body.className = 'custom-' + command
			window.sessionStorage.setItem('bodyCalss', 'custom-' + command)
		},
		outSys() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=user.login.logout_user'
			}).then((res) => {
				if (res.data.message == '') {
					window.localStorage.removeItem('isLogin')
					window.localStorage.removeItem('session')
					this.$router.push('/login')
					// window.sessionStorage.setItem('activePath', '/index/home')
				}
			})
		},
		changePass() {
			this.resetPassDialogVisible = true
		},
		resetPassDialogClosed() {},
		resetPassSubm() {
			this.$refs.resetPassFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=user.login.changepwd',
					data: this.qs.stringify({
						old_password: this.resetPassForm.oldPass,
						new_password: this.resetPassForm.newPass,
						confirm_password: this.resetPassForm.checkNewPass
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.$message({
							message: '密码修改成功！',
							type: 'success'
						})
						this.resetPassDialogVisible = false
					}
				})
			})
		},
		collapseFun() {
			this.isCollapse = !this.isCollapse
			return this.isCollapse
		},
		menuIndex(menu) {
			if (menu == 'bFourSituations') {
				return ''
			} else if (menu == 'equipDistribute') {
				return ''
			} else if (menu == 'bCbd') {
				return ''
			} else if (menu == 'bQxz') {
				return ''
			} else if (menu == 'bSy') {
				return ''
			} else if (menu == 'bBzy') {
				return ''
			} else {
				return '/index/' + menu
			}
		},
		//保存菜单的激活地址
		saveNavState(activePath) {
			// let path='/'+activePath.split('/')[activePath.split('/').length-1]
			let path = activePath.slice(6)
			// console.log(path)
			// console.log(activePath)
			if (activePath == '/index/bFourSituations') {
				// this.$router.replace('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/equipDistribute') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/bCbd') {
				this.BFourSituations(path) //跳转到大数据平台
				// this.$router.push('/index/home')
			} else if (activePath == '/index/bQxz') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/bSy') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/bBzy') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			}
		},
		BFourSituations(path) {
			const { href } = this.$router.resolve({
				path: path
			})
			window.open(href, '_blank')
		},
		selHome() {
			let selHome = sessionStorage.getItem('selHome')
			if (selHome) {
				return selHome
			} else {
				return '/index/home'
			}
		},
		goBD(path) {
			const { href } = this.$router.resolve({
				path: path
			})
			window.open(href, '_blank')
		}
	}
}
</script>

<style scoped lang="less">
@keyframes ringing {
	0% {
		transform: rotate(-15deg);
	}
	2% {
		transform: rotate(15deg);
	}
	12%,
	4% {
		transform: rotate(-18deg);
	}
	14%,
	6% {
		transform: rotate(18deg);
	}
	8% {
		transform: rotate(-22deg);
	}
	10% {
		transform: rotate(22deg);
	}
	16% {
		transform: rotate(-12deg);
	}
	18% {
		transform: rotate(12deg);
	}
	20% {
		transform: rotate(0);
	}
}
.el-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.navbarBtn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.messageFrame {
			width: 300px;
			.medium {
				font-size: 14px;
				margin: 1.2em 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.userInfoBtns {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			min-width: 200px;
			.iconFont {
				i {
					font-size: 26px;
					cursor: pointer;
					margin-right:10px;
				}
			}
			.item,
			.item:hover {
				animation: ringing 3s linear 5;
			}
		}
	}

	.sys-name {
		display: flex;
		font-size: 20px;
		font-weight: 600;
		align-items: center;
		line-height: 60px;
		img {
			height: 26px;
			margin-right: 10px;
			cursor: pointer;
		}
	}
}
.el-popper.newsDropdown {
	padding: 0;
	margin: 0;
	h5 {
		background: #35a478;
		color: #fff;
		padding: 15px;
		text-transform: uppercase;
		font-size: 11px;
		margin: 0;
	}
	/deep/.popper__arrow {
		border-bottom-color: #35a478;
		&::after {
			border-bottom-color: #35a478;
		}
	}
	ul {
		border: 1px solid #ddd;
		border-top: 0;
		padding: 0 10px;
		.news {
			display: block;
			margin: 0;
			float: none;
			background: none;
			padding: 5px 5px;
			border-bottom: 1px solid #eee;
			.txtContent {
				max-width: 250px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				min-width: 250px;
				// display: flex;
				a {
					color: #333;
					font-size: 12px;
					padding: 7px 10px;
					-moz-border-radius: 2px;
					-webkit-border-radius: 2px;
					border-radius: 2px;
					-moz-transition: all 0.2s ease-out 0s;
					-webkit-transition: all 0.2s ease-out 0s;
					transition: all 0.2s ease-out 0s;
				}
				a:hover {
					background: none;
					color: #428bca;
					text-decoration: none;
				}
			}
		}
	}
}
.sysAside {
	position: absolute;
	z-index: 999;
	left: 0;
	top: 60px;
	bottom: 0;
	z-index: 999;
	transition: all 0.5s;
}
.el-aside {
	// background-color: #3D4C5A;
	color: #333;
	// line-height: 200px;
	// .el-menu-item.is-active{background:#17BB89!important}
	// .el-submenu__title i{color:#fff}
	.el-menu {
		border: none;
	}
}
.changeHomeItem {
	text-align: center;
	img {
		width: 100%;
		height: 110px;
	}
	.tit {
		margin-top: 10px;
	}
}
</style>
