<template>
  <div class="news-message-item flex-default" @click="goDetails">
    <div
      class="m-icon picture"
      :style="{ 'background-image': 'url(' + getgroup.customerImage + ')' }"
    />
    <div class="content flex-default">
      <div class="content-con flex-default">
        <div class="name">
          {{ getgroup.customerName }}
        </div>
        <div class="time">
          {{ getSendTime | FormatTime }}
        </div>
      </div>
      <div class="content-con flex-default">
        <div class="message name">
          {{ getContent }}
        </div>
        <div class="num-con time flex-default">
          <div class="num" v-show="itemData.newsNumber > 0">
            {{ itemData.newsNumber }}
          </div>
          <!-- <div class="spot" /> -->
          <!-- 		<div class="spot" v-show="itemData.status===0" />
					<div class="spot" v-show="itemData.status===1" />
					<div class="num" v-show="itemData.status===2">222</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatTime } from "@/utils/common.js";
import { mapState } from "vuex";
import { ChatMsgStatus, ChatMsgType } from "@/enums";
export default {
  props: ["itemData", "index"],
  data() {
    return {};
  },
  computed: {
    ...mapState(["accountInfo"]),
    getSendTime() {
      try {
        let messageList = this.itemData.messageList.filter((x) => {
          return x.msgType !== 120;
        });
        return messageList[messageList.length - 1].sendTime;
      } catch (e) {
        return " ";
      }
    },
    getContent() {
      try {
        let messageList = this.itemData.messageList.filter((x) => {
          return x.msgType !== 120;
        });
        if (messageList[messageList.length - 1].msgType === ChatMsgType.TEXT) {
          return messageList[messageList.length - 1].content;
        } else if (
          messageList[messageList.length - 1].msgType === ChatMsgType.IMAGE
        ) {
          return "图片";
        } else if (
          messageList[messageList.length - 1].msgType === ChatMsgType.VIDEO
        ) {
          return "视频";
        }
      } catch (e) {
        return " ";
      }
    },
    getgroup() {
      if (this.itemData && this.itemData.group) {
        return this.itemData.group;
      } else {
        return {};
      }
    },
    getnewsNumber() {
      return this.itemData.newsNumber;
    },
  },
  filters: {
    FormatTime(val) {
      if (typeof val === "number") {
        return formatTime(new Date(val), "MM-dd");
      } else {
        return "";
      }
    },
  },
  methods: {
    goDetails() {
      this.$emit("readMessage", this.index);
      let customer = {
        customerName: this.getgroup.customerName,
        customerImage: this.getgroup.customerImage,
      };
      let query = {
        toId: this.getgroup.groupId,
        type: "fromList",
        customer: JSON.stringify(customer),
      };
      this.$router.push({ name: "customer-service-chat", query });
    },
  },
};
</script>

<style lang="less">
.news-message-item {
  height: 85px;
  padding: 0 16px;
  align-items: center;
  .picture {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #eaeaea;
    flex-shrink: 0;
    margin-right: 10px;
  }
  .content {
    flex-shrink: 1;
    width: calc(~"100% - 55px");
    border-bottom: 1px solid #f5f7fb;
    padding: 20px 0;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    .content-con {
      width: 100%;
      align-items: center;
      justify-content: space-between;
    }
    .content-con {
      &:first-of-type {
        margin-bottom: 4px;
      }
      .name {
        font-size: 14px;
        color: #140603;
        font-weight: bold;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time {
        font-size: 12px;
        color: #afafaf;
        flex-shrink: 0;
        margin-right: 12px;
        line-height: 17px;
      }
      .message {
        font-size: 12px;
        color: #999999;
        font-weight: normal;
      }
      .num-con {
        width: 43px;
        line-height: 17px;
        align-items: flex-end;
        height: 17px;
        justify-content: flex-end;
        .spot {
          width: 7px;
          height: 7px;
          background-color: #dd2e41;
          border-radius: 50%;
        }
      }
      .num {
        height: 17px;
        line-height: 17px;
        min-width: 17px;
        background-color: #dd2e41;
        border-radius: 8px;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        padding: 0 5px;
        max-width: 43px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
