<template>
    <div class="header">
        <!-- 折叠按钮 -->
      
        <div class=""  style="display: flex;align-items: center">
            <i class="el-icon-s-home" style="font-size: 24px;line-height: 40px;color: #006699d1;"@click="goHome"></i>
       <img v-if="isProofreading" src="../../assets/img/Online Proofreading.png" alt="" height="24px" style="margin-left: 10px;margin-top: 4px;"/>
        </div>
       
        <div class="header-right no-select">
            <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="personcenter">Personal Center</el-dropdown-item> -->
                        <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 {
    props: ['home'],
    data() {
        return {
            localUsername: localStorage.getItem('U_name') || 'unknown user',
            isProofreading: false,
            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() {
           
            return this.localUsername ? this.localUsername : 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: {
        updateUsername() {
           
            this.localUsername = localStorage.getItem('U_name');
          
        },
        goHome() {
            this.$router.push('/');
        },
        // 用户名下拉菜单选择事件
        handleCommand(command) {
            // 个人中心
            if (command == 'personcenter') {
                this.$router.push('/percenter');
            }
            // 退出系统
            if (command == 'loginout') {
                localStorage.removeItem('U_role');
                localStorage.removeItem('U_id');
                localStorage.removeItem('U_name');
                localStorage.removeItem('U_status');
                localStorage.removeItem('ms_journal_alias');
                localStorage.removeItem('journalTypeData');
                localStorage.removeItem('journalTypeDataAll');
                localStorage.removeItem('opMedicalListData');
                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 (this.$bus) { // 检查 $bus 是否存在，避免未定义错误
            this.$bus.$on('user-name-updated', this.updateUsername);
        }
        if (document.body.clientWidth < 1000) {
            this.collapseChage();
        }
    },
    beforeDestroy() {
        // 步骤 C2: 销毁前移除监听器
        if (this.$bus) {
            this.$bus.$off('user-name-updated', this.updateUsername);
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.link_path = route.path;
                if(this.link_path.includes('OnlineProofreading')){
                    this.isProofreading=true;

                }else{
                    this.isProofreading=false;
                }
                
            },
            immediate: true
        }
    }
};
</script>
<style scoped>
.header {
    background-color: #fff;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 40px;
    padding: 0 20px;
    color: #333639;
    box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
    border-bottom:1px solid #f0f0f0;
}

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

.header .logo {
    float: left;
    padding-top: 19px;
    vertical-align: middle;
    font-size: 20px;
}

.header .logo img {
    width: 84px;
    height: 20px;
    margin-top: -4px;
    margin-right: 15px;
    padding-left: 12px;
}

.header .logo > div {
    float: left;
    height: 40px;
}

.header .logo p {
    font-size: 12px;
    text-align: center;
}

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

.header-user-con {
    display: flex;
    height: 40px;
    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: #333639;
}

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

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

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

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

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

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

#colgreen {
    color: rgb(142, 150, 74);
}
</style>
