<template>
    <header class="header">
        <el-popover style="min-width:120px;"
            ref="popover1"
            placement="top"
            width="150"
            trigger="hover">
            <list :data="list" @click="itemClick"></list>
        </el-popover>
        <div class="container text-center">
            <div class="logo" @click="goHome">
                <img src="../assets/logo-x2.png" height="60px">
            </div>
            <!--<div class="title">LOGO</div>-->
            <template v-if="user">
                <span style="vertical-align: middle">12:23:00</span>
                <div class="countdown">
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                            <!--<span class="sr-only">80% Complete (danger)</span>-->
                        </div>
                    </div>
                </div>
                <span style="vertical-align: middle;font-size:15px;">翻译倒计时</span>
            </template>

            <div class="nav" v-show="!user">
                <router-link class="btn btn-transparent" style="width:80px;margin-right:20px;" to="/login">登陆</router-link>
                <router-link class="btn btn-transparent" style="width:80px;" to="/reg">注册</router-link>
            </div>
            <div class="icons clearfix" v-show="user">
                <img class="headimg" src="../assets/headimg.png" v-popover:popover1 height="50px">
                <img class="msg" src="../assets/msg-none.png" height="50px" @click="goMessage">
            </div>
        </div>
    </header>
</template>

<script>
    import List from './List.vue';

    export default{
        components:{
            List
        },
        data(){
            return {
                scrollTop:0,
                active:0,
                loged:true,
                list:[{
                    img:require('../assets/home.png'),
                    title:'首页',
                    path:'/'
                },{
                    img:require('../assets/pcenter.png'),
                    title:'个人中心',
                    path:'/person'
                },{
                    img:require('../assets/follow.png'),
                    title:'关注',
                    path:'/follow/0'
                },{
                    img:require('../assets/msg.png'),
                    title:'私信',
                    path:'/letter/0'
                },{
                    img:require('../assets/setting.png'),
                    title:'设置',
                    path:'/setting'
                },{
                    img:require('../assets/exit.png'),
                    title:'退出',
                    path:'/'
                }]
            };
        },
        computed:{
            backgroundColor(){
                if(this.scrollTop >= 200){
                    return {
                        backgroundColor:'rgb(32,160,255)'
                    }
                }else{
                    let percent = this.scrollTop / 200;
                    return {
                        backgroundColor:`rgba(32,160,255,${percent})`
                    }
                }
            },
            user(){
                return this.$store.state.user.user;
            }
        },
        methods:{
            activeNav(idx){
                this.active = idx;
            },
            itemClick(path){
                this.$router.push(path);
            },
            goMessage(){
                this.$router.push('/message');
            },
            goHome(){
                this.$router.push('/');
            }
        },
        mounted(){
            this.scrollTop = $(document).scrollTop();
            window.onscroll = () => {
                this.scrollTop = $(document).scrollTop();
            }
        }
    }
</script>

<style scoped>
    .header{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100px;
        line-height:100px;
        z-index:50;
        background-color:#fdd32c;
    }

    .title{
        margin-left:20px;
        float:left;
        font-size:28px;
        font-weight:700;
        /*color:#fff;*/
    }

    .logo{
        display:inline-block;
        float:left;
        cursor:pointer;
    }

    .countdown{
        display:inline-block;
        width:600px;
        vertical-align: middle;
        margin:0 5px;
    }

    .countdown .progress{
        margin-bottom:0;
    }

    .nav{
        float:right;
        margin:0;
        padding:0;
    }

    .nav-item{
        float:left;
        list-style:none;
        margin-left:10px;
    }

    .header .nav-item a{
        display:block;
        padding:0 20px;
        position:relative;
        text-decoration: none;
        /*color:#fff;*/
        opacity:0.8;
        transition:all 0.3s;
    }

    .header .nav-item a:after{
        content:'';
        position:absolute;
        bottom:0;
        left:50%;
        right:50%;
        opacity: 0;
        height:0px;
        background-color:#99d2fc;
        transition:all .5s;
    }

    .header .nav-item a:hover,.header .nav-item a:focus{
        opacity:1;
        background-color:transparent;
    }

    .header .nav-item a:hover:after{
        left:0;
        right:0;
        height:5px;
        opacity:1;
    }

    .header .nav-item.active a{
        opacity:1;
    }

    .header .nav-item.active a:after{
        left:0;
        right:0;
        height:5px;
        opacity:1;
    }

    .icons{
        float:right;
        display:inline-block;
    }

    .icons img{
        /*float:right;*/
        /*margin-top:25px;*/
        cursor:pointer;
    }

    .icons .headimg{
        margin-right:20px;
    }

</style>
