<template>
  <div class="message-bell" @mouseenter="iconMouseEnter" @mouseleave="iconMouseLeave">
    <div class="bell-wrap" @click="iconClickFunc">
      <img class="bell" :src="bellIcon">
      <span class="bell-text" v-if="newMessageNum&&newMessageNum!=0">{{ newMessageNum&&newMessageNum>99?'+99':newMessageNum }}</span>
    </div>
    <div v-if="messageListShow" class="bell-message">
      <div class="bell-main">
        <div class="arrow-tip" />
        <div class="bell-message-title">
          <span>{{ title||"标题" }}</span>
        </div>
        <div v-loading="isLoading" class="bell-message-main">
          <div v-if="messageList && messageList.length>0" class="message-list">
            <div class="bmm-list">
              <div v-for="(item,index) in messageList" :key="index" class="item">
                <div class="item-main" @click="itemClickFunc(item)">
                  <div class="item-title">
                    {{ getTitle(item.title) }}
                  </div>
                  <div class="item-time">
                    {{ item.pushTime | moment('YYYY-MM-DD  HH:mm') }}
                  </div>
                </div>
              </div>
              <div class="more-meaasge">
                <span @click="moreClickFunc">查看更多&gt;&gt;</span>
              </div>
            </div>
          </div>
          <div v-else class="no-message-data">
            {{ noDataText||"暂未收到新消息" }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bellIcon from './assets/bell.png'
export default {
  name: 'MessageBell',
  props: {
    noDataText: {
      type: String,
      default: '暂未收到新消息'
    },
    title: {
      type: String,
      default: '消息中心'
    },
    titleMaxLength: {
      type: Number,
      default: 15
    },
    httpMethods: {
      type: Function,
      default: null
    }
  },
  data() {
    return ({
      isLoading: true,
      newMessageNum: 0,
      bellIcon: bellIcon,
      messageListShow: false,
      messageList: []
    })
  },
  watch:{
    messageListShow(val){
      const _this = this
      if(val){
         _this.getUnreadMsgList()
      }
    }
  },
  mounted() {
    const _this = this
    _this.findUnreadCount()
  },
  methods: {
    // 未读消息条数
    findUnreadCount() {
      const tmpParams = {
        url: '/admin/v1/operation/message/findUnreadCount',
        method: 'post'
      }
      const _this = this
      _this.httpMethods(tmpParams)
        .then(res => {
          _this.newMessageNum = res.data || 0
        })
        .catch(() => {
          _this.newMessageNum = 0
        })
    },
    // 获取未读消息列表,最多展示5条
    getUnreadMsgList() {
      const data = {
        pageNum: 1,
        pageSize: 5,
        state: 0// 1已读，0未读。null全部
      }
      const tmpParams = {
        url: '/admin/v1/operation/message/list',
        method: 'post',
        data
      }
      const _this = this
      _this.httpMethods(tmpParams)
        .then(res => {
          _this.messageList = res.data.items || []
          _this.isLoading = false
        })
        .catch(() => {
          _this.isLoading = false
        })
    },
    //  标题最长15个字符
    getTitle(title) {
      const _this = this
      if (title && _this.titleMaxLength && title.length > _this.titleMaxLength) {
        return title.substring(0, _this.titleMaxLength) + '...'
      } else {
        return title || ''
      }
    },
    iconMouseEnter() {
      const _this = this
      _this.messageListShow = true
    },
    iconMouseLeave() {
      const _this = this
      _this.messageListShow = false
    },
    goUnreadPage() {
      const newPageName = window.origin + '/mc/message-center/unread'
      window.location.href = newPageName
    },
    iconClickFunc() {
      const _this = this
      if (_this.iconClick) {
        _this.iconClick()
      } else {
        _this.goUnreadPage()
      }
    },
    moreClickFunc() {
      const _this = this
      if (_this.moreClick) {
        _this.moreClick()
      } else {
        _this.goUnreadPage()
      }
    },
    itemClickFunc(item) {
      const _this = this
      const newPageName = window.origin + '/mc/message-center/msg-details'
      window.location.href = newPageName+'?parentRouteName=unread&id='+item.id
      _this.$emit('itemClick', item)
    }

  }

}
</script>

<style lang='scss'>
.message-bell{
  position: relative;
  display: inline-block;
  font-size: 14px;
  margin-right:20px;
  .bell-wrap{
    display: inline-block;
    position: relative;
    cursor: pointer;
    .bell{
      width:32px;
      height:32px;
      border-radius: 20px;
      padding: 2px;
      background: #001529;
    }
    .bell-text{
      transform: scale(0.75, 0.75);
      -webkit-transform: scale(0.75, 0.75);
      -moz-transform: scale(0.75, 0.75);
      -o-transform:scale(0.75, 0.75);
      cursor: pointer;
      position:absolute;
      top: -10px;
      right: -6px;
      width:26px;
      height:26px;
      line-height: 26px;
      border-radius: 50%;
      background: #ff0000;
      color: #ffffff;
      font-size: 12px;
      text-align: center;
    }
  }
  .bell-message{
    position: absolute;
    width: max-content;
    right:-10px;
    .bell-main{
      position: relative;
      background: #fff;
      min-width: 250px;
      max-width: 400px;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      z-index: 2000;
      color: #606266;
      line-height: 1.4;
      text-align: justify;
      font-size: 14px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      word-break: break-all;
      .arrow-tip{
        position: absolute;
        top:-6px;
        right:20px;
        width:0;
        height:0;
        border-width: 0 6px 6px;
        border-style:solid;
        border-color:transparent transparent #a8a9ab;/*透明 透明  灰*/
        &::after{
           display:block;
            width:0;
            height:0;
            border-width: 0 6px 6px;
            border-style:solid;
            border-color:transparent transparent #ebecec;/*透明 透明  黄*/
            position:absolute;
            top:0px;
            left:-6px;
            content:"   "
        }
      }
      .bell-message-title{
        background: #ebecec;
        padding: 10px 20px;
        border-radius: 3px 3px 0 0;
        font-size: 15px;
      }
      .bell-message-main{
        padding: 0 12px;
        display: flex;
        flex-direction: column;
        .bmm-list{
          padding: 10px 3px;
          .item{
            border-bottom: 2px solid #ebecec;
            padding: 8px 3px;
            cursor: pointer;
            .item-title{
              font-size: 14px;
              color: #001529;
            }
            .item-time{
              padding-top:2px;
              font-size: 12px;
            }
          }
        }
        .more-meaasge{
          text-align: center;
          padding: 10px 0 0;
          font-size: 13px;
          cursor: pointer;
          span{
            padding: 0 5px;
          }
        }
        .no-message-data{
          flex:1;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px 0;
        }
      }
    }
  }
}
</style>
