<template>
    <div class="msg-list">
      <vue-scrollbar :style="{height:scrollHeight}">    
        <ul class="msg-list-content">
            <li v-for="(value,index) in cacheMsgItems" :key="index" @mousedown="onGotoDetail(value)">
              <span class="infor-icon" v-if='value.TaskId !== "system" && value.TaskId !== "jcp-sys" && value.UserId !== "jcp-sys"'>
                  <img :src="value.HeadingImg">                  
              </span>
              <span class="infor-icon" v-else>
                  <img src="../../assets/images/sys_icon.png" />
              </span>
              <msg-count-tips :groupId="value.TaskId" :position="tipsStyle"></msg-count-tips>
              <div class="infor-detail">
                <span class="infor-title">
                    {{value.TaskId !== "system" && value.TaskId !==
                    "jcp-sys"?value.TaskTitle:(value.TaskId
                    === "system" ? "系统消息" : "管理员消息")}}
                </span>
                <span class="infor-date">{{processDateTimeShow(value.NewestMsg.SendTime)}}</span>
              </div>
              <div class="infor-detail">
                <span class="infor-intro" v-html="value.NewestMsg.Title">
                </span> 
              </div>
            </li>
        </ul>
      </vue-scrollbar>
      <div class="msg-operations">
          <span class="msg-list-btn-ignore" @click="onIgnoreAll">忽略全部</span>
          <span class="msg-list-btn-detail" @click="onGotoDetail">查看全部</span>
      </div>
    </div>
</template>

<script>
import msgApi from "../../api/message.js";
import { openMessage } from "./msgUtils.js";
import VueScrollbar from 'vue2-scrollbar';
import MsgCountTips from './MsgCountTips';
import {mapGetters, mapMutations, mapActions} from "vuex";

export default {
    data(){
        return {
          useStore: false,
          msgItems: [],
        };
    },
    props:["configs"],
    components:{
        "vue-scrollbar": VueScrollbar,
        "msg-count-tips": MsgCountTips
    },
    created(){

    },
    mounted(){
      this.useStore = this.$store !== undefined;

      if(!this.useStore && Object.keys(this.msgItems) === 0){
        this.loadTaskMsg();
        return;
      }

      if(this.useStore && (!this.getMsgInfos() || Object.keys(this.getMsgInfos()).length === 0)){
        this.loadMsgsByGroup();
        return;
      }
    },
    methods:{
      loadTaskMsg(){
        let self = this;
        msgApi.getMessages("", function(result) {
          if (!result || !result.MsgInfos) return;
          self.msgItems = result.MsgInfos;
        });
      },
      processDateTimeShow(dateTime) {
        if (!dateTime) return "时间不详";
        if (dateTime.indexOf("T") > 0) {
          dateTime = dateTime.replace("T", " ");
        }
        dateTime = dateTime.replace(/-/g, "/");

        var showTime = dateTime;
        var today = new Date();
        var curYear = today.getFullYear();
        var curMonth = today.getMonth() + 1;
        var curDate = today.getDate();

        var mdate = new Date(dateTime);
        var msgYear = mdate.getFullYear();
        var msgMonth = mdate.getMonth() + 1;
        var msgDate = mdate.getDate();

        var msgMin = mdate.getMinutes();
        if (msgMin < 10) {
          msgMin = "0" + msgMin;
        }

        if (curYear === msgYear) {
          if (curMonth === msgMonth && curDate === msgDate) {
            showTime = mdate.getHours() + ":" + msgMin;
          } else {
            var t = today.getTime() - 1000 * 60 * 60 * 24;
            var yesterday = new Date(t);
            var yesMonth = yesterday.getMonth() + 1;
            var yesDate = yesterday.getDate();
            if (
              curYear === msgYear &&
              curMonth === yesMonth &&
              msgDate === yesDate
            ) {
              showTime = "昨天 " + mdate.getHours() + ":" + msgMin;
            } else {
              showTime =
                msgMonth + "-" + msgDate + " " + mdate.getHours() + ":" + msgMin;
            }
          }
        } else {
          showTime = msgYear + "-" + msgMonth + "-" + msgDate;
        }
        return showTime;
      },
      onIgnoreAll(){
        let self = this;
        this.ignoreMsgCount();
        setTimeout(() => {
          self.$Message.success('已忽略全部消息');
        }, 300);                
      },
      onGotoDetail(value){
        openMessage(this, value);
      },
      ...mapActions(['ignoreMsgCount','loadMsgsByGroup'])
    },
    computed:{
      scrollHeight(){
        return (!this.configs || !this.configs.height) ? 
        '100%' 
        : (this.configs.height.replace(/px/,'') - 38) + 'px';
      },
      tipsStyle(){
        return {
          top: -18,
          left: 44
        }
      },
      cacheMsgItems(){
        if(!this.useStore){
            return this.msgItems;
        }
        return this.getMsgInfos();
      },
      ...mapGetters(['getMsgInfos']),
    },

}
</script>

<style lang="less" scoped>
.msg-list {
    position: absolute;
    overflow: hidden;
}
.msg-list ul{
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    overflow: hidden;
    li {
      position: relative;
      width: 100%;
      height: 76px;
      border-bottom: 1px solid #ececec;
      cursor: pointer;
      padding-left: 12px;
      &:hover{
          background:#f8f8f8;
      }
    }
}
.infor-icon {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    float: left;
    margin-top: 16px;
    img{
        width:44px;
        height:44px;
        display: block;
        border-radius: 30px;
    }
}
.infor-detail {
    width: 245px;
    height: 26px;
    float: left;
    margin-top: 8px;
    font-family: 微软雅黑;
    overflow: hidden;
    line-height: normal;
    .infor-title {
      display: inline-block;
      width: 165px;
      height: 20px;
      font-size: 15px;
      color: #333;
      padding-left: 10px;
      position: relative;
      top: 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .infor-date {
      float: right;
      color: #868686;
      font-size: 12px;
      position: relative;
      top: 10px;
      margin-right: 10px;
    }
    .infor-intro {
      display: inline-block;
      width: 205px;
      height: 20px;
      padding-left: 10px;
      color: #878686;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 12px;
    }
}
.msg-operations {
    width: 100%;
    font-size: 13px;
    padding: 0 10px;
    line-height: normal;
    height: 38px;
    background:#fff;
    .msg-list-btn-ignore {
      color: #878686;
      position: relative;
      top: 10px;
      cursor: pointer;
      &:hover{
        color:#333;
      }
    }
    .msg-list-btn-detail {
      float: right;
      color: #1fa7de;
      position: relative;
      top: 10px;
      cursor: pointer;
      &:hover{
          color:#2E9ED0;
      }
    }
}


</style>

