<template>
    <el-container style="background: #f5f7fa">
        <el-header class="header">
            <div class="head-title">
                <img src="../assets/login_bg_01.png" class="bg-01" />
                <img src="../assets/pc_top_bg_02.png" class="bg-02" />
                <div class="wrapper">
                    <img src="../assets/pc_logo.png" class="logo" />
                    <div class="info">
                        <!-- <div class="links">
                            <a style="margin-right: 39px;" @click="setHome">设为首页</a>
                            <a @click="addFavorite">收藏本站</a>
                        </div> -->
                        <div class="search">
                            <input placeholder="搜索..." v-model="title" />
                            <div class="btn-search" @click="goSearch">
                                <img src="../assets/icon_search.png" @click="policyAll()" />
                            </div>
                        </div>
                        <!-- <div class="nav_icon">
                            <img src="../assets/nav_top_icon_weixin.png" />
                            <img src="../assets/nav_top_icon_xinlang.png" />
                        </div> -->
                    </div>
                    <div class="head-menu">
                        <div class="wrapper">
                            <!-- background-color="transparent" -->
                            <el-menu
                                mode="horizontal"
                                text-color="#333"
                                active-text-color="#BF1616"
                                :default-active="activeMenu"
                                router
                            >
                                <el-menu-item index="home" :route="{ name: 'home' }">首页</el-menu-item>
                                <el-menu-item index="news" :route="{ name: 'news' }">新闻动态</el-menu-item>
                                <el-menu-item index="newsList2" :route="{ name: 'newsList2', query: { myTab: 2 } }"
                                    >通知公告</el-menu-item
                                >
                                <el-menu-item index="policy" :route="{ name: 'policy' }">政策法规</el-menu-item>
                                <el-menu-item index="resource" :route="{ name: 'resource' }">资源供需</el-menu-item>
                                <el-menu-item index="interact" :route="{ name: 'interact' }">政民互动</el-menu-item>
                                <el-menu-item index="app" :route="{ name: 'app' }">APP下载</el-menu-item>
                            </el-menu>

                            <el-popover
                                class="user-info-dropdown-msg"
                                placement="bottom-end"
                                trigger="hover"
                                v-if="userInfo"
                                width="500"
                            >
                                <div class="user-info" slot="reference">
                                    <img src="../assets/top_nav.png" class="msg" />
                                    <!-- <img src="../assets/top_user.png" class="userImg" /> -->
                                </div>
                                <div class="user-info-drop-down-menu-msg">
                                    <div class="msgTop">
                                        <div class="msgtab">
                                            <div class="title" :class="{ active: tab === 1001 }" @click="tab = 1001">
                                                消息
                                            </div>
                                            <div class="title" :class="{ active: tab === 1002 }" @click="tab = 1002">
                                                回复
                                            </div>
                                            <div class="title" :class="{ active: tab === 1003 }" @click="tab = 1003">
                                                点赞
                                            </div>
                                        </div>

                                        <router-link to="/message">
                                            <el-link type="info" :underline="false">查看全部</el-link></router-link
                                        >
                                    </div>
                                    <div class="msgCon" v-if="tab === 1001">
                                        <msg-popups></msg-popups>
                                    </div>
                                    <div class="msgCon" v-if="tab === 1002"></div>
                                    <div class="msgCon" v-if="tab === 1003"></div>
                                    <!-- <div class="btn" @click="$router.push({ name: 'message' })">
                                            消息
                                        </div>
                                        <div class="btn" @click="$router.push({ name: 'reply' })">
                                            回复
                                        </div>
                                        <div class="btn" @click="$router.push({ name: 'giveLike' })">
                                            点赞
                                        </div> -->
                                </div>
                            </el-popover>
                            <el-popover
                                class="user-info-dropdown"
                                placement="bottom-start"
                                trigger="hover"
                                v-if="userInfo"
                            >
                                <div class="user-info" slot="reference">
                                    <!-- <div class="avatar" :style="{ backgroundImage: `url(${userInfo.avatar})` }"></div> -->
                                    <!-- <div class="name">{{ userInfo.nickname }}</div> -->
                                    <!-- <img src="../assets/top_user.png" class="userImg" /> -->

                                    <!-- <img
                                        src="../assets/top_nav.png"
                                        class="msg"
                                        @click="$router.push({ name: 'message' })"
                                    /> -->

                                    <img :src="userInfo.avatar" class="userImg" />
                                    <img src="../assets/icon_down_a.png" class="icon-tri" />
                                </div>
                                <div class="user-info-drop-down-menu">
                                    <!-- <div class="btn-manage" @click="$router.push({ name: 'manage' })">资源供需管理</div> -->
                                    <div class="btn" @click="$router.push({ name: 'account' })">
                                        {{ userInfo.nickname }}
                                    </div>
                                    <div class="btn" @click="$router.push({ name: 'editInfo' })">编辑资料</div>
                                    <div class="btn" @click="$router.push({ name: 'myCollection' })">我的收藏</div>
                                    <div class="btn" @click="$router.push({ name: 'release' })">我的发布</div>
                                    <div class="btn" @click="$router.push({ name: 'docking' })">我的需求</div>
                                    <div class="btn" @click="logout">退出登录</div>
                                </div>
                            </el-popover>
                            <div class="login-info" v-else>
                                <div class="btn" @click="$router.push({ name: 'login' })">登录</div>
                                <div class="divider"></div>
                                <div class="btn" @click="$router.push({ name: 'register' })">注册</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="main-content">
                <router-view ref="my" />
                <div class="container Friendship_link">
                    <div class="link_title" v-if="links.length > 0">友情链接</div>
                    <div class="list">
                        <a v-for="item in links" :key="item.id" :href="item.url" target="_blank">{{ item.name }}</a>
                    </div>
                </div>
            </div>
        </el-main>

        <Footer></Footer>
    </el-container>
</template>

<script>
import Footer from '../components/footer';
import msgPopups from '../components/message/msgPopups';

export default {
    components: { Footer, msgPopups },
    name: 'index',
    data() {
        return {
            title: '',
            activeMenu: null,
            isShowSelect: false,
            // unitName: 'qqqqq',
            // selectList: [
            //     { key: 1, value: '国务院直属部门' },
            //     { key: 2, value: '国务院直属部门' },
            //     { key: 3, value: '国务院直属部门' },
            //     { key: 4, value: '国务院直属部门' }
            // ],
            options: [],
            value: '',
            search: '',
            tab: 1001,
            links: []
        };
    },
    mounted() {
        this.activeMenu = this.$route.meta.menu || this.activeMenu;
        this.$http.get('/extLink/all', { size: 100 }).then(res => {
            this.links = res.content;
        });
    },
    methods: {
        policyAll() {
            this.$refs.my.policyAll(this.title);
        },
        setHome(obj, vrl) {},
        addFavorite() {
            const isMac = navigator.userAgent.toLowerCase().indexOf('mac') != -1;
            this.$message.info(`按下 ${isMac ? 'Command' : 'Ctrl'} + D 加入收藏`);
        },
        logout() {
            this.$store.commit('updateUserInfo', null);
            localStorage.removeItem('token');
            this.$router.push('/home');
        },
        arrowDown() {
            this.isShowSelect = !this.isShowSelect;
        },
        // select(item, index) {
        //     this.isShowSelect = false;
        //     this.unitModel = index;
        //     this.unitName = item.value;
        // }
        goSearch() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$router.push({
                        name: 'search',
                        params: {
                            search: this.title
                        }
                    });
                }, 100);
            });
        }
    },
    watch: {
        $route(route) {
            this.activeMenu = this.$route.meta.menu || this.activeMenu;
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    width: 1200px;
    margin: 0px auto;
}
.header {
    height: 230px !important;
    padding: 0;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.06);
    .head-title {
        height: 230px;
        background: linear-gradient(#ffcc72, #fff7ea, #ffffff);
        position: relative;
        .bg-01 {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 154px;
        }
        .bg-02 {
            position: absolute;
            top: 0;
            right: 0;
            width: 580px;
            height: 150px;
        }
        .logo {
            width: 630px;
            height: 82px;
            position: absolute;
            left: 0;
            top: 64px;
        }
        .wrapper {
            width: 1200px;
            margin: 0 auto;
            position: relative;
            height: 100%;
        }
        .info {
            display: flex;
            position: absolute;
            right: 0px;
            bottom: 87px;
            .links {
                a {
                    font-size: 13px;
                    color: #bf1616;
                    cursor: pointer;
                }
            }
            .search {
                width: 200px;
                height: 30px;
                border: 1px solid #bf1616;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                input {
                    width: 164px;
                    height: 30px;
                    flex-grow: 1;
                    padding: 0 0 0 10px;
                    font-size: 14px;
                    color: #bf1616;
                    box-sizing: border-box;
                    &::-webkit-input-placeholder {
                        font-size: 13px;
                        color: #bf1616;
                    }
                }
                .btn-search {
                    width: 36px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-left: 1px solid #bf1616;
                    background-color: #bf1616;
                    cursor: pointer;
                    img {
                        width: 14px;
                        height: 14px;
                    }
                }
            }
            .nav_icon {
                img {
                    width: 30px;
                    height: 30px;
                    margin-left: 16px;
                }
            }
        }
    }
    .head-menu {
        height: 50px;
        // background: @prim;
        box-sizing: border-box;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        .wrapper {
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }
        .el-menu {
            height: 50px;
            background: none !important;
        }
        .el-menu-item {
            height: 50px;
            line-height: 50px;
            font-weight: bold;
            font-size: 18px;
            border: none;
            padding: 0px;
            &.is-active {
                // background-color: shade(@prim, 20%) !important;
                font-weight: bold;
            }
            + .el-menu-item {
                margin-left: 56px;
            }
        }
        .el-menu--horizontal > .el-menu-item.is-active {
            border-bottom: none;
        }
        .user-info-dropdown {
            position: absolute;
            right: 40px;
            top: 0;
            height: 50px;
            .user-info {
                widows: 100px;
                height: 50px;
                .flex();
                cursor: pointer;
                // .avatar {
                //     width: 22px;
                //     height: 22px;
                //     border-radius: 11px;
                //     background-position: center;
                //     background-size: cover;
                //     background-repeat: no-repeat;
                // }
                // .name {
                //     color: white;
                //     margin-left: 8px;
                //     font-size: 13px;
                // }
                .icon-tri {
                    width: 16px;
                    height: 16px;
                }
                .userImg {
                    width: 34px;
                    height: 34px;
                    margin-right: 4px;
                    border-radius: 50%;
                }
                .msg {
                    width: 32px;
                    height: 32px;
                    margin-right: 70px;
                }
            }
        }
        .user-info-dropdown-msg {
            position: absolute;
            right: 40px;
            top: 0;
            height: 50px;
            .user-info {
                widows: 100px;
                height: 50px;
                .flex();
                cursor: pointer;
                // .avatar {
                //     width: 22px;
                //     height: 22px;
                //     border-radius: 11px;
                //     background-position: center;
                //     background-size: cover;
                //     background-repeat: no-repeat;
                // }
                // .name {
                //     color: white;
                //     margin-left: 8px;
                //     font-size: 13px;
                // }
                .icon-tri {
                    width: 16px;
                    height: 16px;
                }
                .userImg {
                    width: 34px;
                    height: 34px;
                    margin-right: 4px;
                    border-radius: 50%;
                }
                .msg {
                    width: 32px;
                    height: 32px;
                    margin-right: 70px;
                }
            }
        }
        .login-info {
            position: absolute;
            top: 0;
            right: 0;
            height: 50px;
            .flex();
            justify-content: center;
            .btn {
                // width: 74px;
                cursor: pointer;
                color: #bf1616;
                font-size: 13px;
                text-align: center;
            }
            .divider {
                width: 1px;
                height: 14px;
                background: #c8c9cc;
                margin: 0 24px;
            }
        }
    }
}
.el-main {
    padding: 0;
    // background: #f5f7fa;
    // > .main-content {
    //     width: 1200px;
    //     margin: auto;
    // }
    .Friendship_link {
        .link_title {
            margin-top: 40px;
            font-weight: bold;
        }
        .list {
            margin-top: 20px;
            font-size: 0;
            a {
                color: #626366;
                display: inline-block;
                font-size: 14px;
                margin: 0 50px 20px 0;
                border: 1px solid #c0c0c0;
                border-radius: 6px;
                padding: 8px 12px;
                &:hover {
                    color: #bf1616;
                    border-color: #bf1616;
                }
            }
        }
    }
}

.user-info-drop-down-menu {
    width: 136px;
    margin: 8px auto -12px auto;
    .btn-manage {
        width: 120px;
        height: 38px;
        background: rgba(234, 45, 45, 0.12);
        .flex();
        justify-content: center;
        font-size: 14px;
        color: @prim;
        cursor: pointer;
        margin: auto;
    }
    .btn {
        width: 120px;
        cursor: pointer;
        line-height: 60px;
        height: 60px;
        text-align: center;
        border-bottom: 1px solid @border;
        margin: auto;
        color: black;
        &:last-child {
            border: none;
        }
    }
}
.user-info-drop-down-menu-msg {
    // margin: 8px auto -12px auto;
    .msgTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        .msgtab {
            display: flex;
        }
        .title {
            font-size: 14px;
            font-weight: bold;
            color: #000000;
            line-height: 20px;
            cursor: pointer;
            margin-right: 24px;
            &.active {
                color: #bf1616;
                border-bottom: #bf1616 2px solid;
            }
        }

        .el-link {
            font-size: 12px;
        }
    }
    .msgCon {
        padding: 0px 16px;
    }
}
</style>
