<template>
  <div class="imbox-c">
    <div v-for="(session, index) in data" :key="index">
      <div class="item" v-if="index<4">
        <img :src="session.avatar" />
        <div class="content">
          <div class="name-box">
            {{session.name}}
            <!-- <el-tag size="mini" style="margin-left:10px">{{$t('fnc.xiankong')}}</el-tag> -->
          </div>
          <div class="last-msg">{{session.lastMsgShow}}</div>
        </div>
        <i class="iconfont icon-chat send-msg" :title="$t('objFill.hetaliaoyx')" @click="openChart(session)"></i>
      </div>
    </div>
  </div>
</template>
<script>
import util from "../../utils";
import config from "../../configs";
export default {
  data() {
    return {
      data: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    openChart(obj) {
      this.MsgBus.$emit("enterChat", obj);//enterTeamChat enterChat
    },
    init() {
      this.data = this.$store.state.sessionlist.filter(item => {
        if (
          item.to === "684cb79fe92f46877777" ||
          item.to === "684cb79fe92f46888888"
        )
          return;

        let that = this;
        item.name = "";
        item.avatar = "";
        if (item.scene === "p2p") {
          let userInfo = null;
          if (item.to !== this.myPhoneId) {
            userInfo = this.userInfos[item.to];
          } else {
            return false;
          }
          if (userInfo) {
            item.name = util.getFriendAlias(userInfo);
            item.avatar = userInfo.avatar;
          }
        } else if (item.scene === "team") {
          let teamInfo = null;
          teamInfo = this.$store.state.teamlist.find(team => {
            return team.teamId === item.to;
          });
          if (teamInfo) {
            item.name = teamInfo.name;
            item.avatar =
              "http://yx-web.nos.netease.com/webdoc/h5/im/default-group.png";
          } else {
            item.name = this.$t('objFill.taolunzhu');
            item.avatar =
              "http://yx-web.nos.netease.com/webdoc/h5/im/default-group.png";
          }
          if (
            !this.$store.state.teamMembers[item.to] ||
            this.$store.state.teamMembers[item.to].length == 0
          ) {
            this.$store.dispatch("getTeamMembers", item.to);
          }
        }
        let lastMsg = item.lastMsg || {};
        if (lastMsg.type === "text") {
          item.lastMsgShow = lastMsg.text || "";
        } else if (lastMsg.type === "custom") {
          item.lastMsgShow = util.parseCustomMsg(lastMsg);
        } else if (
          lastMsg.scene === "team" &&
          lastMsg.type === "notification"
        ) {
          item.lastMsgShow = util.generateTeamSysmMsg(lastMsg);
        } else if (util.mapMsgType(lastMsg)) {
          item.lastMsgShow = `[${util.mapMsgType(lastMsg)}]`;
        } else {
          item.lastMsgShow = "";
        }
        if (item.updateTime) {
          item.updateTimeShow = util.formatDate(item.updateTime, true);
        }
        return item;
      });
    },
    sessionId() {
      let sessionId = this.$route.params.sessionId;
      return sessionId;
    },
    getsessionName() {
      let sessionId = this.sessionId;
      let user = null;
      if (/^p2p-/.test(sessionId)) {
        user = sessionId.replace(/^p2p-/, "");
        if (user === this.$store.state.userUID) {
          return this.$t('objFill.wodeshouji');
        } else if (this.isRobot) {
          return this.robotInfos[user].nick;
        } else {
          let userInfo = this.userInfos[user] || {};
          return util.getFriendAlias(userInfo);
        }
      } else if (/^team-/.test(sessionId)) {
        return this.$t('objFill.qun');
      }
    },
    scene() {
      return util.parseSession(this.sessionId).scene;
    },
    to() {
      return util.parseSession(this.sessionId).to;
    },
    // 判断是否是机器人
    isRobot() {
      let sessionId = this.sessionId;
      let user = null;
      if (/^p2p-/.test(sessionId)) {
        user = sessionId.replace(/^p2p-/, "");
        if (this.robotInfos[user]) {
          return true;
        }
      }
      return false;
    },
    robotInfos() {
      return this.$store.state.robotInfos;
    },
    msglist() {
      let msgs = this.$store.state.currSessionMsgs;
      return msgs;
    },
    key() {
      return this.$route.path + Math.random();
    },
    sysMsgUnread() {
      let temp = this.$store.state.sysMsgUnread;
      let sysMsgUnread = temp.addFriend || 0;
      sysMsgUnread += temp.team || 0;
      let customSysMsgUnread = this.$store.state.customSysMsgUnread;
      return sysMsgUnread + customSysMsgUnread;
    },
    canLoadMore() {
      return !this.$store.state.noMoreHistoryMsgs;
    },
    userInfos() {
      return this.$store.state.userInfos;
    },
    myInfo() {
      return this.$store.state.myInfo;
    },
    myPhoneId() {
      return `${this.$store.state.userUID}`;
    },
    teamList() {
      this.$store.state.teamlist.filter(x => {
        x.avatar =
          "http://yx-web.nos.netease.com/webdoc/h5/im/default-group.png";
        x.id = "team-" + x.teamId;
        x.scene = "team";
        x.to = x.teamId;
        return x;
      });
      return this.$store.state.teamlist;
    }
  }
};
</script>
<style scoped>
.imbox-c {
  position: absolute;
  top: 50px;
  bottom: 0px;
  left: 0;
  right: 0;
  overflow-y: auto;
}
.imbox-c .item {
  padding: 22px 47px 21px 36px;
  display: flex;
  align-items: center;
  cursor: default;
}
.imbox-c .item:hover {
  background: #f1f1f2;
}
.imbox-c .item img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-right: 28px;
}
.imbox-c .item .content {
  flex: 1;
  width: 284px;
}
.imbox-c .item .content .name-box {
  font-size: 14px;
  font-family: pingfangR;
  color: #2c3343;
}
.imbox-c .item .content .last-msg {
  font-size: 12px;
  color: #a2a4a7;
  width: 100%;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.imbox-c .item .send-msg {
  width: 28px;
  height: 28px;
  font-size: 24px;
  color: #ebedf4;
  cursor: pointer;
  margin-left: 20px;
}
.imbox-c .item:hover .send-msg {
  color: #5d78ff;
}
</style>