<template>
    <div class="header-box flex-center">
        <div class="header-main flex-align">
            <div class="header-logo header-part">
                <img src="../assets/images/u24.png" alt="">
            </div>
            <div class="header-menu flex-center header-part">
                <!-- <div :class="['menuItem',{'menu-active':$route.name==='qusetionBankManage'?true:false}]"
                    @click="toPath('qusetionBankManage')">
                    题库管理
                </div>
                <div :class="['menuItem',{'menu-active':$route.name==='examPaperManage'?true:false}]"
                    @click="toPath('examPaperManage')">
                    试卷管理
                </div>
                <div :class="['menuItem',{'menu-active':$route.name==='baseData'?true:false}]"
                    @click="toPath('baseData')">
                    基础数据
                </div> -->
                <a-menu style="font-size: 17px;" :selectedKeys="[$route.name||'']" mode="horizontal">
                    <a-menu-item key="qusetionBankManage" @click="toPath('qusetionBankManage')">题库管理</a-menu-item>
                    <a-menu-item key="examPaperManage" @click="toPath('examPaperManage')">
                        试卷管理
                    </a-menu-item>
                    <a-menu-item key="testingManage" @click="toPath('testingManage')">
                        测验管理
                    </a-menu-item>
                    <a-menu-item key="baseData" @click="toPath('baseData')">
                        基础数据
                    </a-menu-item>
                    <a-sub-menu>
                        <span slot="title" class="submenu-title-wrapper">任务管理</span>
                        <a-menu-item key="paperGenerate" @click="toPath('paperGenerate')">
                            试卷生成任务
                        </a-menu-item>
                        <a-menu-item key="questionImportList" @click="toPath('questionImportList')">
                            试题导入任务
                        </a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </div>
            <div class="header-info header-part">
                <div class="flex-align">
                    <a-popover trigger="click">
                        <!-- <a slot="content" @click="hide">Close</a> -->
                        <template slot="title"> </template>
                        <template slot="content">
                            <div class="tags-box">
                                <a-spin :spinning="spinning">
                                    <div class="tags-item flex-align" v-for="item in messages" :key="item.id"
                                        @click="toDetails(item)">
                                        <div class="flex-center">
                                            <div>
                                                <div :class="[item.isRead?'dot-green':'dot-red']"></div>
                                            </div>
                                            <span class="only-line-1">{{item.message||''}}</span>
                                        </div>
                                        <span
                                            style="width:100px;text-align: right;">{{item.creationTime.slice(5,10)}}</span>
                                    </div>
                                </a-spin>
                                <div class="view-more" @click="toPath('messageManage')">
                                    查看更多>>>
                                </div>
                            </div>
                        </template>
                        <a-badge :dot="notReadCount>0">
                            <a-icon type="bell" style="font-size: 18px;cursor: pointer;" @click="_GetUserMessage" />
                        </a-badge>
                    </a-popover>
                    <!-- <a-tooltip>
                        <template slot="title">
                            <div class="tags-box">
                                <div class="tags-item flex-align" v-for="item in messages">
                                    <div class="flex-center">
                                        <div>
                                            <div :class="[item.isRead?'dot-green':'dot-red']"></div>
                                        </div>
                                        <span class="only-line-1">{{item.message||''}}</span>
                                    </div>
                                    <span
                                        style="width:100px;text-align: right;">{{item.creationTime.slice(5,10)}}</span>
                                </div>
                                <div class="view-more" @click="toPath('messageManage')">
                                    查看更多>>>
                                </div>
                            </div>
                        </template>
                        <a-badge :dot="notReadCount>0">
                            <a-icon type="bell" style="font-size: 18px;cursor: pointer;" />
                        </a-badge>
                    </a-tooltip> -->
                    <a-dropdown>
                        <div class="user-info ">
                            <img src="../assets/images/default-user.jpg" alt="">
                            <!-- <span @click="toPath('login')">{{$store.state.userInfo.Info.name}}</span> -->
                            <span>{{$store.state.userInfo.Info.fullName}}</span>
                        </div>
                        <a-menu slot="overlay">
                            <a-menu-item @click="updatePaw">
                                <a-icon type="user" /> 修改密码
                            </a-menu-item>
                            <a-menu-item @click="signOut()">
                                <a-icon type="poweroff" /> 退出登录
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>

                </div>
            </div>
        </div>
        <ChangePawModal ref="ChangePawModal" />
    </div>
</template>

<script>
    import { GetUserMessage, GetNotReadCount } from '@/api/api'
    import ChangePawModal from './ChangePawModal.vue'
    export default {
        components: {
            ChangePawModal
        },
        data() {
            return {
                spinning: false,
                show: true,
                userID: '',
                messages: [],
                notReadCount: 0
            }
        },
        mounted() {
            let userID = localStorage.getItem("userId") || '';
            this.userID = userID;
            this.creatInterval();
        },
        methods: {
            //退出登录
            signOut() {
                // this.$store.dispatch('initUser')
                this.$router.push({ name: "login" });
            },
            updatePaw() {
                this.$refs.ChangePawModal.showModal()
            },
            creatInterval() {
                this._GetNotReadCount()
                let timer = setInterval(() => {
                    this._GetNotReadCount()
                }, 20000)
                this.$once('hook:beforeDestroy', () => {
                    clearInterval(timer)
                    timer = null;
                })
            },
            //获取未读消息数量
            _GetNotReadCount() {
                let token = localStorage.getItem("Token");
                if (!token || this.$route.name === 'login') { return; }
                GetNotReadCount().then(res => {
                    //console.log(res, '未读消息数量')
                    this.notReadCount = res;
                })
            },
            //获取用户消息
            _GetUserMessage() {
                if (this.notReadCount == 0) {
                    this.messages = [];
                } else {
                    this.spinning = true;
                    let data = {
                        isRead: false,
                        SkipCount: 0,
                        MaxResultCount: 3,
                        isPreview: true
                    }
                    GetUserMessage(data).then(res => {
                        //console.log(res, '未读消息列表')
                        this.messages = res.items.slice(0, 3);
                        this.spinning = false;
                    }).catch(err => {
                        this.spinning = false;
                    })
                }

            },
            toPath(path) {
                let oPath = this.$route.name;
                if (oPath === path) { return; };
                this.$router.push({
                    name: path
                });
            },
            toDetails(item) {
                console.log(item, 'item')
                switch (item.messageType) {
                    case 0:
                        if (this.$route.name == 'questionImportList') { break; }
                        this.$router.push({
                            name: 'questionImportList'
                        })
                        break;
                    case 1:
                        if (this.$route.name == 'examPaperManage') { break; }
                        this.$router.push({
                            name: 'examPaperManage'
                        })
                        break;
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .header-box {
        width: 100%;
        height: 100px;
        min-width: 1300px;
        background-color: #ffffff;
    }

    .header-part {
        width: 33.33%;
    }

    .header-logo img {
        height: 76px;
    }

    .header-info {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }

    .header-main {
        width: 1320px;
        color: #7F7F7F;
    }

    .menuItem {
        font-size: 16px;
        padding: 8px 16px;
        cursor: pointer;
        margin: 0 16px;

        &:hover {
            color: rgb(24, 144, 255);
        }
    }

    .menu-active {
        color: rgb(24, 144, 255);
        border-bottom: 2px solid rgb(24, 144, 255);
    }

    .user-info img {
        width: 22px;
        margin-right: 8px;
        margin-left: 16px;
    }

    .tags-box {
        max-width: 260px;
    }

    .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-right: 8px;
    }

    .dot-red {
        background-color: red;
        .dot()
    }

    .dot-green {
        background-color: green;
        .dot()
    }

    .tags-item {
        cursor: pointer;
        margin: 6px 0;
    }

    .view-more {
        width: 100%;
        text-align: center;
        cursor: pointer;
    }

    .view-more:hover {
        color: rgb(24, 144, 255);
    }
</style>