<template>
  <div class="list-wrap">
    <div class="search">
      <el-input
        v-model.trim="keyword"
        size="mini"
        placeholder="请输入用户昵称"
        clearable
      />
      <el-button type="primary" size="mini" @click="searchMsg">搜索</el-button>
    </div>
    <ul
      v-infinite-scroll="getPrivateChatList"
      class="news-list"
      :infinite-scroll-disabled="disabled"
      infinite-scroll-immediate="false"
    >
      <li
        v-for="item in filterList"
        :key="item.id"
        @click="toPrivateChat(item)"
      >
        <div class="left">
          <div class="portrait">
            <!-- <el-badge is-dot class="item"
              ><img :src="defaultAvatar.student" alt="" />
            </el-badge> -->
            <img :src="defaultAvatar.student" alt="" />
          </div>
          <div class="user-info">
            <p>
              {{ item.userType !== 2 ? item.privateUserName : item.userName }}
            </p>
            <p v-if="item.contentType === 1">{{ item.content }}</p>
            <p v-if="item.contentType === 2">[图片]</p>
          </div>
        </div>
        <div class="time">
          {{ item.createTime | timefilter }}
        </div>
      </li>
    </ul>
    <p v-if="loading" class="load-tip">加载中...</p>
    <p v-if="!hasNext" class="load-tip">没有更多了...</p>
    <p v-else-if="!loading && hasNext" class="load-tip">下拉加载更多...</p>
  </div>
</template>
<script>
import { getPrivateChatList } from "@/api/circle.js";
import dayjs from "dayjs";
export default {
  filters: {
    timefilter(date) {
      return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  props: {
    groupId: {
      type: Number
    },
    privateNewMsg: {
      type: Object
    }
  },
  data() {
    return {
      defaultAvatar: {
        teacher: require("@/assets/images/defaultAvatar/teacher.png"),
        student: require("@/assets/images/defaultAvatar/student.png"),
        assistant: require("@/assets/images/defaultAvatar/assistant.png")
      },
      userIdsMsgObj: {}, // 已用户id未key
      filterList: [],
      list: [],
      params: {
        current: 0,
        id: null,
        size: 10
      },
      keyword: "",
      loading: false,
      hasNext: true
    };
  },
  computed: {
    disabled() {
      return this.loading || !this.hasNext;
    }
  },
  watch: {
    groupId(value) {
      this.params.id = value;
      this.keyword = "";
      this.getPrivateChatList();
    },
    privateNewMsg(msg) {
      if (this.userIdsMsgObj[msg.privateUserId]) {
        Object.assign(this.userIdsMsgObj[msg.privateUserId], msg);
        this.$set(this.userIdsMsgObj[msg.privateUserId], "newMsgTip", true);
      } else {
        this.list.unshift(msg);
        this.$set(this.userIdsMsgObj[msg.privateUserId], "newMsgTip", true);
      }
      this.list = this.list.sort((x, y) => {
        return (
          new Date(y.createTime).getTime() - new Date(x.createTime).getTime()
        );
      });
      this.filterList = this.list;
    }
  },
  methods: {
    toPrivateChat(item) {
      this.$emit("toPrivateChat", item);
    },
    async getPrivateChatList() {
      this.loading = true;
      this.params.current++;
      const ret = await getPrivateChatList(this.params).catch(() => {
        this.loading = false;
      });
      if (ret && ret.code === 0 && ret.data.list) {
        let list = ret.data.list;
        list = ret.data.list.sort((x, y) => {
          return (
            new Date(y.createTime).getTime() - new Date(x.createTime).getTime()
          );
        });
        list.forEach(item => {
          this.userIdsMsgObj[item.privateUserId] = item;
        });
        this.list = this.list.concat(list);
        this.filterList = this.list;
        this.hasNext = ret.data.list.length === this.params.size;
      }
      this.loading = false;
    },
    async searchMsg() {
      this.params.current = 0;
      await this.getPrivateChatList();
      // if (this.keyword) {
      //   this.filterList = this.list.filter(item => {
      //     const userName =
      //       item.userType !== 2 ? item.privateUserName : item.userName;
      //     return userName.includes(this.keyword);
      //   });
      // }
    }
  }
};
</script>
<style lang="scss" scoped>
.list-wrap {
  height: 600px;
  overflow-y: scroll;
  background: #fff;
}
.search {
  display: flex;
  margin-bottom: 10px;
  .el-input {
    margin-right: 10px;
  }
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  list-style: none;
  padding: 10px;
  li {
    display: flex;
    border-bottom: 1px dashed #999;
    cursor: pointer;
    padding: 8px 0;
    .left {
      display: flex;
      flex: 1;
    }
    .portrait {
      ::v-deep .el-badge,
      img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }
      margin-right: 6px;
    }
    .user-info {
      p {
        font-size: 14px;
        margin: 0;
        line-height: 14px;
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      p:nth-child(1) {
        margin-bottom: 6px;
      }
    }
    .time {
      width: 150px;
      font-size: 14px;
    }
  }
}
.load-tip {
  text-align: center;
  line-height: 50px;
}
</style>
