<!-- 聊天列表 -->
<template>
  <div>
    <!-- {{ searchedChatlist }} -->
    <ul style="overflow: auto;height: 87vh;">
      <li
        v-for="(item,index) in searchedChatlist"
        :key="index"
        class="sessionlist"
        :class="{ active: item.orderid === selectId }"
        @click="redSession(item)"
      >
        <div class="list-left">
          <!-- <img
            class="avatar"
            width="42"
            height="42"
            src="https://p1.ssl.qhimgs1.com/t01f1a752c5c6e75077.jpg"
          > -->
          <el-badge v-if="item.is_read == 0 " :key="index" is-dot class="item">
            <el-avatar icon="el-icon-user-solid" />
          </el-badge>
          <el-avatar v-if="item.is_read == 1 " icon="el-icon-user-solid" />

          <!-- <el-avatar v-if="item.id != selectId"> 患者 </el-avatar> -->
        </div>
        <div class="list-right">
          <p class="name">{{ item.content }}</p>
          <!-- <span class="time">{{ item.createtime | time }}</span> -->
          <p class="lastmsg">{{ item.createtime }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
      lists: 523
    }
  },
  computed: {
    ...mapState(['selectId', 'searchText']),
    ...mapGetters(['searchedChatlist'])
  },
  methods: {
    ...mapActions(['selectSession', 'get_watch']),
    redSession(item) {
      this.selectSession(item.orderid)
      this.get_watch(true)
      setTimeout(() => {
        const ids = this.$route.query.id
        this.$emit('AskgetList', ids)
      }, 500)
    }
  },

  // eslint-disable-next-line vue/order-in-components
  filters: {
    // 将日期过滤为 hour:minutes
    time(date) {
      if (typeof date === 'string') {
        date = new Date(date)
      }
      if (date.getMinutes() < 10) {
        return date.getHours() + ':0' + date.getMinutes()
      } else {
        return date.getHours() + ':' + date.getMinutes()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.msglist {
  height: 540px;
  overflow-y: auto;

  .sessionlist {
    display: flex;
    padding: 12px;
    transition: background-color 0.1s;
    font-size: 0;

    &:hover {
      background-color: rgb(220, 220, 220);
    }

    &.active {
      background-color: #c4c4c4;
    }

    .avatar {
      border-radius: 2px;
      margin-right: 12px;
    }

    .list-right {
      position: relative;
      flex: 1;
      margin-top: 4px;
    }

    .name {
      display: inline-block;
      vertical-align: top;
      font-size: 14px;
    }

    .time {
      float: right;
      color: #999;
      font-size: 10px;
      vertical-align: top;
    }

    .lastmsg {
      position: absolute;
      font-size: 12px;
      width: 130px;
      height: 15px;
      line-height: 15px;
      color: #999;
      bottom: 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>