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

        <div>
          <el-badge :value= "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="12">
                <el-dropdown-item>标题</el-dropdown-item>
              </el-col>
              <el-col :span="12">
                <el-dropdown-item>类型</el-dropdown-item>
              </el-col>
            </el-row>
            <el-row v-for="item in msgInfo">
              <el-col :span="12">
                <el-dropdown-item class="region-item-style">{{ item.noticeTitle }}</el-dropdown-item>
              </el-col>
              <el-col :span="12">
                <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-row>
          </div>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
</template>

<script>

  export default {
    name: "message",
    data(){
        return{
          msgInfo: {}
        }
    },
    created(){
      //登录成功后创建websocket
      this.$websocket.initWebSocket("ws://localhost:8668/precisionEffect/webSocket/" + this.$store.state.user.roles.join(",") + "/" + this.$store.state.user.userId);
      this.$websocket.addEvent("onmessage",(msg) =>{
        console.log("您有新的消息请注意接收:", JSON.parse(msg.data));
        this.msgInfo = JSON.parse(msg.data);
        console
      })
    },
    methods:{

    }

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