<template>
    <div style="height:100%;min-width:200px;" class="MsgNotification msg-title-top-center" :style="{height:'100%',backgroundColor: FrameData.ContentSetting.ContentBg, opacity: FrameData.ContentSetting.Opacity}">    
         <div class="header" :style="titleStyles">{{FrameData.Title}}</div>
         <vue-scrollbar classes="my-scrollbar" ref="Scrollbar"  style="height:100%;width:100%" @mouseleave.native="onMouseout" @mouseenter.native="onMouseover" :style="{height:'100%',backgroundColor: FrameData.ContentSetting.ContentBg, opacity: FrameData.ContentSetting.Opacity}" class="MsgNotification">
             <msgContent :ContentSetting="FrameData.ContentSetting"></msgContent>
       </vue-scrollbar>
    </div>
</template>


<script>
    import {mapGetters, mapMutations} from "vuex";
    import msgContent from "./MsgContent.vue";
    import VueScrollbar from 'vue2-scrollbar';

    export default {
        props: ["itemId"],
        data: () => ({}),
        computed: {
            ...mapGetters([
                "getContentSettingById",
                "getHeight"
            ]),

            FrameData() {
                return {
                    Title: this.queryMsgNotification(this.itemId).NotificationTitle,
                    ContentSetting: this.getContentSettingById(this.itemId)
            };
    },
    wrapperHeight() {
      return this.getHeight(this.itemId);
    },
    titleStyles() {
      return {
        color: this.moduleStyleSettings.TitleColor,
        fontSize: this.moduleStyleSettings.TitleFontSize + "px",
        borderBottom:
          this.moduleStyleSettings.TitleBorderWidth +
          "px solid " +
          this.moduleStyleSettings.TitleBorderColor,
        'text-align':this.moduleStyleSettings.TitleAlign == 'center' ? 'center': 'left',
        'text-indent':this.moduleStyleSettings.TitleAlign == 'center'? '0px': '15px',
        backgroundColor: this.moduleStyleSettings.TitleBg
      };
    },
    moduleStyleSettings() {
      return this.$store.getters.getItemById(this.itemId).contentSetting;
    }
  },
  methods: {
    ...mapMutations(["initMsgNotificationById", "setNodeProp"]),
    queryMsgNotification(id) {
      let MsgNotification = this.$store.getters.getMsgNotification(id);
      if (!MsgNotification || MsgNotification.length === 0) {
        this.initMsgNotificationById(id);
      }
      let MsgNotificationProperty = this.$store.getters.getNodeProp(id);
      if (!MsgNotificationProperty || MsgNotificationProperty.length === 0) {
        let newMsgNotificationProperty = this.$store.getters.getMsgNotification(
          id
        ).MsgNotificationProperty;
        this.setNodeProp({
          id: id,
          MsgNotificationProperty: newMsgNotificationProperty
        });
      }
      return this.$store.getters.getNodeProp(id).MsgNotificationProperty;
            },
            oprShow(e) {

                e.stopPropagation();

                $(e.currentTarget)

                    .find("div.operations")

                    .show();

            },
            oprhide(e) {

                e.stopPropagation();

                $(e.currentTarget)

                    .find("div.operations")

                    .hide();

            },
            onMouseout: function(){
                $(this.$el).find('.vue-scrollbar__scrollbar-vertical').hide();
            },
            onMouseover: function(){
                $(this.$el).find('.vue-scrollbar__scrollbar-vertical').show();
            }
        },
        components: {
            msgContent,
            VueScrollbar
        },
        watch:{
            'wrapperHeight': function(val){
                this.scroll && this.scroll.refresh();
                this.onMouseout();
            },
        },
        destroyed(){
    this.scroll && this.scroll.destroy();
  }
};
</script>
<style scoped>
    .header {
        height: 50px;
        min-height:50px;
        width: 100%;
        line-height: 50px;
        text-align: center;
        color: #444444;
        font-size: 16px;
        border-bottom: 1px solid #e5e5e5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .msg-title-top-center{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
</style>