<!-- 面包屑导航 -->
<template>
	<div class='mainBreadcrumb'>
		<!--<el-breadcrumb separator="/">-->
			<!--<el-breadcrumb-item v-if="authority.username !== 'root'" :to="{ path: '/home' }">首页</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="authority.username === 'root'" :to="{ path: '/adminSetting' }">首页</el-breadcrumb-item>-->

			<!--<el-breadcrumb-item v-if="currentRouter === '/taskManage' || currentRouter === '/addTask' || currentRouter === '/viewTask' || currentRouter === '/departmentTask' || currentRouter === '/taskDetails'" :to="{ path: '/taskManage' }">任务管理</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/addTask'" >新建任务</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="isDepartment === false && (currentRouter === '/viewTask' || currentRouter === '/taskDetails' || currentRouter === '/unpublishedTask')" :to="{ path: '/viewTask' }">查看任务</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="isDepartment === true && (currentRouter === '/departmentTask' || currentRouter === '/taskDetails')" :to="{ path: '/departmentTask' }">部门任务</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/unpublishedTask'" >未发布任务</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/taskDetails'" >任务详情</el-breadcrumb-item>-->

			<!--<el-breadcrumb-item v-if="currentRouter === '/personManage' || currentRouter === '/personDetails' || currentRouter === '/personInfo' || currentRouter === '/personList' || currentRouter === '/personTask'" :to="{ path: '/personManage' }">人员管理</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/personDetails'">个人信息</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/personList' || currentRouter === '/personTask'" :to="{ path: '/personList' }">人员列表</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/personInfo'">人员信息</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/personTask'">人员任务统计</el-breadcrumb-item>-->

			<!--<el-breadcrumb-item v-if="currentRouter === '/paramsSetting'">参数配置</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/consumerManage' || currentRouter === '/consumerDetails' || currentRouter === '/createConsumer'" :to="{ path: '/consumerManage' }">用户管理</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/consumerDetails'">用户详情</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/createConsumer'">新增用户</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/roleManage'" :to="{ path: '/roleManage' }">角色管理</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/authorityManage'">权限管理</el-breadcrumb-item>-->
			<!--<el-breadcrumb-item v-if="currentRouter === '/departmentManage'">部门管理</el-breadcrumb-item>-->

			<!--&lt;!&ndash;<el-breadcrumb-item>考勤管理</el-breadcrumb-item>&ndash;&gt;-->
		<!--</el-breadcrumb>-->
		<div class="menuDiv">
			<el-menu
							:unique-opened="true"
							:default-active="menuActive"
							class="el-menu-vertical-demo"
							@open="handleOpen"
							@close="handleClose"
							@select="handleSelect"
							text-color="#19152c"
							active-text-color="#5059d5">
				<el-submenu v-if="authority.username !== 'root' && authority.username !== 'HR'" index="1">
					<template slot="title">
						<img class="taskImg" src="../assets/images/taskMenuImg.png"/>
						<span>任务管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="viewTask"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'viewTask'}"></i>查看任务</el-menu-item>
						<el-menu-item v-if="showAddTask" index="addTask"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'addTask'}"></i>新建任务</el-menu-item>
						<el-menu-item v-if="showDepartment" index="departmentTask"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'departmentTask'}"></i>部门任务</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu v-if="authority.username !== 'root' && authority.username !== 'HR'" index="2">
					<template slot="title">
						<img class="personImg" src="../assets/images/personMenuImg.png"/>
						<span>人员管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="personDetails"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'personDetails'}"></i>个人信息</el-menu-item>
						<el-menu-item v-if="showListPerson" index="personList"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'personList'}"></i>人员列表</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu v-if="authority.username !== 'root' && authority.username !== 'HR'" index="3">
					<template slot="title">
						<img class="attImg" src="../assets/images/attMenuImg.png"/>
						<span>考勤管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="attendance"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'attendance'}"></i>考勤统计</el-menu-item>
						<!--<el-menu-item index="approval"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'approval'}"></i>审批管理</el-menu-item>-->
						<el-menu-item index="leaveApproval"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'leaveApproval'}"></i>请假审批</el-menu-item>
						<el-menu-item index="overtimeApproval"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'overtimeApproval'}"></i>加班审批</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<div class="rootDivs">
					<el-menu-item class="rootMenuItem" v-if="authority.username === 'root' || authority.username === 'HR'" index="consumerManage">
						<img class="consumerImg" src="../assets/images/consumerIconManage.png"/>
						<span slot="title">用户管理</span>
					</el-menu-item>
					<el-menu-item class="rootMenuItem" v-if="authority.username === 'root'" index="departmentManage">
						<img class="departmentImg" src="../assets/images/departmentIcon.png"/>
						<span slot="title">部门管理</span>
					</el-menu-item>
					<el-menu-item class="rootMenuItem" v-if="authority.username === 'root'" index="authorityManage">
						<img class="authorityImg" src="../assets/images/authorityIcon.png"/>
						<span slot="title">权限管理</span>
					</el-menu-item>
					<el-menu-item class="rootMenuItem" v-if="authority.username === 'root'" index="roleManage">
						<img class="roleImg" src="../assets/images/roleIcon.png"/>
						<span slot="title">角色管理</span>
					</el-menu-item>
					<el-menu-item class="rootMenuItem" v-if="authority.username === 'root' || authority.username === 'HR'" index="paramsSetting">
						<img class="paramsImg" src="../assets/images/paramsIcon.png"/>
						<span slot="title">参数配置</span>
					</el-menu-item>
				</div>
			</el-menu>
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "mainBreadcrumb",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				menuActive: 'viewTask',
				authority: '',
				currentRouter: '',
				isDepartment: false,
				currentPath: '',
				showAddTask: false,
				showDepartment: false,
				showListPerson: false,
			};
		},
//监听属性 类似于data概念
		computed: {
			departmentValue () {
				return this.$store.state.department;
			}
		},
//监控data中的数据变化
		watch: {
			$route(to){
				console.log(to);
				if (to.name === 'taskDetails') {
					this.menuActive = 'viewTask';
				} else if (to.name === 'unpublishedTask') {
					this.menuActive = 'viewTask';
				} else {
					this.menuActive = to.name;
				}
				this.currentRouter = JSON.parse(JSON.stringify(to.name));
			},
			departmentValue: function (newVal, oldVal) {
				console.log(newVal, oldVal)
				this.isDepartment = newVal.department;
				console.log(this.isDepartment);
			}
		},
//方法集合
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath)
				// if (this.currentRouter === 'taskDetails') {
				// 	if (this.$store.getters.getRouterCanPush.routerCanPush === true) {
				// 		this.$router.push({name: key})
				// 	} else {
				// 		this.$store.commit('changeShowDialog', {
				// 			'showDialog': true
				// 		});
				// 		return false;
				// 	}
				// 	this.menuActive = 'viewTask';
				// } else {
					this.menuActive = key;
					this.$router.push({name: key})
				// }
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			let datas = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			// console.log(datas)
			this.authority = datas;
			if (this.$route.name === 'taskDetails') {
				this.menuActive = 'viewTask';
			} else {
				this.menuActive = this.$route.name;
			}
			console.log(this.$route.name)
			this.currentRouter = JSON.parse(JSON.stringify(this.$route.name));
			if (datas.roles.length === 0) {
				this.showAddTask = false;
				this.showDepartment = false;
				this.showListPerson = false;
			} else {
				if (datas.roles.length > 0) {
					if (datas.roles[0].authorities.findIndex(item => item.name === '发布任务') > -1) {
						this.showAddTask = true;
					}
					if (datas.roles[0].authorities.findIndex(item => item.name === '查看任务') > -1) {
						this.showDepartment = true;
					}
					if (datas.roles[0].authorities.findIndex(item => item.name === '查看人员') > -1) {
						this.showListPerson = true;
					}
				}
			}
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.mainBreadcrumb{

	}

	.menuDiv{
		margin-top: 50px;
	}

	.taskImg, .personImg, .attImg{
		width: 16px;
		margin-right: 20px;
	}

	/deep/ .el-submenu {
		list-style: none;
		margin: 0;
		padding-left: 0;
		margin-right: -1px;
	}

	/deep/ .el-submenu__title {
		font-size: 18px;
		color: #303133;
		margin: 0 0 0 24px;
		height: 50px;
		line-height: 50px;
		position: relative;
		cursor: pointer;
		-webkit-transition: border-color .3s,background-color .3s,color .3s;
		transition: border-color .3s,background-color .3s,color .3s;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		white-space: nowrap;
		list-style: none;
		border-bottom-left-radius: 20px;
		border-top-left-radius: 20px;
	}

	/*/deep/ .el-menu-vertical-demo .el-menu-item, .el-submenu__title {*/
		/*height: 50px;*/
		/*line-height: 50px;*/
		/*position: relative;*/
		/*-webkit-box-sizing: border-box;*/
		/*white-space: nowrap;*/
		/*list-style: none;*/
	/*}*/

	/deep/ .el-menu-item-group__title {
		padding: 0 0;
		line-height: normal;
		font-size: 14px;
		color: #909399;
	}

	/deep/ .el-menu-vertical-demo .is-opened .el-submenu__title{
		background-image: url("../assets/images/menuTitleBg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #FFF !important;
		font-size: 18px;
	}

	.el-menu-vertical-demo .is-opened .taskImg {
		content: url("../assets/images/taskMenuImgHover.png");
	}
	.el-menu-vertical-demo .is-opened .personImg {
		content: url("../assets/images/personMenuImgHover.png");
	}
	.el-menu-vertical-demo .is-opened .attImg {
		content: url("../assets/images/attMenuImgHover.png");
	}
	/deep/ .el-menu-vertical-demo .is-opened .el-submenu__icon-arrow {
		color: #FFF !important;
	}

	/deep/ .el-submenu__title:hover {
		background-image: url("../assets/images/menuTitleBg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #FFF !important;
	}

	/deep/ .el-submenu__title:hover .el-submenu__icon-arrow {
		color: #FFF !important;
	}

	.el-submenu__title:hover .taskImg {
		content: url("../assets/images/taskMenuImgHover.png");
	}
	.el-submenu__title:hover .personImg {
		content: url("../assets/images/personMenuImgHover.png");
	}
	.el-submenu__title:hover .attImg {
		content: url("../assets/images/attMenuImgHover.png");
	}

	/deep/ .el-submenu__title i {
		color: #5059d5;
	}

	/deep/ .el-submenu .el-menu-item {
		height: 40px;
		line-height: 40px;
		padding: 0 40px;
		min-width: 200px;
		font-size: 18px;
	}

	.iBlockBg{
		width: 4px;
		height: 12px;
		margin-bottom: 3px;
		display: inline-block;
		margin-right: 10px;
		margin-left: 35px;
	}
	.iBlockBgActive{
		width: 4px;
		height: 12px;
		margin-bottom: 3px;
		display: inline-block;
		background: #5059D5;
		margin-right: 10px;
		margin-left: 35px;
	}

	/deep/ .el-menu-item:focus, .el-menu-item:hover {
		outline: 0;
		background-color: transparent;
		color: #5059D5 !important;
	}

	.menuDiv .root >>> .el-menu-item {
		font-size: 18px !important;
		color: #909399;
		padding: 0 20px;
		cursor: pointer;
		-webkit-transition: border-color .3s,background-color .3s,color .3s;
		transition: border-color .3s,background-color .3s,color .3s;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin-left: 20px;
	}

	/deep/ .el-menu-vertical-demo .is-active .el-submenu__title{
		color: #5059D5 !important;
	}
	/deep/ .el-menu-vertical-demo .is-active:hover .el-submenu__title{
		color: #FFF !important;
	}

	/deep/ .el-menu-vertical-demo .is-active.is-opened .el-submenu__title {
		color: #FFF !important;
	}

	.rootDivs  .rootMenuItem:hover {
		outline: 0;
		background-image: url('../assets/images/menuTitleBg.png') !important;
		background-repeat: no-repeat !important;
		background-size: 100% 100% !important;
		color: #FFF !important;
		font-size: 18px;
	}

	.paramsImg,.roleImg,.departmentImg,.consumerImg,.authorityImg{
		margin-right: 10px;
		width: 17px;
	}

	.rootMenuItem:hover .paramsImg {
		content: url("../assets/images/paramsIconHover.png");
	}
	.rootMenuItem:hover .roleImg {
		content: url("../assets/images/roleIconHover.png");
	}
	.rootMenuItem:hover .departmentImg {
		content: url("../assets/images/departmentIconHover.png");
	}
	.rootMenuItem:hover .consumerImg {
		content: url("../assets/images/consumerIconManageHover.png");
	}
	.rootMenuItem:hover .authorityImg {
		content: url("../assets/images/authorityIconHover.png");
	}

	.rootMenuItem.is-active .paramsImg {
		content: url("../assets/images/paramsIconHover.png");
	}
	.rootMenuItem.is-active .roleImg {
		content: url("../assets/images/roleIconHover.png");
	}
	.rootMenuItem.is-active .departmentImg {
		content: url("../assets/images/departmentIconHover.png");
	}
	.rootMenuItem.is-active .consumerImg {
		content: url("../assets/images/consumerIconManageHover.png");
	}
	.rootMenuItem.is-active .authorityImg {
		content: url("../assets/images/authorityIconHover.png");
	}

	/deep/ .rootDivs .is-active{
		background-image: url('../assets/images/menuTitleBg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #FFF !important;
		font-size: 18px;
	}

	.rootMenuItem{
		margin-left: 20px;
		font-size: 18px;
		height: 60px;
		line-height: 60px;
		margin-bottom: 15px;
		margin-right: -1px;
	}
</style>
