<template>
	<el-container class="container-all">
		<el-header class="el-header flex-box-ce">
			<div class="logo-box flex-box flex-center-center" @click="openHome()">
				<img src="@/assets/image/logo.png" class="logo" />
				<div>功道云绩效</div>
			</div>
			<div class="flex-1 flex-box-ce" style="padding: 0 20px;">
				<div class="flex-1">{{userInfo.site.name}}</div>
				<div class="flex-box-ce megData" style="cursor: pointer;">
				  <div>{{userInfo.site.user_count_max}}用户</div>
				  <div >剩余{{returnT(userInfo.site.expire_time)}}天</div>
				</div>
				<el-button size="small" @click="isTz = true" class="upgrade" type="primary" icon="el-icon-upload">续费升级</el-button>
				<div class="flex-box flex-center-center PCtutorials" v-if="getRole" @click="strategys">
					<svg-icon icon-class="PCtutorial" style="margin-right: 10px;position: relative;top: 0px;font-size: 18px;" />
					<span>新手引导</span>
				</div>
				<div style="margin-left: 20px;border: 2px solid #fff;border-radius: 50%;width: 44px;height: 44px;">
					<userImage :user_name="userInfo.name" :img_url="userInfo.img_url" width="44px" height="44px"></userImage>
				</div>
			</div>
		</el-header>

		<el-container>
			<el-aside>
				<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :router="true" @select="activeRouter" :unique-opened="true">
					<template v-for="(item, index) in routers">
						<el-menu-item :index="returnIndex(index, index)" :route="item.path" :ref="item.path" :key="index">
							<div class="flex-box-ce">
								<i :class="item.icon" class="iconfont"></i>
								<!-- <svg-icon :icon-class="item.icon" class="svgIcon"></svg-icon> -->
								<span slot="title" style="margin-left: 5px;">{{ item.label }}</span>
							</div>
						</el-menu-item>
					</template>
				</el-menu>
			</el-aside>
			<el-main>
				<keep-alive :include="keepAliveView"><router-view /></keep-alive>
				<div class="fontColorF" style="text-align: center;margin: 10px 0;">Copyright © 2022 广东功道云数字科技有限公司 All Rights Reserved</div>
			</el-main>
		</el-container>
		<!-- 续费升级 -->
		<el-dialog class="续费升级" :visible.sync="isTz" width="400px">
			<div style="border-radius: 15px;border: 1px solid #f1f1f1;padding: 10px; width: 276px;box-sizing: border-box;margin: 0 auto;">
				<img src="@/assets/image/code.png"/>
			</div>
			<div class="fontColorF" style="text-align: center;margin-top: 15px;font-size: 18px;">手机钉钉扫码，付费升级</div>
		</el-dialog>
		<el-dialog :visible.sync="usingTheStrategy" width="680px" :before-close="navDialog" :close-on-click-modal="false">
			<div>
				<img style="width: 100%;" :src="navList[navNew].image" alt="" />
				<div class="flex-box flex-d-center">
					<el-button @click="navPath(navList[navNew].paths)" type="primary" plain>{{ navList[navNew].name }}</el-button>
					<div>
						<el-button v-if="navNew > 0" @click="navNew--">上一页</el-button>
						<el-button v-if="navNew < 3" @click="navNew++" type="primary">下一页</el-button>
						<el-button v-if="navNew == 3" type="primary" @click="usingTheStrategy = false">开始使用</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
	</el-container>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
export default {
	name: 'index',
	data() {
		return {
			usingTheStrategy: false,
			tutorialsvisible: false,
			navList: [
				{ name: '去"新建考核表"', image: require('@/assets/image/nav_jx_1.jpg'), paths: 'evaluate' },
				{ name: '去"发起考核"', image: require('@/assets/image/nav_jx_2.jpg'), paths: 'sponsorAssess' },
				{ name: '看"考核管理"', image: require('@/assets/image/nav_jx_3.jpg'), paths: 'assessManagement' },
				{ name: '看"绩效报表"', image: require('@/assets/image/nav_jx_4.jpg'), paths: 'statement' }
			],
			navNew: 0,
			isTz:false,
			activeIndex: '0-0',
			routers: [],
			userInfo: this.$getUserData(),
			url: '',
			getRole: this.$getRole(1),
			keepAliveView: ['home', 'management', 'score', 'assessManagement', 'assessDetails', 'statement', 'set'], //需要缓存的组件名称列表，用逗号分隔
			keepAliveView2: ['home', 'management', 'score', 'assessManagement', 'assessDetails', 'statement', 'set'], //需要缓存的组件名称列表，用逗号分隔
		};
	},
	watch: {
		$route(to, form) {
			// 缓存页面，达到缓存页面条件的效果
			if (to.name == 'home' && form.name == 'assessManagement') {
				//首页
				this.returnArr('home');
			} else if (to.name == 'management' && form.name == 'home') {
				//我管理的-更多
				this.returnArr('management');
			} else if (to.name == 'score' && form.name == 'home') {
				//我评分的-更多
				this.returnArr('score');
			} else if (to.name == 'assessManagement' && form.name == 'myPerformance') {
				//考核管理
				this.returnArr('assessManagement'); 
			} else if (to.name == 'assessDetails' && form.name == 'assessManagement') {
				//考核管理2
				this.returnArr('assessDetails');
			} else if (to.name == 'assessDetails' && form.name == 'sponsorAssess') {
				//发起考核进入-考核管理
				this.returnArr('assessDetails');
			} else if (to.name == 'statement' && form.name == 'myPerformance') {
				//绩效报表
				this.returnArr('statement');
			} else if (to.name == 'assessDetails' && form.name == 'statement') {
				//绩效报表进入考核管理
				this.returnArr('assessDetails');	
			} else if (to.name == 'set' && form.name == 'statement') {
				//设置
				this.returnArr('set');
			} else {
				this.keepAliveView = JSON.parse(JSON.stringify(this.keepAliveView2));
			}
			var str = to.path;
			this.routers.map((item, index) => {
				if (item.path == str) {
					this.activeIndex = index + '-' + index;
					this.$setCache('activeIndex', index + '-' + index);
				}
			});
		}
	},
	created() {
		this.login();
	},
	mounted() {
		this.$nextTick(() => {
			if (this.$getCache('activeIndex')) {
				this.activeIndex = this.$getCache('activeIndex');
			}
			if (!this.$getCache('newNav') && this.getRole) {
				this.usingTheStrategy = true;
				this.$setCache('newNav', true);
			}
			this.DDconfig();
		});
	},
	methods: {
		returnT(date){
			var timestamp = parseInt(new Date().getTime()/1000);
			return parseInt((date-timestamp)/86400)
		},
		DDconfig(){
			console.log("开始鉴权")
			let str=location.href
			str=str.split('#')[0]
			var that =this;//为解决this作用域问题，将其在函数内赋值给that变量
			this.$axios('get','api/ding/jsapi/ticket',{
				url:str
			}).then((res) => {
				let data=res.data.data
				//1、鉴权
				this.$dd.config({
					agentId:data.agentId,
					corpId: data.corpId, //必填，企业ID
					timeStamp: data.timeStamp, // 必填，生成签名的时间戳
					nonceStr: data.nonceStr, // 必填，生成签名的随机串
					signature: data.signature, // 必填，签名
					jsApiList : [
						'biz.cspace.preview',
						'biz.util.uploadAttachment',
						'runtime.info',
						'biz.ding.create',
						'biz.contact.choose',
						'device.notification.confirm',
						'device.notification.alert',
						'device.notification.prompt',
						'biz.ding.post',
						'biz.util.openLink',
					] // 必填，需要使用的jsapi列表，注意：不要带dd。
				});
				
				if(this.$getCache('url')){
						let url=this.$getCache('url')
						this.$removeCache('url')
						console.log(decodeURIComponent(url))
						if(decodeURIComponent(url)=='/'){
							return false
						}
						setTimeout(() => {
							this.$router.push({ path: '/' + decodeURIComponent(url) });
						}, 200);
				}
				this.$dd.error(function(err) { //验证失败  
					console.log('dd error: ' + JSON.stringify(err));
				})
			})	
		},
		getEmployeeList() {
			// 部门列表
			this.$axios('get', '/api/per/user/department').then(res => {
				var list = res.data.data.dept_tree;
				this.$setDeptTree(res.data.data)
			});
			//获取绩效人员列表（包含已被删除的人员）
			this.$axios('get', '/api/per/user/employee_list',{page_size:0,page:0}).then(res => {
				if (res.data.code == 1) {
					var list = res.data.data.list;
					const data = {};
					for (const i in list) {
						if (list[i].is_scope === 0||list[i].is_official ===0) {
							list[i].name = list[i].name + '(未启用)';
						}
						data[list[i].id] = list[i];
					}
					this.$setEmployeeList(data);
				}
			});
		},
		login() {
			this.setRouters();
			this.getEmployeeList();
		},
		setRouters() {
			// 刚进入来清除一些缓存
			this.$removeCache(['isVariationJx', 'assessDetails', 'cache_s_m', 'indexSet', 'staffAssDet']);
			let main = this.userInfo.permission_info.main;
			let per_role = this.userInfo.permission_info.per_role; //用户的身份
			let childrenRouter = [];
			this.$router.options.routes.some((item, i) => {
				if (item.name == 'index') {
					childrenRouter = item.children.filter(e => {
						if (e.meta) {
							return e;
						}
					});
					return true;
				}
			});
			if (per_role == 'manager') {
				if (main == 1) {
					//主管理员
					this.setRole('masterAdministrator');
					this.routers = childrenRouter;
				} else {
					//子管理员
					this.setRole('childAdministrator');
					this.routers = this.getChildRouter(childrenRouter, 'childAdministrator');
				}
			} else {
				//员工||创始人||部门管理员
				// if (this.isCreator) {
				// 	this.setRole('creator');
				// 	this.routers = this.getChildRouter(childrenRouter, 'creator');
				// } else
				 if (this.userInfo.manage_dept_list.length > 0) {
					this.setRole('deptManager');
					this.routers = this.getChildRouter(childrenRouter, 'deptManager');
				} else {
					this.setRole('employee');
					this.routers = this.getChildRouter(childrenRouter, 'employee');
				}
			}
		},
		setRole(str) {
			this.$setCache('role', str);
		},
		//获取路
		getChildRouter(routerChildren, str) {
			let permission = this.userInfo.permission_info.permission; //用户的权限
			let routers = {}; //过滤后的路由,顺便去重
			routerChildren.forEach(item => {
				let role = item.meta.role;
				let jurisdiction = item.meta.jurisdiction;
				if (item.meta) {
					//当没设置meta时不显示在导航栏上
					if (role.indexOf(str) >= 0) {
						if (str == 'employee' || str == 'creator' || str == 'deptManager') {
							//当是员工||创始人||部门主管时，不需要验证权限
							routers[item.name] = item;
							return;
						}
						if (item.name == 'statement' && this.userInfo.manage_dept_list.length > 0) {
							//当登录人是7.0部门管理者时写死显示绩效报表
							routers[item.name] = item;
							return;
						}
						permission.forEach(roleItem => {
							if (jurisdiction) {
								if (jurisdiction.indexOf(roleItem.id) >= 0) {
									routers[item.name] = item;
								}
							}
						});
					}
				}
			});
			let routersArr = [];
			for (let s in routers) {
				routersArr.push(routers[s]);
			}
			return routersArr;
		},

		returnArr(str) {
			this.keepAliveView = this.keepAliveView.filter(item => {
				return item != str;
			});
			setTimeout(() => {
				this.keepAliveView = JSON.parse(JSON.stringify(this.keepAliveView2));
			}, 1000);
		},
		returnIndex(str, str2) {
			return str + '-' + str2;
		},
		//当刷新页面是控制左边导航栏的选中
		activeRouter(index, indexPath) {
			this.$setCache('setUrlName', null); //清空set页面的保存展示页面
			this.$setCache('activeIndex', indexPath[1] ? indexPath[1] : indexPath[0]);
		},
		navPath(paths) {
			this.usingTheStrategy = false;
			this.$router.push({ name: paths });
		},
		strategys() {
			this.usingTheStrategy = true;
			this.tutorialsvisible = false;
		},
		navDialog(done) {
			done();
			this.tutorialsvisible = true;
		},
		openHome() {
			this.$router.push({ path: '/home' });
		}
	}
};
</script>
<style scoped="scoped" lang="scss">
	.upgrade {
		margin-left: 10px;
		margin-right: 10px;
	}
.megData div:nth-child(1) {
  background-image: linear-gradient(to bottom, #5e6e9b 0%, #232d48 100%);
  text-align: center;
  color: #e1bf66;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  line-height: 35px;
  height: 35px;
  padding: 0 10px;
}
.megData div:nth-child(2) {
  background-image: linear-gradient(to bottom, #ffeab2 0%, #e1bf66 100%);
  text-align: center;
  color: #232d48;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  line-height: 35px;
  height: 35px;
  padding: 0 10px;
}
.svgIcon {
	font-size: 20px;
	color: #99a9bf;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 180px;
}
.el-header {
	background-color: #fff;
	padding: 0 !important;
	border-bottom: 1px solid #f1f1f1;
	position: relative;
	box-sizing: border-box;
	height: 60px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 180px;
}
.el-menu {
	overflow: hidden;
	border: none;
}
.el-aside {
	transition: width 0.28s;
	width: 180px !important;
	background-color: #fff;
	height: calc(100vh - 60px);
}
.el-aside::-webkit-scrollbar {
	width: 0px;
	background-color: #fff;
}

.el-aside::-webkit-scrollbar-thumb {
	background-color: #ccc;
}
.container-all {
	background-color: #f4f6f9;
	height: 100%;
	overflow: hidden;
}
.el-main {
	height: calc(100vh - 60px);
	overflow-y: scroll;
	padding: 10px;
	min-width: 900px;
}
.logo-box {
	max-width: 400px;
	min-width: 180px;
}
.logo-box .logo {
	width: 30px;
	height: 30px;
	margin-right: 5px;
	border-radius: 6px;
}
.logo-box div {
	font-size: 16px;
	font-weight: 600;
}
.wn {
	height: 26px;
	width: 26px;
	margin-right: 12px;
	cursor: pointer;
}
.hea-right {
	padding: 0 20px;
}
.upgrade {
	margin-left: 10px;
	margin-right: 10px;
}

.PCtutorials {
	width: 100px;
	color: #238dfa;
	cursor: pointer;
	border-radius: 3px;
	text-align: center;
	box-shadow: 1px 1px 0px 0px #ccc;
	height: 35px;
	line-height: 35px;
	font-weight: 500;
	text-align: center;
	border: 2px solid #238dfa;
}
</style>

<style>
/* 解决table fixed 错位问题 */
.el-table td.is-hidden > * {
	visibility: inherit;
}

.popover {
	padding: 10px !important;
	text-align: center;
}
.primaryBtn {
	color: #409eff;
	border: 1px solid #409eff;
	background-color: #fff;
}
.primaryBtn:hover {
	background-color: #ecf5ff !important;
}
.dangerBtn {
	color: #f56c6c;
	border: 1px solid #f56c6c;
	background-color: #fff;
}
.dangerBtn:hover {
	color: #f56c6c !important;
	border: 1px solid #f56c6c !important;
	background-color: #fef0f0 !important;
}
</style>
