<!-- 会话记录 -->
<template>
    <div class="imRecord-wrapper">
        <header class="header">
            <Input search placeholder="搜索" @input="searchList" style="width: 90%;padding-left:5px;" v-model="keyWord" @on-search="searchList" />
        </header>
        <main class="main">
            <div v-if="chatDataList.length > 0" class="item-list">
                <div class="item" v-for="(tmpEn, index) in chatDataList" :key="index" @click="selectChat(tmpEn, index)" v-bind:class="{ active: index == selectIndex}">
                    <!-- <div class="followicon-wrapper">
                        <i class="iconfont icon-zhidingwujiaoxing position-h-v-mid"></i>
                    </div> -->
                    <!-- 客户端头像 -->
                    <div class="platicon-wrapper">
                        <!-- <div class="header-img position-h-v-mid" v-if="tmpEn.messageList[0]">{{tmpEn.messageList[0].fromImage}}</div> -->
                        <Icon class="header-img position-h-v-mid" type="md-contact" size="30" />
                        <!-- <div class="header-img position-h-v-mid" :class="getBgClass(tmpEn.clientChatName)">{{tmpEn.clientChatName.substr(0,1)}}</div> -->
                    </div>
                    <div class="info-wrapper">
                        <p class="first-p">
                            <span class="name">{{tmpEn.group.userName}}</span>
                            <span class="lastMsgTime">{{getLastMsgTimeStr(tmpEn.group.updateTime)}}</span>
                        </p>
                        <p class="second-p">
                            <span class="lastMsgContent" v-if="tmpEn.messageList.length">{{getContent(tmpEn)}}</span>
                              <Badge :count="tmpEn.newsNumber">
                             </Badge>
                        </p>
                    </div>
                </div>
            </div>
            <div v-else-if="storeCurrentChatEnlist.length==0" class="empty-wrapper">
                <div class="content">
                    <i class="iconfont fa fa-commenting-o"></i>
                    <p class="title">当前没有会话</p>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { formatTime } from '../../../libs/ali-oss'
import { ChatMsgType } from '@/enums'
export default {
  props: {
    chatDataList: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      storeCurrentChatEnlist: [], // 当前会话列表
      selectIndex: 0,
      lastMsg: null,
      path: 'ws://172.22.16.133:8090/mallcustomer/ws/',
      keyWord: '',
      listData: [
      ],
      scoketList: {

      },
      socket: null
    }
  },
  computed: {
    newList () {
      let arr = this.chatDataList.map((item, index) => {
        let { group, messageList, ...other } = item
        if (this.lastMsg && group.groupId === this.lastMsg.toId) {
          messageList.push(this.lastMsg)
          return {
            group,
            messageList,
            ...other
          }
        } else {
          return {
            group,
            messageList,
            ...other
          }
        }
      })
      console.log(arr)
      return arr
    }
    // customerId () {
    //   return this.$store.state.admin.uid
    // }

  },
  watch: {

  },
  methods: {
    getContent (tmpEn) {
      if (tmpEn.messageList[tmpEn.messageList.length - 1].msgType === ChatMsgType.TEXT) {
        return tmpEn.messageList[tmpEn.messageList.length - 1].content
      } else if (tmpEn.messageList[tmpEn.messageList.length - 1].msgType === ChatMsgType.IMAGE) {
        return '图片'
      } else if (tmpEn.messageList[tmpEn.messageList.length - 1].msgType === ChatMsgType.VIDEO) {
        return '视频'
      }
    },
    selectChat (en, index) {
      let obj = this.chatDataList[index]
      obj.newsNumber = 0
      this.$set(this.chatDataList, index, obj)
      this.selectIndex = index
      this.$emit('selectedChat', en) // 事件上传
    },
    getLastMsgTimeStr (sValue) {
      if (sValue == null) {
        return ''
      }
      var rs = formatTime(sValue, 'hh:mm:ss')
      return rs
    },
    searchList (e) {
      console.log(e)
      this.$emit('searchKey', e)
      // this.requestData()
    }
  },
  mounted () {

  }
}
</script>

<style lang="less">
.imRecord-wrapper {
    width: 100%;
    height: 550px;
    overflow: hidden;
    border: 0px;
    & > .header {
        display: flex;
        align-items: center;
        height: 60px;
        border-bottom: 1px solid #e6e6e6;
        .kf-info-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 150px;
            height: 60px;
            padding: 0 20px;
            .kf-avatar {
                width: 50px;
                height: 50px;
            }
            .kf-name {
                font-size: 16px;
            }
        }
        .client-info-wrapper {
            p:first-child {
                margin-bottom: 5px;
            }
            .fa {
                margin-right: 10px;
            }
        }
    }
    & > .main {
        height: calc(~'100% - 50px');
        position: relative;
        .item-list {
            height: calc(~'100% - 46px');
            overflow-y: auto;
            .item {
                position: relative;
                height: 63px;
                padding: 0px;
                border-bottom: 1px solid #e6e6e6;
                cursor: pointer;
                &.active,
                &:hover {
                    background-color: #0095ff;
                    .info-wrapper .first-p .name,
                    .info-wrapper .second-p .lastMsgContent,
                    .info-wrapper .first-p .lastMsgTime {
                        color: #eaf4fb;
                    }
                    .iconfont {
                        display: initial !important;
                    }
                    .header-img {
                      color:#fff ;
                    }
                }
                .followicon-wrapper {
                    position: relative;
                    float: left;
                    width: 25px;
                    height: 100%;
                    .iconfont {
                        display: none;
                        font-size: 12px;
                        color: #eaf4fb;
                        &.active {
                            display: initial;
                            color: #f9ce1d;
                        }
                    }
                }
                .platicon-wrapper {
                    position: relative;
                    float: left;
                    width: 50px;
                    height: 100%;
                    .header-img {
                        padding: 10px;
                        font-size: 16px;
                        // color: #fff;
                        border-radius: 50%;
                        &.bg0 {
                            background-color: #ef7777;
                        }
                        &.bg1 {
                            background-color: #00bcd4;
                        }
                        &.bg2 {
                            background-color: #009688;
                        }
                        &.bg3 {
                            background-color: #ffc107;
                        }
                        &.bg4 {
                            background-color: #ff5722;
                        }
                    }
                }
                .info-wrapper {
                    position: relative;
                    float: left;
                    width: 185px;
                    padding-top: 5px;
                    padding-left: 5px;
                    .first-p {
                        clear: both;
                        padding-top: 11px;
                        .name {
                            display: inline-block;
                            float: left;
                            width: 70%;
                            font-size: 14px;
                            color: #3e3e3e;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            text-align: left;
                            font-weight: bolder;
                        }
                        .lastMsgTime {
                            float: right;
                            font-size: 12px;
                            color: #8d8d8d;
                        }
                    }
                    .second-p {
                        clear: both;
                        // padding-top: 5px;
                        line-height: 1.2;
                        .lastMsgContent {
                            display: inline-block;
                            width: 150px;
                            margin-top: 3px;
                            font-size: 12px;
                            color: #8d8d8d;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            text-align: left;
                            overflow: hidden;
                        }
                        .newMsgCount {
                            position: relative;
                            top: -3px;
                            float: right;
                            .el-badge__content {
                                border: 1px solid #ffffff00;
                            }
                        }
                    }
                }
            }
        }
        .empty-wrapper {
            font-size: 16px;
            color: #3e3e3e;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .content {
                width: 170px;
                height: 200px;
                margin: 0px auto;
                text-align: center;
                color: #867c7c;
                .iconfont {
                    font-size: 90px;
                }
                .title {
                    margin-top: 25px;
                }
            }
        }
    }
}
</style>
