<template>
    <div>
        <ul class="msgNotifi">
            <li v-for="(value,index) in msgItems" :key="index" @mousedown="msgMd" @mouseup="msgMu(value)" @mousemove="msgMm" >
                <div class="msg-name"
                     v-bind:style="{fontSize : ContentSetting.PrimFontSize + 'px',color : ContentSetting.TitleColor}">
                    {{value.TaskId !== "system" && value.TaskId !==
                    "jcp-sys"?value.TaskTitle:(value.TaskId
                    === "system" ? "系统消息" : "管理员消息")}}
                </div>
                <div class="msg-title" v-html="value.NewestMsg.Title" @click.prevent="onTitleClick()"
                     v-bind:style="{fontSize : ContentSetting.DesFontSize + 'px',color : ContentSetting.DesColor}">
                    {{value.NewestMsg.Title}}
                </div>
                <div class="bottom">
                    <span v-if='value.TaskId !== "system" && value.TaskId !== "jcp-sys" && value.UserId !== "jcp-sys"'
                          class="msg-head">
                        <img :src="value.HeadingImg" class="msg-img"/>
                    </span>
                    <span v-else class="msg-head">
                        <img src="../../assets/images/sys_icon.png" class="msg-img">
                    </span>
                    <span class="msg-sender" v-bind:style="{fontSize : ContentSetting.DesFontSize + 'px',color : ContentSetting.DesColor}">
                        {{value.TaskId !== "system" && value.TaskId !== "jcp-sys" && value.NewestMsg.Sender != "jcp-sys" ? value.NewestMsg.Sender : "系统管理员"}}
                    </span>
                    <span class="msg-sendTime" v-bind:style="{fontSize : ContentSetting.DesFontSize + 'px', color : ContentSetting.DesColor}">
                        <Icon type="md-time" size="16" />{{processDateTimeShow(value.NewestMsg.SendTime)}}           
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import msgApi from "../../api/message.js";
import { openMessage } from "./msgUtils.js";

export default {
  name: "MsgContent",
  props: ["ContentSetting"],
  data: () => ({
    msgItems: [],
    msgmdown: false,
    canOpenDetail: true,
    designMode: true
  }),
  computed: {},
  mounted() {
    let self = this;
    msgApi.getMessages("", function(result) {
      if (!result || !result.MsgInfos) return;
      self.msgItems = result.MsgInfos;
      self.$emit("scroll");
    });
  },
  methods: {
    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;
    },
    openMsgDetail(value) {
      openMessage(this, value);
    },
    msgMd() {
      this.msgmdown = true;
    },
    msgMm() {
      //   if (this.msgmdown) {
      //     this.canOpenDetail = false;
      //   }
    },
    msgMu(value) {
      if (this.designMode) {
        return;
      }
      this.msgmdown = false;
      if (!this.canOpenDetail) {
        this.canOpenDetail = true;
      } else {
        openMessage(this, value);
      }
    },

    onTitleClick(e) {
      event.preventDefault();
      return false;
    }
  },
  created() {
    this.designMode = this.$store.getters.getDesignModel;
  },
  components: {}
};
</script>
<style scoped>
ul.msgNotifi {
  list-style: none;
  max-width: inherit;
  max-height: inherit;
}

ul.msgNotifi li {
  border-bottom: 1px solid #ebebeb;
  cursor: pointer;
  padding-left: 24px;
  padding-top: 13px;
  max-width: inherit;
  max-height: 130px;
}

ul.msgNotifi li .msg-name,
ul.msgNotifi li .msg-title {
  width: 100%;
  padding-bottom: 9px;
  text-align: left;
  max-height: 30px;
}

ul.msgNotifi li .msg-title a {
  color: rgb(98, 98, 98);
}

ul.msgNotifi li .msg-head {
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  /*background-color: #dcdcdc;*/
}

ul.msgNotifi li .msg-img {
  display: inline-block;
  border-radius: 30px;
  width: 30px;
  height: 30px;
}

ul.msgNotifi li .bottom {
  display: inline-block;
  width: 100%;
}

ul.msgNotifi li .msg-sender {
  max-width: 249px;
  font-size: 12px;
  font-family: Microsoft YaHei, serif;
  /*color: #b0b0b0;*/
  float: left;
  height: 30px;
  line-height: 30px;
  padding-left: 8px;
}

ul.msgNotifi li .msg-sendTime {
  height: 30px;
  line-height: 30px;
  float: right;
  margin-right: 2%;
}
</style>