<template>
    <div class="ajm-header">
        <a class="logo" href="javascript:void(0);" v-if="systemInfo.systemUrl == ''">
            <img :src="logoImg" alt="">{{systemInfo.systemName}}
        </a>
        <a class="logo" target="_blank" :href="viewSystemUrl" v-else>
            <img :src="logoImg" alt="">{{systemInfo.systemName}}
        </a>
        <div class="user-message">
            <el-menu mode="horizontal" class="user-info" unique-opened router>
                <el-submenu index="1">
                    <template slot="title">
                        <span class="tool-tip" :title="userInfo.realName || userInfo.userName">您好，{{userInfo.realName || userInfo.userName}}</span>
                    </template>
                    <li class="el-menu-item" @click="viewUserInfo">
                        <i class="el-icon-ijm-yonghu1"></i>用户信息
                    </li>
                    <li class="el-menu-item" @click="editPassword">
                        <i class="el-icon-ijm-xiugai"></i>修改密码
                    </li>
                    <li class="el-menu-item" @click="logout">
                        <i class="el-icon-ijm-tuichu" />退出
                    </li>
                </el-submenu>
            </el-menu>
        </div>
        <div class="notice">
            <a href="javascript:;" @click="viewAllMessages">
                <i class="el-icon-ijm-xiaoxizhongxin"></i>
                <el-badge :value="messageInformation.totalMessages" :max="99" class="badge-item"></el-badge>
            </a>
        </div>

        <el-dialog title="消息中心" custom-class="ajm-rightDialog-small" :visible.sync="MessagesFormVisible" top="0" :modal-append-to-body="false">
            <el-tabs v-model="activeName" type="card" class="ajm-border-card" @tab-click="handleClick">
                <el-tab-pane label="全部消息" name="totalMessage" class="message-tab">
                    <ul v-if="messageList.length > 0">
                        <li class="li-style" v-for="(item,index) in messageList" :key="item.messageId"
                            @click="showMessageDetail(item.messageId,index)" :class="{background: item.isShow}">
                            <div class="message-title">
                                <i class="read-status weidu" v-if="item.isRead.value == 2"></i>
                                {{item.messageName}}<i class="el-icon-arrow-down" :class="{transform: item.isShow}"></i>
                            </div>
                            <el-collapse-transition>
                                <div v-show="item.isShow">
                                    <div class="message-detail">{{item.messageContent}}</div>
                                </div>
                            </el-collapse-transition>
                            <p class="message-time">{{item.createdTime}}</p>
                        </li>
                    </ul>
                    <div class="" style="text-align:center;" v-else>暂无数据！</div>
                    <div class="ajm-pagination-bar">
                        <el-pagination @current-change="goMessageChangePageParam" @size-change="goMessageChangePageSizeParam"
                                       :current-page="pageInfo.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageInfo.pageSize"
                                       layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="未读消息" name="unreadMessage" class="message-tab">
                    <ul v-if="messageList.length > 0">
                        <li class="li-style" v-for="(item,index) in messageList" :key="item.messageId"
                            @click="showMessageDetail(item.messageId,index)" :class="{background: item.isShow}">
                            <div class="message-title">
                                <i class="read-status weidu" v-if="item.isRead.value == 2"></i>
                                {{item.messageName}}<i class="el-icon-arrow-down" :class="{transform: item.isShow}"></i>
                            </div>
                            <el-collapse-transition>
                                <div v-show="item.isShow">
                                    <div class="message-detail">{{item.messageContent}}</div>
                                </div>
                            </el-collapse-transition>
                            <p class="message-time">{{item.createdTime}}</p>
                        </li>
                    </ul>
                    <div class="" style="text-align:center;" v-else>暂无数据！</div>
                    <div class="ajm-pagination-bar">
                        <el-pagination @current-change="goUnreadMessageChangePageParam" @size-change="goUnreadMessageChangePageSizeParam"
                                       :current-page="unreadPageInfo.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="unreadPageInfo.pageSize"
                                       layout="total, sizes, prev, pager, next, jumper" :total="unreadPageInfo.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已读消息" name="readMessage" class="message-tab">
                    <ul v-if="messageList.length > 0">
                        <li class="li-style" v-for="(item,index) in messageList" :key="item.messageId"
                            @click="showMessageDetail(item.messageId,index)" :class="{background: item.isShow}">
                            <div class="message-title">
                                {{item.messageName}}<i class="el-icon-arrow-down" :class="{transform: item.isShow}"></i>
                            </div>
                            <el-collapse-transition>
                                <div v-show="item.isShow">
                                    <div class="message-detail">{{item.messageContent}}</div>
                                </div>
                            </el-collapse-transition>
                            <p class="message-time">{{item.createdTime}}</p>
                        </li>
                    </ul>
                    <div class="" style="text-align:center;" v-else>暂无数据！</div>
                    <div class="ajm-pagination-bar">
                        <el-pagination @current-change="goReadMessageChangePageParam" @size-change="goReadMessageChangePageSizeParam"
                                       :current-page="readPageInfo.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="readPageInfo.pageSize"
                                       layout="total, sizes, prev, pager, next, jumper" :total="readPageInfo.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <!-- 显示个人信息 -->
        <transition name="dialog-fade-top">
            <el-dialog title="个人信息" size="tiny" :visible.sync="showDialogUserInfo" :modal-append-to-body="false" custom-class="ajm-dialog-gray">
                <el-row :gutter="20" style="line-height: 10px;">
                    <el-col :span="15">
                        <span>用户账号：</span>
                        <span>{{userInfo.userName}}</span>
                    </el-col>
                    <el-col :span="9">
                        <span>手机号码：</span>
                        <span>{{userInfo.mobilephone}}</span>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="15">
                        <span>用户名称：</span>
                        <span>{{userInfo.realName}}</span>
                    </el-col>
                    <el-col :span="9">
                        <span>性别：</span>
                        <span v-if="userInfo.sex">{{userInfo.sex.name}}</span>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="line-height: 10px;">
                    <el-col :span="15">
                        <span>用户邮箱：</span>
                        <span>{{userInfo.email}}</span>
                    </el-col>
                    <el-col :span="9">
                        <span>状态：</span>
                        <span v-if="userInfo.status">{{userInfo.status.name}}</span>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <span>创建时间：</span>
                        <span>{{userInfo.createdTime}}</span>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="line-height: 10px;">
                    <el-col :span="24">
                        <span>备注：</span>
                        <span>{{userInfo.remark}}</span>
                    </el-col>
                </el-row>
            </el-dialog>
        </transition>

        <!-- 修改密码 -->
        <transition name="dialog-fade-top">
            <el-dialog title="修改密码" size="tiny" :visible.sync="showDialogEditPwd" :modal-append-to-body="false" custom-class="ajm-dialog-gray" :before-close="closeDialog">
                <el-form :model="pwdForm" :rules="pwdRules" ref="editPwd" label-width="100px">
                    <el-form-item label="原密码" prop="oldPwd" :label-width="formLabelWidth">
                        <el-input type="password" v-model="pwdForm.oldPwd" placeholder="请输入原密码" plach :maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd" :label-width="formLabelWidth">
                        <el-input type="password" v-model="pwdForm.newPwd" placeholder="请输入新密码" :maxlength="20" auto-complete="off"></el-input>
                        <el-tooltip popper-class="tool-top" content="长度8~20位字符，必须包含字母和数字" placement="top-start">
                            <i class="el-icon-ijm-tishikaobei"></i>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPwd" :label-width="formLabelWidth">
                        <el-input type="password" v-model="pwdForm.confirmPwd" placeholder="请输入确认密码" :maxlength="20" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelEditPwd">取消</el-button>
                    <el-button type="primary" @click="submitPwdForm('editPwd')">确认</el-button>
                </div>
            </el-dialog>
        </transition>
    </div>
</template>

<script>
    // logo图片
    import logoImg from "@/assets/image/logo.png";
    // 消息服务
    import messageService from "./services/messageService";
    import SockJS from "sockjs-client";
    import Stomp from "stompjs";
    import AjmConfig from 'ajm-framework/core/utils/ajm-config';
    import SessionContextHodler from 'ajm-framework/core/utils/ajm-session';

    import $ from "jquery";

    export default {
        data() {
            var oldPwdFunc = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error("请输入原密码"));
                } else {
                    callback();
                }
            };
            var newPwdFunc = (rule, value, callback) => {
                var reg = /^(?![^a-zA-Z]+$)(?!\D+$)/;
                var regLength = /^.{8,20}$/;
                if (value === "") {
                    callback(new Error("请输入新密码"));
                } else if (!reg.test(value)) {
                    callback(new Error("必须包含字母和数字"));
                } else if (!regLength.test(value)) {
                    callback(new Error("密码长度为8~20"));
                } else if (value === this.pwdForm.oldPwd) {
                    callback(new Error("新密码不能与原密码一致"));
                } else {
                    if (this.pwdForm.confirmPwd !== "") {
                        this.$refs.editPwd.validateField("confirmPwd");
                    }
                    callback();
                }
            };
            var confirmPwdFunc = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== this.pwdForm.newPwd) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };

            return {
                //默认显示消息类
                activeName: 'unreadMessage',
                // 消息列表
                messageList:[],
                //全部消息分页
                pageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 10,
                    // 消息列表
                    list:[],
                },
                //已读消息分页
                readPageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 10,
                    // 消息列表
                    list:[],
                },
                //未读消息分页
                unreadPageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 10,
                    // 消息列表
                    list:[],
                },
                // logo图片
                logoImg: null,
                viewSystemUrl: "",
                // 显示个人信息
                showDialogUserInfo: false,
                // 显示修改密码
                showDialogEditPwd: false,
                // 显示消息详情
                showDialogMessage: false,
                // 显示全部消息
                MessagesFormVisible:false,
                showDialogTotalMessage:false,
                // 修改密码表单
                pwdForm: {
                    newPwd: "",
                    confirmPwd: "",
                    oldPwd: ""
                },
                userName: "",
                // 密码规则
                pwdRules: {
                    // 新密码
                    newPwd: [
                        { required: true, validator: newPwdFunc, trigger: "blur" }
                    ],
                    // 确认密码
                    confirmPwd: [
                        {
                            required: true,
                            validator: confirmPwdFunc,
                            trigger: "blur"
                        }
                    ],
                    // 原密码
                    oldPwd: [
                        { required: true, validator: oldPwdFunc, trigger: "blur" }
                    ]
                },
                formLabelWidth: "100px",
                //消息通知
                messageInformation: {
                    // 总消息数
                    totalMessages: 0,
                    // 消息类型数组
                    messageTypeVOs: []
                },
                stompClient:null,
            };
        },
        computed: {
            // 系统信息
            systemInfo() {
                let systemInfo = this.$store.getters.systemInfo;
                if (!systemInfo) {
                    return {};
                }
                let tokenInfo = this.$store.getters.tokenInfo;
                let systemIcon = systemInfo.systemIcon;
                let logo = logoImg;

                if (systemIcon) {
                    logo = AjmConfig.getApiUrl() + AjmConfig.get("BASE_CONTEXT_PATH") + "/api/file/viewFile/" + systemIcon + "?access_token=" + tokenInfo.access_token;
                }
                if (tokenInfo) {
                    let userInfo = this.$store.getters.userInfo;
                    if (userInfo && systemInfo) {
                        this.viewSystemUrl = systemInfo.systemUrl + "?access_user=" + userInfo.userId + "&access_token=" + tokenInfo.access_token;
                    }
                }
                this.logoImg = logo;
                return systemInfo;
            },
            userInfo() {
                let userInfo = this.$store.getters.userInfo;
                if (!userInfo) {//偶尔从store获取不到user 因为异常请求这里先执行 存储对象在后
                    userInfo = this.$store.getters.tokenInfo.user;
                }
                this.userName = userInfo.userName;
                if(null == this.messageInformation){
                    this.messageInformation= {
                        totalMessages: 0,
                        messageTypeVOs: []
                    }
                }
                return userInfo;
            },
        },
        methods: {
            //分页切换全部消息页面
            goMessageChangePageParam(page) {
                this.pageInfo.pageNum = page;
                this.findTotalMessageList();
            },
            //根据全部消息页面页码切换页面
            goMessageChangePageSizeParam(pageSize) {
                this.pageInfo.pageSize = pageSize;
                this.findTotalMessageList();
            },
            // 查询全部消息
            findTotalMessageList(){
                let params ={
                    page: this.pageInfo.pageNum,
                    rows: this.pageInfo.pageSize,
                }
                messageService.findMessageListByPage(params).then(data => {
                    this.pageInfo = data;
                    this.pageInfo.list = this.convertMessageData(data.list);
                    this.messageList = this.pageInfo.list;
                });
            },
            //分页切换未读消息页面
            goUnreadMessageChangePageParam(page) {
                this.unreadPageInfo.pageNum = page;
                this.findUnreadMessageList();
            },
            //根据未读消息页面页码切换页面
            goUnreadMessageChangePageSizeParam(pageSize) {
                this.unreadPageInfo.pageSize = pageSize;
                this.findUnreadMessageList();
            },
            // 查询未读消息
            findUnreadMessageList(){
                let params ={
                    page: this.unreadPageInfo.pageNum,
                    rows: this.unreadPageInfo.pageSize,
                    isRead:{value:2}
                }
                messageService.findMessageListByPage(params).then(data => {
                    this.unreadPageInfo = data;
                    this.unreadPageInfo.list = this.convertMessageData(data.list);
                    this.messageList = this.unreadPageInfo.list;
                });
            },
            //分页切换已读消息页面
            goReadMessageChangePageParam(page) {
                this.readPageInfo.pageNum = page;
                this.findReadedMessageList();
            },
            //根据已读消息页面页码切换页面
            goReadMessageChangePageSizeParam(pageSize) {
                this.readPageInfo.pageSize = pageSize;
                this.findReadedMessageList();
            },
            // 查询已读消息
            findReadedMessageList(){
                let params ={
                    page: this.readPageInfo.pageNum,
                    rows: this.readPageInfo.pageSize,
                    isRead:{value:1}
                }
                messageService.findMessageListByPage(params).then(data => {
                    this.readPageInfo = data;
                    this.readPageInfo.list = this.convertMessageData(data.list);
                    this.messageList = this.readPageInfo.list;
                });
            },
            // 转换消息数据
            convertMessageData(list){
                let messageList = [];
                list.forEach(function (item, index) {
                    messageList.push({
                        isShow: false,
                        messageId: item.messageId,
                        messageTypeName: item.messageTypeName,
                        createdTime: item.createdTime,
                        isRead: item.isRead,
                        messageContent: item.messageContent,
                        messageName: item.messageName,
                        page:item.page,
                        rows:item.rows
                    });
                });
                return messageList;
            },
            // 切换消息板块
            handleClick(tab, event){
                if(tab.name == "readMessage"){
                    this.findReadedMessageList();
                }else if(tab.name == "unreadMessage"){
                    this.findUnreadMessageList();
                }else{
                    this.findTotalMessageList();
                }
            },
            //读取消息
            showMessageDetail(messageId,index){
                let totalMessageList = this.messageList;
                let messageObj = totalMessageList[index];
                messageObj.isShow = !messageObj.isShow;
                if(messageObj.isRead.value == 2){
                    if(this.messageInformation.totalMessages > 0){
                        this.messageInformation.totalMessages--;
                    }
                    messageService.findMessageDetailByMessageId(messageId).then(data =>{
                        messageObj.isRead = data.isRead;
                    });
                }
            },
            // 显示消息中心
            viewAllMessages(){
                this.MessagesFormVisible = true;
                this.activeName ='unreadMessage';
                this.findUnreadMessageList();
            },

            //校验到重复登录退出
            repeat_login_out(content, receiverId) {
                var token = SessionContextHodler.getContext().getToken();
                var userId = this.$store.getters.userInfo.userId;
                if (receiverId == userId && content != token && typeof (token) != "undefined" && null !== token) {
                    SessionContextHodler.getContext().clearTokenInfo();
                    this.$alert('您的账号已在其它地方登录，若不是本人操作，请注意账号安全！', '重复登录提醒', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$router.push({
                                //路径
                                path: this.$context.loginPath
                            });
                        }
                    });
                }
            },
            //用户信息更新
            user_info_update_login_out(receiverId) {
                var token = SessionContextHodler.getContext().getToken();
                var userId = this.$store.getters.userInfo.userId;
                if (receiverId == userId && null!=token ){
                    SessionContextHodler.getContext().clearTokenInfo();
                    this.$alert('账号信息变更,请重新登录', '账号信息变更提醒', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$router.push({
                                //路径
                                path: this.$context.loginPath
                            });
                        }
                    });
                }
            },
            //用户角色更新
            user_role_update_login_out() {
                var token = SessionContextHodler.getContext().getToken();
                SessionContextHodler.getContext().clearTokenInfo();
                if ( null!=token ) {
                    this.$alert('账号权限变更,请重新登陆', '账号权限变更提醒', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$router.push({
                                //路径
                                path: this.$context.loginPath
                            });
                        }
                    });
                }
            },
            /*//前端通知后端群发用户登陆消息
            listenUserMessage() {
                var messageSendVO = {
                    title: "用户登录消息",
                    content: SessionContextHodler.getContext().getToken(),
                    type: "1",// 用户登录消息
                    senderId: this.$store.getters.userInfo.userId,
                    sender: this.$store.getters.userInfo.userName,
                    receiveTpls: [
                        {
                            "receiverId": this.$store.getters.userInfo.userId,
                            "receiver": this.$store.getters.userInfo.userName,
                        }
                    ],
                };
                messageService.sendUserLoginMessage(messageSendVO);
            },*/
            //查询最新消息通知
            findMessageInformation() {
                messageService.findMessageInformation().then(data => {
                    this.messageInformation = data;
                });
            },
            // 初始化消息监听
            initMessageMonitor() {
                let userInfo = this.$store.getters.userInfo;
                if (!userInfo) {
                    return;
                }
                this.connection(userInfo);
            },
            // 执行连接
            connection(userInfo){
                let _this = this;
                // socket url
                let url = AjmConfig.get("WS_URL");
                let socket = new SockJS(url);
                // let userId = this.userInfo.userId;
                this.stompClient = Stomp.over(socket);
                this.stompClient.connect({}, function (frame) {
                    /*_this.listenUserMessage();*/
                    // 订阅广播消息
                    _this.stompClient.subscribe("/topic/default", function (message) {
                        if (typeof(message) != "undefined" && typeof(message.body) != "undefined") {
                            _this.messageInformation.totalMessages++;
                            _this.updateMessageTypeInfo(message);
                        }
                    });

                    // 订阅用户角色修改广播
                    let user = _this.$store.getters.tokenInfo.user;
                    if (user && user.roles) {
                        let rolesArray = _this.$store.getters.tokenInfo.user.roles;
                        for (var i = 0; i < rolesArray.length; i++) {
                            _this.stompClient.subscribe("/topic/" + rolesArray[i].permissionCode, function (message) {
                                _this.user_role_update_login_out();
                            });
                        }
                    }

                    // 订阅用户消息
                    _this.stompClient.subscribe("/user/" + userInfo.userId + "/default", function (message) {
                        if (typeof(message) != "undefined" && typeof(message.body) != "undefined") {
                            let messageData = JSON.parse(message.body);
                            let receiverId = messageData.receiveTpls[0].receiverId;
                            if (messageData.title == "用户登录消息") {//用户登录消息 不进行累加
                                _this.repeat_login_out(messageData.content, receiverId);
                            } else if (messageData.title == "用户信息修改" || messageData.title == "用户密码修改") {//用户信息修改
                                _this.user_info_update_login_out(receiverId);
                            } else {
                                _this.findMessageInformation();

                                let type = "info";
                                if (messageData.notificationType.value == 2) {
                                    type = "success"
                                } else if (messageData.notificationType.value == 3) {
                                    type = "warning"
                                } else if (messageData.notificationType.value == 4) {
                                    type = "error"
                                } else if (messageData.notificationType.value == 1) {
                                    type = type
                                }
                                _this.$notify({
                                    title: messageData.title,
                                    message: messageData.content,
                                    type: type
                                });
                            }
                        }
                    });
                }, (err) => {
                    console.log(err);
                    // 断开重连机制,尝试发送消息,捕获异常发生时重连
                    setTimeout(() => {
                        _this.connection(userInfo);
                    }, 5000);
                });

                this.stompClient.debug = function (str) {
                    // // console.log("stompClient.debug:"+str + "\n");
                };
            },
            // 断开连接
            disconnect() {
                if (this.stompClient != null) {
                    this.stompClient.disconnect();
                }
            },
            // 更新消息数量
            updateMessageTypeInfo(message) {
                // 消息数据
                let messageData = JSON.parse(message.body);
                // 消息类型
                let messageTypes = this.messageInformation.messageTypeVOs;
                // 检查是否有消息内容
                if (messageData && messageTypes) {
                    // 循环设置消息数量
                    for (var i = 0; i < messageTypes.length; i++) {
                        let messageType = messageTypes[i];
                        if (messageType.messageTypeCode == messageData.type) {
                            messageType.totalMessages ++;
                            this.$notify.info({
                                title: '消息',
                                message: messageTypes.messageTypeName,
                                duration: 0
                            });
                            break;
                        }
                    }
                }
                this.messageInformation.messageTypes = messageTypes;
            },

            //退出
            logout() {
                this.$confirm("确定要退出吗?", "退出提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$loginApi.logout();
                    this.$router.push({ path: this.$context.loginPath });
                });
            },
            // 查看用户信息
            viewUserInfo() {
                //打开用户信息弹窗
                this.showDialogUserInfo = true;
            },
            // 修改密码
            editPassword() {
                //打开修改密码
                this.showDialogEditPwd = true;
                this.pwdForm.oldPwd = '';
                this.pwdForm.newPwd = '';
                this.pwdForm.confirmPwd = '';
            },
            //提交修改密码表单
            submitPwdForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        let pwdForm = {
                            oldPassword: this.$md5(this.pwdForm.oldPwd),
                            newPassword: this.$md5(this.pwdForm.newPwd),
                            confirmPassword: this.$md5(this.pwdForm.confirmPwd)
                        };
                        this.$userApi.editUserPsw(pwdForm).then(resp => {
                            if (resp.status == 500) {
                                this.$message.error(resp.message);
                                this.showDialogEditPwd = true;
                                return;
                            }
                            this.$message({
                                type: "success",
                                message: "修改密码成功！",
                            });
                            this.showDialogEditPwd = false;
                            this.$refs.editPwd.resetFields();
                        }).catch(err => {
                            this.showDialogEditPwd = true;
                            this.$refs.editPwd.resetFields();
                        });
                    }
                });
            },
            cancelEditPwd() {
                this.showDialogEditPwd = false;
                this.$refs.editPwd.resetFields();
            },
            closeDialog(done) {
                done();
                this.$refs.editPwd.resetFields();
            }
        },
        //初始化
        mounted() {
            this.initMessageMonitor();
            // 查询最新消息
            this.findMessageInformation();
        },
        //离开当前页面后执行
        destroyed: function () {
            this.disconnect();
        }
    };
</script>

<style lang="less" scoped>
    .tool-tip{
        word-wrap: break-word;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 120px;
        vertical-align: bottom;
        display: inline-block;
        text-align: right;
    }
    .notice {
        width: 70px;
        height: 56px;
        text-align: center;
        border-right: 1px solid #313d49;
        display: inline-block;
        float: right;
        position: relative;
    }
    .notice:hover {
        background-color: #324157;
        transition: all 0.6s ease-in-out 0s;
        -webkit-transition: all 0.6s ease-in-out 0s;
        -moz-transition: all 0.6s ease-in-out 0s;
        -o-transition: all 0.6s ease-in-out 0s;
        -ms-transition: all 0.6s ease-in-out 0s;
    }
    .el-icon-ijm-xiaoxizhongxin {
        font-size: 18px;
        color: #fff;
        vertical-align: middle;
    }
    .badge-item {
        position: absolute;
        top: -5px;
        right: 10px;
    }
    i.read-status {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-left: 15px;
        position: absolute;
        left: 0px;
        margin-top: 3px;
    }
    i.weidu {
        background: #f94040;
    }
    .message-title{
        font-size: 14px;
        color: #45494c;
        line-height: 14px;
        padding-top: 20px;
        padding-bottom: 10px;
        padding-left: 30px;
    }
    .message-detail{
        background-color: #f2f8fa;
        color: #72767a;
        font-size: 12px;
        padding: 8px 20px 16px 30px;
        line-height: 1.5;
    }
    .message-time{
        color: #72767a;
        font-size: 12px;
        line-height: 12px;
        padding-bottom: 19px;
        padding-left: 30px;
    }
    .ajm-pagination-bar{
        padding: 30px 0;
        float: right;
    }
</style>


