<template>
    <div class="instantMessage">
      <el-dropdown ref="dropDown" trigger="click" :popper-append-to-body="false" :hide-on-click="false" style="height: 30px">

        <div>
          <el-badge :value= "this.msgInfo.length>0 ? this.msgInfo.length : ''" :max="99" class="messageMark">
             <!--<i class="el-icon-chat-dot-round" />-->
                <i class="el-icon-message-solid messageDing"/>
           </el-badge>
        </div>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="this.msgInfo.length == 0">
            <span>暂无消息</span>
          </el-dropdown-item>
          <div v-if="this.msgInfo.length > 0">
            <el-row>
              <el-col :span="6">
                <el-dropdown-item>标题</el-dropdown-item>
              </el-col>
              <el-col :span="6">
                <el-dropdown-item>内容</el-dropdown-item>
              </el-col>
              <el-col :span="6">
                <el-dropdown-item>类型</el-dropdown-item>
              </el-col>
              <el-col :span="6">
                <el-dropdown-item>标记</el-dropdown-item>
              </el-col>
            </el-row>
            <el-row v-for="item in msgInfo">
              <el-col :span="6">
                <el-dropdown-item class="region-item-style">{{ item.noticeTitle }}</el-dropdown-item>
              </el-col>
              <el-col :span="6">
                <el-dropdown-item class="region-item-style" v-text="item.noticeTitle" />
              </el-col>
              <el-col :span="6">
                <el-dropdown-item v-if="item.noticeType == '1'">通知</el-dropdown-item>
                <el-dropdown-item v-if="item.noticeType == '2'">公告</el-dropdown-item>
              </el-col>
              <el-col :span="6">
                <el-dropdown-item><el-button type="text" @click="isRead(item.noticeId)">已读</el-button></el-dropdown-item>
              </el-col>
            </el-row>
          </div>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
</template>

<script>
  import { updateNotice } from "@/api/system/notice"
  export default {
    name: "message",
    data(){
        return{
          msgInfo: []
        }
    },
    created(){
      //登录成功后创建websocket
      if(!this.$websocket.isExsitWebsocket()){
        this.$websocket.initWebSocket(process.env.VUE_APP_WEBSOCKET_URL + this.$store.state.user.userId);
        this.$websocket.addEvent("onmessage",(msg) =>{
          if(msg.data){
            console.log("您有新的消息请注意接收:", JSON.parse(msg.data));
            this.msgInfo = JSON.parse(msg.data);
            this.$refs.dropDown.visible = false;
           /* let msgData = JSON.parse(msg.data);
            if(msgData instanceof Array){
              this.msgInfo = msgData;
            }else{
              this.msgInfo.push(msgData);
            }*/
          }
        });
      }
    },
    methods:{
      isRead(noticeId){
        updateNotice({noticeId:noticeId,status:"1"}).then(res =>{
          if(res.code == 200){
            this.$message.success("标记成功");
            this.msgInfo.splice(this.msgInfo.findIndex(item =>item.noticeId == noticeId),1);
            this.$refs.dropDown.visible = false;
          }else{
            this.$message.error("标记失败")
          }
        })
      }

    }

  }
</script>
<style>
  .region-item-style {
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .region-item-style:hover {
    white-space: normal; /* 显示全部 */
    overflow: visible; /* 取消超出隐藏 */
    max-width: none; /* 取消最大宽度 */
  }
</style>

<style scoped lang="scss">
  .instantMessage{
    display: inline;
    .messageMark{
      width: 25px;
      height: 60px;
      margin-right: 9px;
    }
    .messageDing{
      font-size: 28px;
      color: #5a5e66;
      position: relative;
      top: -5px;
    }
  }


</style>
