<template>
  <div class="msg-count">
    <msg-count-tips
    @mousedown.native="onShowDetailMsgs" 
    :groupId="groupId" 
    :position="tipsStyles" 
    :needReload="true"
    ></msg-count-tips>
    <msg-list
    v-show="showDetail" 
    :style="detailStyles" 
    @mouseleave.native="onHideDetailMsgs" 
    :groupId="groupId" 
    :configs="detailStyles">
    </msg-list>
  </div>
</template>

<script>
import msgApi from "../../api/message.js";
//import {InitHub} from "@libs/websocket/hubs.js";
import VueScrollbar from 'vue2-scrollbar';
import MsgList from "./MsgList.vue";
import MsgCountTips from "./MsgCountTips.vue"

export default {
  props: ['groupId', 'userId', 'containerOffset'],
  data: () => ({   
    showDetail: false,
  }),
  created() {
  },
  mounted(){   
  },
  components:{
    "vue-scrollbar": VueScrollbar,
    "msg-list": MsgList,
    "msg-count-tips": MsgCountTips
  },
  computed: {
    msgDetailContentSetting(){
      return {
        width: 318,
        height: 338,
        PrimFontSize: 14,
        DesFontSize: 12,
        TitleColor: '#cecece',
        DesColor: '#ccc',
        ContentBg: "#fff",     
      }
    },

    tipsStyles(){
      let self = this;
      let containerOffset = $.extend({top:0, left:0}, self.containerOffset); 
      return {
        top: containerOffset.top - 10,
        left: containerOffset.left + containerOffset.width + 10
      }
    },

    detailStyles(){
      let self = this;
      let containerOffset = $.extend({}, self.containerOffset);     
      return {
        top: containerOffset.top + containerOffset.height - 10 + "px",
        left: containerOffset.left + containerOffset.width - self.msgDetailContentSetting.width/2 + "px",
        width: self.msgDetailContentSetting.width + "px",
        height: self.msgDetailContentSetting.height + "px",
        border: "1px solid rgb(233,233,233)",
      }
    },
  },
  watch: {

  },
  methods: {

    initWebSocket(){
        let self = this;
        InitHub();

        let commonHub = $.connection.commonHub;
        $.connection.hub.start({ pingInterval: null }).done(function () {
            commonHub.server.connectServer(self.userId);
        });
        
        commonHub.client.broadcastMessage = function (message) {
            if (!message) return;
            self.addUnReadMsgCount(message.GroupId, 1);         
        }
    },

    loadTaskMsg(){
      let self = this;
      msgApi.getMessages("", function(result) {
        if (!result || !result.MsgCounts) return;
        self.allTypeMsgCounts = result.MsgCounts;
      });
    },

    getMsgCountByGroup(msgCounts, groupId){
      if(!msgCounts || msgCounts.length == 0){
        return 0;
      }
      if(!groupId){           
        let total = 0;
        for (let item in msgCounts) {
          total += msgCounts[item];
        }
        return total;
      }
      for (let item in msgCounts) {
        if(item === groudId)
          return msgCounts[item];
      }
      return 0;
    },

    addUnReadMsgCount(groupId, count) {
      if (!groupId || count === 0) return;
      
      let data = this.allTypeMsgCounts;
      if (!data[groupId]) {
        data[groupId] = count;
        return;
      }

      for (let item in data) {
        if (item === groupId) {
            data[item] += count;
            break;
        }
      }
    }, 
    
    onShowDetailMsgs(){
      this.showDetail = true;
    },

    onHideDetailMsgs(){
      this.showDetail = false;
    }
  }
};
</script>
<style lang="less" scoped>
  .msg-count{
    position: absolute;
    top: 0;
    left: 0;
  }
</style>