<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;" @click="isTz = true">
					<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>
								<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 :key="$route.query.t" /></keep-alive>
				<div class="fontColorC" style="text-align: center;margin: 10px 0;">Copyright © {{$moment().format('YYYY')}} 广东功道云数字科技有限公司 All Rights Reserved</div>
			</el-main>
		</el-container>
		<!-- 续费升级 -->
		<el-dialog title="续费升级" :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="fontColorC" style="text-align: center;margin-top: 15px;font-size: 18px;">手机钉钉扫码，付费升级</div>
		</el-dialog>

		<div class="ydBox" v-if="showYd">
			<div class="close" @click="showYd=false" style="position: absolute;right: 20px;top: 10px;cursor: pointer;z-index: 99999;"><i class="el-icon-error" style="font-size:30px;"></i></div>
			<div class="center" style="padding: 20px 0;">
				<div v-for="(item,index) in tabs" :key="index" class="flex-box">
					<div class="flex-box-ce" :class="index==tabIndex? 'active':''" style="margin-bottom: 14px;font-size: 18px;">
						<span class="dian"></span>
						<div class="tabItem" @click="tabActive(index)">{{index+1}}-{{item.name}}</div>
					</div>
					<div v-if="index==tabIndex" class="flex-box-ce imgBox">
						<template v-if="item.image.length>1">
							<div style="position: relative;" v-for="(e,index2) in item.image" :key="index2">
								<img style="margin: 0 10px;width: 440px;border-radius: 5px;margin-top: 6px;" :src="e"/>
								<el-button v-if="masterAdministrator&&item.urls.length>0"  class="pBtn" type="primary" size="mini" @click="openHome(item.urls[index2].url)">{{item.urls[index2].name}}</el-button>
							</div>
						</template>
						<template v-else>
							<div style="position: relative;">
								<img style="margin: 0 10px;border-radius: 5px;width: 980px;margin-top: 8px;position: relative;" :src="item.image[0]" alt=""/>
								<template v-if="masterAdministrator">
									<template v-if="index==1">
										<el-button type="primary" style="position: absolute;left: 136px;bottom: 30px;" size="mini" @click="openHome(item.urls[0].url)">{{item.urls[0].name}}</el-button>
										<el-button type="primary" style="position: absolute;right: 260px;bottom: 30px;" size="mini" @click="openHome(item.urls[1].url)">{{item.urls[1].name}}</el-button>
									</template>
									<template v-if="index==5">
										<el-button type="primary" style="position: absolute;left: 50%;bottom: 20px;margin-left: -40px;" size="mini" @click="openHome(item.urls[0].url)">{{item.urls[0].name}}</el-button>
									</template>
								</template>
							</div>
						</template>
					</div>
				</div>
			</div>
		</div>
		<!-- 悬挂导航 -->
		<aside class="navigation">
		  <ul class="navigationBox">
		    <li v-for="(item,index) in navigationList" :key="index" @click="activeNavigation(item.code)" class="navigationItem">
				<el-tooltip class="item" effect="dark" :content="item.name" placement="left">
					<i :class="item.icon"></i>
				</el-tooltip>
		    </li>
		  </ul>
		</aside>
	</el-container>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import openLink from 'dingtalk-jsapi/api/biz/util/openLink';
const { send } = window.__BIRD || {};

typeof send === 'function' && send();
window.performance && window.performance.mark("FMP");
export default {
	name: 'index',
	data() {
		return {
			tutorialsvisible: false,
			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'] ,//需要缓存的组件名称列表，用逗号分隔
			tabs:[
				{name:'授权人员权限',image:[require('@/assets/image/yd1.png'),require('@/assets/image/yd1-2.png')],urls:[{name:'去授权',url:'/userSet'},{name:'去设置',url:'/userSet?name=jurisdictionSet'}]},
				{name:'考核表设置与发起',image:[require('@/assets/image/yd2.png')],urls:[{name:'去设置考核表',url:'/set'},{name:'去发起考核',url:'/sponsorAssess'}]},
				{name:'执行计划与过程管理',image:[require('@/assets/image/yd3.png'),require('@/assets/image/yd3-1.png')],urls:[]},
				{name:'收集结果数据',image:[require('@/assets/image/yd4.png')],urls:[]},
				{name:'评分',image:[require('@/assets/image/yd5.png')],urls:[]},
				{name:'看报表',image:[require('@/assets/image/yd6.png')],urls:[{name:'去看报表',url:'/statement'}]},
			],
			tabIndex:0,
			masterAdministrator:false,//主管理员
			showYd:false,
			navigationList:[
				// {name:'新手引导',icon:'el-icon-data-analysis',code:1},
			    {name:'教程',icon:'el-icon-reading',code:2},
			    {name:'客服',icon:'el-icon-service',code:3},
			],
		};
	},
	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');
			}
			this.DDconfig();
		});
	},
	methods: {
		activeNavigation(code){
			if(code==1){
				this.showYd = true;
			}else if(code==2){
				window.open('https://www.yuque.com/docs/share/d3459ec7-5c62-4ae5-b0dc-a3ff2770d462?#', '_blank');
			}else{
				let url=`https://page.dingtalk.com/wow/dingtalk/act/serviceconversation?wh_biz=tm&showmenu=false&goodsCode=DT_GOODS_881649645924368&corpId=${this.$getCache('corpId')}&token=b26816672b9a5f26022afcc5f1926d93`
				this.$dd.biz.util.openSlidePanel({
				    url:url,//页面名称
				    title: '客服群',
				    onSuccess : function() {
				        /**/
				    },
				    onFail : function(err) {}
				});
			}
		},
		tabActive(index){
			this.tabIndex=index;
		},
		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];
			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();
			this.masterAdministrator = this.$authoritys('masterAdministrator');//是否主管理员
			this.getRole=this.$getRole(1);
			if (!this.$getCache('newNav') && this.getRole) {
				this.showYd = true;
				this.$setCache('newNav', true);
			}
		},
		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') {
				this.navigationList=[
					{name:'新手引导',icon:'el-icon-data-analysis',code:1},
					{name:'教程',icon:'el-icon-reading',code:2},
					{name:'客服',icon:'el-icon-service',code:3},
				]
				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]);
		},
		openHome(url) {
			if(url){
				if(url=='/userSet?name=jurisdictionSet'){
					this.$router.push({ path: url,query:{ t: Date.now()} });
				}else{
					this.$router.push({ path: url });
				}
			}else{
				this.$router.push({ path: '/home' });
			}
		}
	}
};
</script>
<style scoped="scoped" lang="scss">
.navigation{
  position: fixed;
  right: 30px;
  bottom: 100px;
  z-index: 999;
}
.navigationBox{
  font-size: 24px;
  color: #222;
  text-align: center;
}
.navigationItem{
  padding: 6px;
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 3px #ccc;
  margin-bottom: 8px;
}
.navigationItem:hover{
  color: #005bea ;
  border: 1px solid #005bea;
}
.svgIcon {
  font-size: 20px;
  color: #99a9bf;
}
.money {
  line-height: 32px;
  text-align: center;
  height: 32px;
  color: #ff9600;
  width: 88px;
  background: #ffffff;
  border: 1px solid #ff9600;
  opacity: 1;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 20px;
}
.money2 {
  line-height: 32px;
  text-align: center;
  height: 32px;
  color: #238dfa;
  width: 120px;
  background: #ffffff;
  border: 1px solid #238dfa;
  opacity: 1;
  border-radius: 3px;
  cursor: pointer;
  margin:0 20px;
  padding-left: 10px;
}	
	
	
	
.ydBox{
	background-color: rgba(35, 141, 250, 0.3);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	// height: 400px;
	z-index: 9999;
}
.pBtn{
	position: absolute;
	bottom: 30px;
	left: 50%;
	margin-left: -30px;
}
.imgBox{
	position: absolute;
	left: 280px;
	// width: 100%;
	top: 14px;
	right: 0;
}
.imgBox button{
	font-size: 14px;
	border-radius: 25px;
}
.dian{
	width: 16px;
	height: 16px;
	background-color: #fff;
	border-radius: 50%;
}
.center{
	width: 1200px;
	margin: 0 auto;
	// background-color: #fff;
	position: relative;
}
.tabItem{
	color: #222;
	background-color: #fff;
	border-radius: 5px;
	padding: 8px 10px;
	cursor: pointer;
	margin-left: 16px;
	width: 200px;
}
.active .dian{;
// background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
	background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
}
.active .tabItem{
	background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
	color: #fff;
}
	
	
	
.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>
