<template>
    <div class="header-nav">
        <div class="head-box">
            <div class="head flexacenter">
                <div class="left">
                    <slot name="operate"></slot>
                    <div class="head-title">
                        <slot name="header-title"></slot>
                    </div>
                </div>

                <div class="right flexacenter">
                    <search-box slot="search" :hot-searchkeywords="hotSearchkeywords" :issearch="issearch"></search-box>

                    <div class="head-more flexcenter" @click="headMorePopState = !headMorePopState">
                        <div class="red-dot" v-if="userInfo && userInfo.messagenum"></div>
                        <svg-icon icon-class="threeAcross" class-name="head-more-icon"></svg-icon>
                    </div>
                </div>

                <div class="head-arrows" :class="{animation: headMorePopState}" v-if="headMorePopState"></div>
                <div class="head-more-pop" :class="{animation: headMorePopState}">
                    <div class="head-more-userinfo flex1 flexacenter">
                        <div class="head-more-left flexacenter" v-if="islogin">
                            <router-link class="flexacenter" to="/user" @click.native="headMorePopState = !headMorePopState">
                                <img class="head-more-userinfo-avatar" :src="userInfo.avatar || $baseURL + '/img/defaultAvatar.jpg'" />
                                <div class="head-more-userinfo-username">{{ userInfo.nickname || "未登录" }}</div>
                            </router-link>
                        </div>
                        <div class="head-more-left flexacenter" v-else @click="handleRegister()">
                            <img class="head-more-userinfo-avatar" :src="userInfo.avatar || $baseURL + '/img/defaultAvatar.jpg'" />
                            <div class="head-more-userinfo-username">{{ userInfo.nickname || "未登录" }}</div>
                        </div>

                        <div class="head-more-right">
                            <!-- 消息 -->
                            <div class="information-box" v-if="userInfo.messagenum">
                                <img class="information-icon" src="@/assets/img/icon/email.png" />
                                <div class="red-dot flexcenter">{{ userInfo.messagenum }}</div>
                            </div>
                            <!-- 登录按钮 -->
                            <div v-if="!islogin" class="loginBtn flexcenter" @click="handleRegister()">
                                登录/注册
                            </div>
                        </div>
                    </div>

                    <div class="tab-list">
                        <a class="tab-item flexacenter" :href="item.url" target="_blank" :class="{pitch: item.current == 1}" v-for="(item, index) in menu" :key="index">{{ item.name }}</a>
                    </div>

                    <div class="head-more-post flexcenter" @click.stop="$skipUrl(invitationPost, false)">
                        <div class="head-more-post-icon flexcenter">
                            <svg-icon icon-class="addyellow" class-name="head-more-post-img"></svg-icon>
                        </div>
                        发布帖子
                    </div>

                    <div v-if="headMorePopState" @click="headMorePopState = !headMorePopState">
                        <svg-icon icon-class="cross" class-name="cross-icon"></svg-icon>
                    </div>
                </div>
            </div>
            <div class="head-pop" v-if="headMorePopState" @click="headMorePopState = !headMorePopState"></div>
        </div>
    </div>
</template>

<script>
import SearchBox from "../components/SearchBox.vue"

import {invitationPost} from "@/utils/bizarreUrl"

export default {
    name: "HeaderNav",
    data() {
        return {
            collapseShow: false, //显示折叠弹窗
            a: 0,
            headMorePopState: false, // 弹窗的状态
            islogin: false,
            userInfo: {}, // 注意 userInfo 写I 是否是大写 ,, 因为 user 已经改为全局，后面要删除传值的 user
            menu: [],
            hotSearchkeywords: [], // 热门搜索
            invitationPost,
            $baseURL: "", // 根目录
        }
    },
    props: ["issearch", "needgetuser", "userinfo"],
    watch: {
        headMorePopState(newValue, oldValue) {
            if (newValue) this.$pageStop()
            else this.$pageMove()
        },
    },
    mounted() {
        let user = this.$store.state.user
        if (JSON.stringify(user) === "{}") this.$store.dispatch("getUserInfo", this)
        else {
            this.userInfo = user
            this.islogin = user.uid > 0 ? true : false
            this.hotSearchkeywords = this.$store.state.hotSearchkeywords
            this.menu = this.$store.state.menu
        }

    },

    methods: {
        // 处理登录
        handleRegister() {
            let url = encodeURIComponent(location.href)
            this.$skipUrl(`${this.$loginUrl}?referer=${url}`, false)
        },

        collapseClick() {
            if (this.collapseShow == true) this.collapseShow = false
            else this.collapseShow = true
        },
        collapseClose() {
            this.collapseShow = false
        },
    },

    destroyed() {
        this.$pageMove()
    },

    components: {
        SearchBox,
    },
}
</script>

<style lang="scss" scoped>
.head-box {
    z-index: 1000;
    position: relative;

    .head {
        padding: 0 0.2933rem;
        height: 1.3rem;
        justify-content: space-between;
        position: fixed;
        top: 0;
        width: calc(10rem - 0.5866rem);
        background-color: #f5f5f5;
        z-index: 100;

        .left {
            .head-title {
                color: #000;
                font-weight: 650;
                font-size: 0.48rem;
            }
        }

        .right {
            .head-more {
                position: relative;

                .head-more-icon {
                    width: 0.48rem;
                    height: 0.4rem;
                }

                .red-dot {
                    position: absolute;
                    right: -0.2rem;
                    top: -0.2rem;
                    width: 0.16rem;
                    height: 0.16rem;
                    border-radius: 0.64rem;
                    background-color: rgba(253, 63, 93, 1);
                }
            }
        }

        .head-arrows {
            width: 0.1333rem;
            height: 0.1333rem;
            position: absolute;
            bottom: -0.0133rem;
            right: -0.5333rem;
            width: 0;
            height: 0;
            transform: translateX(50%);
            border: 0.24rem solid #000;
            border-top-color: transparent;
            border-bottom-color: rgb(255, 255, 255);
            border-left-color: transparent;
            border-right-color: transparent;
            opacity: 0;
            transition: all 0.2s;

            &.animation {
                animation: slide-in-left2 0.5s ease-out forwards;
            }
        }

        .head-more-pop {
            position: absolute;
            top: calc(100% - 0.0133rem);
            height: calc(100vh - 1.3rem);
            width: 7.6rem;
            right: 0;
            background-color: #fff;
            overflow: auto;
            transition: all 0.2s;
            right: -100%;
            opacity: 0;

            &.animation {
                animation: slide-in-left 0.5s ease-out forwards;
            }

            @keyframes slide-in-left {
                0% {
                    right: -100%;
                    opacity: 0;
                }

                100% {
                    right: 0;
                    opacity: 1;
                }
            }

            @keyframes slide-in-left2 {
                0% {
                    right: -0.5333rem;
                    opacity: 0;
                }

                100% {
                    right: 0.5333rem;
                    opacity: 1;
                }
            }

            .head-more-userinfo {
                height: 2.88rem;
                margin-left: 0.64rem;
                margin-right: 0.72rem;
                box-sizing: border-box;
                border-bottom: 0.0133rem solid #ebebeb;
                justify-content: space-between;

                .head-more-left {
                    .head-more-userinfo-avatar {
                        margin-right: 0.24rem;
                        width: 1.28rem;
                        height: 1.28rem;
                        border-radius: 50%;
                    }

                    .head-more-userinfo-username {
                        font-size: 0.36rem;
                        color: #333333;
                    }
                }

                .head-more-right {
                    .information-box {
                        position: relative;
                        width: 0.44rem;
                        height: 0.44rem;

                        .information-icon {
                            width: 0.44rem;
                            height: 0.44rem;
                        }
                    }

                    .red-dot {
                        position: absolute;
                        right: -0.2rem;
                        top: -0.2rem;
                        width: 0.36rem;
                        height: 0.36rem;
                        color: #fff;
                        border-radius: 0.64rem;
                        background-color: rgba(253, 63, 93, 1);
                        font-size: 0.26rem;
                    }

                    .loginBtn {
                        width: 2.24rem;
                        height: 0.8rem;
                        border-radius: 3.12rem;
                        background-color: rgba(98, 177, 255, 1);
                        color: #fff;
                        font-size: 0.34rem;
                    }
                }
            }

            .tab-list {
                padding-right: 0.72rem;
                margin-left: 0.64rem;
                border-bottom: 0.0133rem solid #ebebeb;

                .tab-item {
                    height: 1.44rem;
                    margin: 0.328rem 0;
                    border-radius: 0.22rem;
                    padding-left: 0.64rem;
                    font-size: 0.36rem;
                    color: #555555;
                    text-decoration: none;

                    &.pitch {
                        background-color: rgba(80, 227, 194, 1);
                        font-weight: 650;
                        color: #000;
                    }
                }
            }

            .head-more-post {
                color: #000;
                font-size: 0.4rem;
                margin: 1.28rem 0 2.6667rem;

                .head-more-post-icon {
                    width: 0.48rem;
                    height: 0.48rem;
                    margin-right: 0.1333rem;
                    background-color: #fddf6d;
                    border-radius: 50%;

                    .head-more-post-img {
                        width: 0.24rem;
                        height: 0.24rem;
                    }
                }
            }

            .cross-icon {
                width: 0.32rem;
                height: 0.32rem;
                // padding: .8rem;
                padding: 0.4rem;
                // position: sticky;
                position: fixed;
                // bottom: .2667rem;
                // bottom: 1rem;
                bottom: 0.3rem;
                // right: 3.8rem;
                left: calc(50% + 1.2rem);
                transform: translateX(-50%);
                // right: 3.8rem;
                // transform: translateX(50%);
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
            }
        }
    }

    .head-pop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.705882352941177);
    }
}

// 折叠弹窗
.collapse-box {
    display: none;
    position: absolute;
    right: 0;
    top: 1.19rem;
    width: 750px;
    margin: 0 auto;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 8;

    &.collapse-show {
        display: block;
    }

    .collapse-container {
        background-color: #fff;
        width: 7.6rem;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        flex-direction: column;
    }

    .collapse-my {
        margin: 0.9rem 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.7rem 0 0.8rem;

        .my-left {
            width: 3.5rem;
            display: flex;
            align-items: center;
        }

        .my-right {
            width: 2.5rem;
            position: relative;
            display: flex;
            justify-content: end;
        }

        // 头像
        .collapse-my-img {
            width: 1.28rem;
            height: 1.28rem;
            border-radius: 0.67rem;
            margin: 0 0.3rem 0 0;
        }

        .collapse-my-name {
            font-size: 0.36rem;
            color: #333;
        }

        .my-img {
            width: 1.28rem;
            height: 1.28rem;
        }

        .right-msg-img {
            width: 0.44rem;
            height: 0.44rem;
            background-size: contain;
            background-image: url("../assets/img/icon/email.png");
        }

        .right-msg-num {
            display: flex;
            justify-content: center;
            width: 0.3rem;
            height: 0.3rem;
            line-height: 0.3rem;
            border-radius: 0.2rem;
            background-color: #fd3f5d;
            color: #fff;
            font-size: 0.254rem;
            position: absolute;
            top: -0.15rem;
            right: -0.2rem;
            z-index: 1;
        }

        // 未登录按钮
        .loginBtn {
            width: 2.24rem;
            height: 0.8rem;
            line-height: 0.8rem;
            border-radius: 3.12rem;
            background-color: rgba(98, 177, 255, 1);
            color: #fff;
            font-size: 0.34rem;
            text-align: center;
        }
    }

    // 折叠弹窗列表
    .collapse-list {
        margin-left: 0.8rem;
        border-top: 0.013333rem solid #eee;
        border-bottom: 0.013333rem solid #eee;
        display: flex;
        padding: 0.3rem 0;
        flex-direction: column;

        span {
            height: 1.44rem;
            line-height: 1.44rem;
            border-radius: 0.22rem;
            padding: 0 0.8rem;
            font-size: 0.36rem;
            margin: 0.1rem 0.8rem 0.1rem 0;
        }

        .listActive {
            background-color: rgba(80, 227, 194, 1);
            font-weight: bolder;
        }
    }

    // 折叠弹窗发布帖子
    .collapse-publish {
        margin: 0.9rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;

        span {
            color: #000;
            font-size: 0.4rem;
        }

        // 发布帖子图片
        .collapse-publish-img {
            width: 0.48rem;
            height: 0.48rem;
            border-radius: 0.24rem;
            background-color: #fddf6d;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 0.2rem;
        }

        .icon-add {
            width: 0.24rem;
            height: 0.24rem;
        }
    }

    .collapse-close {
        display: flex;
        justify-content: center;
        padding: 0.5rem 0;

        .icon-close {
            width: 0.32rem;
            height: 0.32rem;
        }
    }
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.15rem 0.35rem 0.4rem;

    .header-title {
        width: 60%;
        font-weight: bold;
        font-size: 0.48rem;
        color: #333;
    }

    .header-search-box {
        width: 40%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .header-collapse {
        width: 0.48rem;
        display: flex;
        justify-content: flex-end;
        position: relative;

        .icon-collapse {
            width: 0.48rem;
            height: 0.4rem;
        }
    }

    .collapse-red {
        width: 0.16rem;
        height: 0.16rem;
        background-color: red;
        border-radius: 0.2rem;
        position: absolute;
        top: -0.15rem;
        right: -0.2rem;
    }
}
</style>
