<template>
	<div class="header">
		<!-- 折叠按钮 -->
		<div class="collapse-btn" @click="collapseChage">
			<i v-if="!collapse" class="el-icon-s-fold"></i>
			<i v-else class="el-icon-s-unfold"></i>
		</div>
		<div class="logo">
			<img src="../../assets/img/logo.png" />
			{{ $t('system.title') }}
		</div>
		<div class="xq_time" v-if="this.user_id==24||this.user_id==25">
			本刊为预警期刊，责令限期整改 时间{{daojishi}} 倒计时: {{day}}天 {{hour}}:{{min}}:{{second}}
		</div>
		<div class="header-right">
			<div class="header-user-con">
				<div class="changelang">
					<el-dropdown trigger="click" @command="chengelang">
						<span class="el-dropdown-link">
							language
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="en">english</el-dropdown-item>
							<el-dropdown-item command="zh">中文简体</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<!-- 全屏显示 -->
				<div class="btn-fullscreen" @click="handleFullScreen">
					<el-tooltip effect="dark" :content="fullscreen ? $t('system.noscreen') : $t('system.screen')" placement="bottom">
						<i class="el-icon-rank"></i>
					</el-tooltip>
				</div>
				<!-- 消息中心 -->


				<!-- 身份切换 -->
	<!-- 			<span style="font-size: 14px;margin-right: 8px;" v-if="this.user_cap.includes('author')">View as :</span>
				<el-dropdown class="link_role" trigger="click" v-if="this.user_cap.includes('author')">
					<span style="color: #fff;cursor: pointer;">
						Author<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu :default-active="onRoutes" router slot="dropdown" style="cursor: pointer;">
						<router-link :to="{path:'/dashboard'}">
							<el-dropdown-item>Author</el-dropdown-item>
						</router-link>
						<router-link :to="{path:'/managing'}" v-if="this.user_cap.includes('chief')">
							<el-dropdown-item>Editor-in-Chief</el-dropdown-item>
						</router-link>
						<router-link :to="{path:'/editorial'}" v-if="this.user_cap.includes(',board')">
							<el-dropdown-item>Editorial board member</el-dropdown-item>
						</router-link>
						<router-link :to="{path:'/peerewer'}" v-if="this.user_cap.includes('reviewer')">
							<el-dropdown-item>Reviewer</el-dropdown-item>
						</router-link>
						<router-link :to="{path:'/youthed'}" v-if="this.user_cap.includes('yboard')">
							<el-dropdown-item>Young scientist member</el-dropdown-item>
						</router-link>
					</el-dropdown-menu>
				</el-dropdown> -->


				<!-- 用户头像 -->
				<div class="user-avator" @click="skip_link()" v-if="hasorcie">
					<el-tooltip class="item" effect="light" content="Link to Orcid" placement="bottom-end">
						<img src="../../assets/img/orcid.png" />
					</el-tooltip>
				</div>
				<div class="user-avator" @click="skip_check()" v-else>
					<el-tooltip class="item" effect="light" content="Connect to ORCID" placement="bottom-end">
						<img src="../../assets/img/orcno.png" />
					</el-tooltip>
				</div>
				<!-- 用户名下拉菜单 -->
				<el-dropdown class="user-name" trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
						{{ username }}
						<i class="el-icon-caret-bottom"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item divided command="loginout">{{ $t('system.loyout') }}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>
<script>
	import bus from '../common/bus';
	export default {
		data() {
			return {
				collapse: false,
				fullscreen: false,
				name: 'unknown user',
				message: 2,
				hasorcie: false,
				link_path: '',
				user_id: localStorage.getItem('U_id'),
				user_cap: localStorage.getItem('U_role'),
				orcid: '',
				orcidLink: 'https://orcid.org/oauth/authorize?client_id=APP-PKF0BGRP6DWM6FUB&response_type=code&scope=/authenticate&redirect_uri=https://submission.tmrjournals.com/orcidBind',
				langArr: [{
						value: 'zh',
						label: '中文'
					},
					{
						value: 'en',
						label: 'English'
					}
				],
				curStartTime: '2019-07-31 08:00:00',
				daojishi: '',
				day: '0',
				hour: '00',
				min: '00',
				second: '00',
			};
		},
		created() {
			this.initORCID();
			if (this.user_id == 24) {
				this.daojishi = '2021.9.3 - 2021.9.30'
				this.curStartTime = '2021-10-01 00:00:00'
				this.countTime();
			}
			if (this.user_id == 25) {
				this.daojishi = '2021.9.6 - 2021.12.31'
				this.curStartTime = '2022-01-01 00:00:00'
				this.countTime();
			}
		},
		computed: {
			username() {
				let username = localStorage.getItem('U_name');
				return username ? username : this.name;
			},
			onRoutes() {
				0
				return this.$route.path.replace('/', '');
			},
			userrole() {
				let userrole = localStorage.getItem('U_status');
				if (userrole == 1) {
					return this.$t('total.author');
				} else if (userrole == 2) {
					return this.$t('total.editor');
				} else if (userrole == 'admin') {
					return this.$t('total.admin');
				} else {
					return this.$t('total.reviewers');
				}
			}
		},
		methods: {
			// 用户名下拉菜单选择事件
			handleCommand(command) {
				if (command == 'loginout') {
					localStorage.removeItem('U_role');
					localStorage.removeItem('U_id');
					localStorage.removeItem('U_name');
					localStorage.removeItem('U_status');
					localStorage.removeItem('journal_id');
					localStorage.removeItem('journal_title');
					this.$router.push('/login');
				}
			},
			// 侧边栏折叠
			collapseChage() {
				this.collapse = !this.collapse;
				bus.$emit('collapse', this.collapse);
			},
			//判断orcid
			initORCID() {
				this.$api
					.post('api/user/checkOrcid', {
						account: localStorage.getItem('U_name')
					})
					.then((res) => {
						this.hasorcie = res.userinfo.orcid == '' ? false : true;
						this.orcid = res.userinfo.orcid;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			// 全屏事件
			handleFullScreen() {
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
						// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
			},
			//切换语言
			chengelang(commond) {
				localStorage.setItem('langs', commond);
				this.$router.go(0);
			},
			skip_link() {
				location.href = 'https://orcid.org/' + this.orcid;
			},
			skip_check() {
				location.href = this.orcidLink;
			},


			// 倒计时
			countTime() {
				// 获取当前时间
				let date = new Date()
				let now = date.getTime()
				// 设置截止时间
				let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
				let end = endDate.getTime()
				// 时间差
				let leftTime = end - now
				// 定义变量 d,h,m,s保存倒计时的时间
				if (leftTime >= 0) {
					// 天
					this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
					// 时
					let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
					this.hour = h < 10 ? '0' + h : h
					// 分
					let m = Math.floor(leftTime / 1000 / 60 % 60)
					this.min = m < 10 ? '0' + m : m
					// 秒
					let s = Math.floor(leftTime / 1000 % 60)
					this.second = s < 10 ? '0' + s : s
				} else {
					this.day = 0
					this.hour = '00'
					this.min = '00'
					this.second = '00'
				}
				// 等于0的时候不调用
				if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
					return
				} else {
					// 递归每秒调用countTime方法，显示动态时间效果,
					setTimeout(this.countTime, 1000)
				}
			},
		},
		mounted() {
			if (document.body.clientWidth < 1000) {
				this.collapseChage();
			}
		},
		watch: {
			$route: {
				handler: function(route) {
					this.link_path = route.path
				},
				immediate: true
			}
		}
	};
</script>
<style scoped>
	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 70px;
		font-size: 22px;
		color: #fff;
	}

	.collapse-btn {
		float: left;
		padding: 0 21px;
		cursor: pointer;
		line-height: 70px;
	}

	.header .logo {
		float: left;
		width: 350px;
		vertical-align: middle;
		line-height: 70px;
	}

	.header .logo img {
		width: 90px;
		height: 25px;
		vertical-align: middle;
	}

	.header-right {
		float: right;
		padding-right: 50px;
	}

	.header-user-con {
		display: flex;
		height: 70px;
		align-items: center;
	}

	.btn-fullscreen {
		transform: rotate(45deg);
		margin-right: 5px;
		font-size: 24px;
	}

	.changelang {
		position: relative;
		width: 90px;
		height: 30px;
	}

	.btn-fullscreen {
		position: relative;
		width: 30px;
		height: 30px;
		text-align: center;
		border-radius: 15px;
		cursor: pointer;
	}

	.btn-bell-badge {
		position: absolute;
		right: 0;
		top: -2px;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #f56c6c;
		color: #fff;
	}

	.btn-bell .el-icon-bell {
		color: #fff;
	}

	.user-name {
		margin-left: 10px;
	}

	.user-avator {
		margin-left: 20px;
	}

	.user-avator img {
		display: block;
		width: 20px;
		height: 20px;
	}

	.el-dropdown-link {
		color: #fff;
		cursor: pointer;
	}

	.el-dropdown-menu__item {
		text-align: center;
	}

	#colgreen {
		color: rgb(142, 150, 74);
	}

	.xq_time {
		float: left;
		line-height: 70px;
		vertical-align: middle;
		color: #ff200d;
		margin-left: 20px;
		font-size: 20px;
	}
</style>
