<template>
  <div class="full-screen-btn-con">
    <Poptip trigger="hover" @click.native="showNotice">
      <Badge :count="noticeCount" :offset="offset">
        <Icon @click.native="showNotice" type="md-notifications" size="23"/>
      </Badge>
      <template #content>
      <div class="api">
        <p>有<span style="color: red">{{noticeCount}}</span>条未读消息,点击可查看详情</p>
      </div>
      </template>
    </Poptip>
    <!--<span style="font-size: 17px;margin-top: 10px;">消息</span>-->
    <Modal v-model="showNoticeModal" width="1100px" :closable="false">
      <noticeUserPage @delCount="delCount" :queryParams="{readState: '0'}"></noticeUserPage>
    </Modal>
  </div>
</template>

<script>
  import dictUtil from "../../../bc-dict/dict-util"
  import SockJS from "sockjs-client"
  import Stomp from "stompjs"
  import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from "../../../bc-config/constant"
  import { getNoticeUserNotReadCount } from "./noticeUser-api"
  import  noticeUserPage from "./noticeUser-list"
  //var ws = new WebSocket(MQTT_SERVICE);
  export default {
    name: 'Notice',
    components: {
      noticeUserPage
    },
    props: {
    },
    data (){
      return {
        noticeCount: 0,
        offset: [17,0],
        showNoticeModal: false,
        client: Stomp.client(MQTT_SERVICE),
      }
    },
    methods: {
       delCount(){
        if(this.noticeCount>0){
          this.noticeCount--
        }
      },
      showNotice () {
        this.showNoticeModal = true;
      },
      getUserNoticeCount () {
        getNoticeUserNotReadCount().then(res => {
          this.noticeCount = Number(res.data.result)
        }).catch(err => {
          console.log(err);
        });
      },
      onConnected: function(frame) {
        //订阅频道
        const fanout = "/exchange/exchange.pushToDesk";
        this.client.subscribe(fanout, this.responseCallback, this.onFailed);
      },
      onFailed: function(frame) {
        console.log("MQ Failed: " + frame);
        window.setTimeout(() => {
          this.connect();
        },3000)
      },
      responseCallback: function(frame) { //接收消息处理
        let body = JSON.parse(frame.body)
        //有指定消息接收人,并且不是当前登录用户,就不弹出,直接返回
        if (body.userIds && body.userIds.length>0){
          if (body.userIds.indexOf(this.$store.state.user.userId)==-1){
            return;
          }
        }
        //判断一下类型,如果是字典清缓存的,就清一下
        if (body.type === 'dictClearCache'){
          dictUtil.clearCache(body.dict)
        }
        //console.log("MQ msg=>" + frame.body);
        this.$Notice.info({
          title: body.title,
          desc: body.message,
          duration: 5
        });
      },
      connect: function() {
        //初始化mqtt客户端，并连接mqtt服务
        const headers = {
          login: MQTT_USERNAME,
          passcode: MQTT_PASSWORD,
        };
        this.client.connect(headers, this.onConnected, this.onFailed);
      },

    },
    created() {
      //如果开启了消息推送(默认开启)的话,建立一个长链接通道,等待消息的接收
      if(this.$config.deploymentStandAlone){

      }else {
        this.connect();
      }
    },
    mounted () {
      this.getUserNoticeCount();
      //this.connect();
    }
  }
</script>

<style lang="less">
  .full-screen-btn-con .ivu-tooltip-rel{
    height: 64px;
    line-height: 56px;
    i{
      cursor: pointer;
    }
  }
</style>
