<template>
  <div class="header" v-if="saveLogoStatus.session && this.$route.path!='/' && this.$route.path!='/verification' && this.$route.path!='/share'">
    <div class="nav">
        <div class="left">
                <img :src="saveLogoStatus.avatar" alt="" class="left-img">
                <p class="left-text">{{saveLogoStatus.username}}</p>
                <img class="left-ext"  @click="extend()" src="../assets/tui.png" alt="">
        </div>
        <div class="right">
            <img class="left-ext" @click="sx()" src="../assets/shuaxin.png" alt="">
            <img class="left-ext" @click="kefu()" src="../assets/kefu.png" alt="" v-if="this.$route.path=='/home'">
            <img class="left-ext" @click="home()" src="../assets/home.png" alt="" v-else>
            <img class="left-ext" @click="share()" src="../assets/fenxiang.png" alt="">
        </div>
    </div>
    <van-popup v-model="extendStatus" class="tuichu-pop">
        <div class="title">是否要退出当前账号</div>
        <div class="btn-box">
            <p class="btn-quxiao" @click="extendQuxiao">取消</p>
            <p class="btn-queding" @click="extendOk">确定</p>
        </div>
    </van-popup>
    <van-popup v-model="kefuStatus" class="kefu-pop">
        <div class="title">客服请联系</div>
        <p class="tell">{{saveLogoStatus.configs.kefu_contact}}</p>
        <p class="btn" @click="kefuOk">确定</p>
    </van-popup>
  </div>
</template>

<script>
export default {
    name: "Header",
    inject:['reload'],
    props: {
        msg: String,
    },
    data(){
        return{
            saveLogoStatus:{},
            kefuStatus:false,
            extendStatus:false,

        }
    },
    computed: {
    },
    watch: {
        $route() {
            this.saveLogoStatus = localStorage.getItem("userinfo") ? JSON.parse(localStorage.getItem("userinfo")) : {}
        }
    },
    mounted(){
        this.saveLogoStatus = localStorage.getItem("userinfo") ? JSON.parse(localStorage.getItem("userinfo")) : {}
    },
    methods: {
        sx(){
            this.reload();
        },
        kefu(){
            this.kefuStatus = true
        },
        home(){
            this.$router.push({
                path:'/home',
                // query: {id:'1'}
            })
        },
        extend(){
            this.extendStatus = true
        },
        extendQuxiao(){
             this.extendStatus = false
        },
        extendOk(){
            localStorage.removeItem('userinfo')
            this.$router.push({
                path:'/',
                // query: {id:'1'}
            })
            this.extendStatus = false
        },
        share(){
            this.$router.push({
                path:'/share',
                // query: {id:'1'}
            })
        },
        kefuOk(){
            this.kefuStatus = false
        },
    }  

};
</script>
<style scoped>
    >>>.van-nav-bar__content{
        height: 66px !important;
        /* padding-bottom: 10px; */
    }
</style>
<style scoped lang="scss">

    .header{
        width: 750px;
        position: relative;
        z-index: 99;
        height: 88px;
        // padding-bottom: 14px;
        background-color: #fff;
        .nav {
            padding: 14px 30px;
            position: relative;
            z-index: 1;
            line-height: 60px;
            text-align: center;
            -webkit-user-select: none;
            user-select: none;
            display: flex;
            justify-content: space-between;
            .left {
                display: flex;
                flex-direction: row;
            }
            .right {
                display: flex;
                flex-direction: row;
            }
        }
        .left-img{
            width: 60px;
            height: 60px;
            background: #A4A4A4;
            border-radius: 50%;
        }
        .left-text{
            text-align: left;
            margin: 0 0 0 10px;
            max-width: 201px;
            height: 60px;
            line-height: 60px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            font-size: 30px;
            font-weight: 500;
            color: #000000;
            user-select: none;
        }
        .left-ext{
            width: 60px;
            height: 60px;
            margin-left: 10px;
        }
        .kefu-pop{
            width: 600px;
            height: 400px;
            background: #FFFFFF;
            border-radius: 70px;
            text-align: center;
            .title{
                margin-top: 99px;
                font-size: 40px;
                font-weight: 800;
                color: #000000;
            }
            .tell{
                font-size: 30px;
                color: #000000;
            }
            .btn{
                width: 220px;
                height: 100px;
                background: #000000;
                margin: 0 auto;
                border-radius: 50px;
                text-align: center;
                font-size: 36px;
                font-weight: 800;
                color: #FFFFFF;
                line-height: 100px;
            }
        }
        .tuichu-pop{
            width: 600px;
            height: 400px;
            background: #FFFFFF;
            border-radius: 70px;
            text-align: center;
            .title{
                margin-top: 99px;
                font-size: 40px;
                font-weight: 800;
                color: #000000;
            }
            .btn-box{
                margin-top: 102px;
                display: flex;
                justify-content: center;
                flex-direction: row;
                .btn-quxiao{
                    width: 220px;
                    height: 100px;
                    background: #000000;
                    margin: 0;
                    border-radius: 50px;
                    text-align: center;
                    font-size: 36px;
                    font-weight: 800;
                    color: #FFFFFF;
                    line-height: 100px;
                    letter-spacing: 3px;
                }
                .btn-queding{
                    width: 220px;
                    height: 100px;
                    background: #000000;
                    margin: 0 0 0 20px;
                    border-radius: 50px;
                    text-align: center;
                    font-size: 36px;
                    font-weight: 800;
                    color: #FFFFFF;
                    line-height: 100px;
                    letter-spacing: 3px;
                }
            }
            
        }
    }

</style>
