<template>
  <div class="chat-layout">
    <el-tabs
      v-model="activeChatListOrUser"
      :stretch="true"
      @tab-click="handleClick"
    >
      <el-tab-pane label="聊天互动" name="chat"></el-tab-pane>
      <el-tab-pane label="观看人员" name="user"></el-tab-pane>
    </el-tabs>
    <div
      ref="roomList"
      class="room-list chat-list"
      v-show="activeChatListOrUser == 'chat'"
    >
      <div v-for="(msg, i) in msg_list" :key="i">
        <div
          class="chat-item"
          v-if="msg.type == 'msg' && msg.from.id !== userId"
        >
          <span class="user-name">{{ msg.from.name }}：</span>{{ msg.msg }}
        </div>
        <div
          class="chat-item chat-item-my"
          v-if="msg.type == 'msg' && msg.from.id == userId"
        >
          <span class="user-name">{{ msg.from.name }}：</span>{{ msg.msg }}
        </div>

        <div class="chat-item chat-item-join" v-if="msg.type === 'join'">
          <span>{{ msg.from.name }}</span
          >加入了房间
        </div>
        <div class="chat-item chat-item-leave" v-if="msg.type === 'leave'">
          <span>{{ msg.from.name }}</span
          >离开了了房间
        </div>
      </div>
    </div>
    <div class="room-list user-list" v-show="activeChatListOrUser == 'user'">
      <!-- <el-input placeholder="搜索"  v-model="searchUserListValue"></el-input> -->
      <!-- {{user_list}} -->
      <div class="user-item" v-for="user in user_list" :key="user.id" :style="{filter:user.status==1?'unset':'grayscale(1)'}">
        <div class="user-avatar" v-if="user.photo" >
          <img :src="user.photo.fileLinkTransfer()" alt="" />
        </div>
        <div class="user-avatar" v-else>{{ user.name.slice(0, 1) }}</div>
        <div class="user-name">{{ user.name }}</div>
      </div>
    </div>
    <el-input
      maxlength="225"
      v-show="activeChatListOrUser == 'chat'"
      @keydown.native="sendMeeageForkeyboard"
      placeholder="请输入消息内容"
      v-model="msg"
    >
      <div slot="append" @click="sendMeeage">发送</div>
    </el-input>
  </div>
</template>

<script>
import chatListmixins from '../live-play/mixins/live'
export default {
  props: {
    room: {
      type: Object
    }
  },
  data () {
    return {
      activeChatListOrUser: 'chat',
      msg: '',
      userId: this.$store.user.id,
      searchUserListValue: '',
      searchUserList: '',
      isJoinRoom: false
    }
  },
  mixins: [chatListmixins],
  methods: {
    sendMeeage () {
      if (this.msg.trim().length <= 0) return
      this.ws_send_live_msg()
      // this.$emit('sendMessage', this.sendChatValue)
    },
    sendMeeageForkeyboard (e) {
      if (e.code === 'Enter') {
        this.sendMeeage()
        // this.$emit('sendMessage', this.sendChatValue)
      }
    }
  },
  activated () {},
  watch: {
    room () {
      if (!this.isJoinRoom) {
        this.msg_list = []

        this.initLiveRoom()
        this.isJoinRoom = true
      }
    },
    user_list () {
      this.$emit('userListChange', this.user_list.filter(t => t.status === 1).length)
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-layout {
  height: 100%;
  .chat-item {
    margin-bottom: 10px;
    word-break: break-all;
    .user-name {
      color: #9f9f9f;
      line-height: 20px;
    }
  }
  .chat-item-my {
    .user-name {
      color: #9f9f9f;
      font-weight: 700;
      color: $--color-primary;
      line-height: 20px;
    }
  }
  .chat-item-join,
  .chat-item-leave {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
  }
  .user-item {
    display: flex;
    height: 50px;
    align-items: center;
    cursor: pointer;
    .user-avatar {
      color: white;
      height: 35px;
      width: 35px;
      font-size: 14px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $--color-primary;
      border-radius: 50%;
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
    .user-name {
      flex: 1;
      padding-left: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .user-item:hover {
    background-color: aliceblue;
    border-radius: 4px;
  }
  .room-list {
    flex: 1;
    overflow: auto;
  }
  ::v-deep .el-input-group__append {
    cursor: pointer;
    padding: 0 10px;
    background-color: $--color-primary;
    color: white;
    border: 1px solid $--color-primary;
  }
  ::v-deep .el-input-group__append:hover {
    opacity: 0.8;
  }
  ::v-deep .user-list {
    input {
      border-radius: 30px;
    }
  }
}
</style>
