<template>
  <section>
    <header class="row aCenter room-chat-header">
      <v-image class="room-chat-avatar" :src="item.headimgurl" radius="50%" :borderWidth="2" borderColor="#fff"></v-image>
      <div class="flex-1 room-chat-nickname">
        <div class="line-1">{{item.nickName}}</div>
      </div>
    </header>

    <layout-chat-background
      :background="item.qp_base_image"
      class="room-chat-message-wrap"
    >
      <div class="room-chat-message row aCenter wrap" v-if="type=== AgoraRTMessage.gift">
        赠送给
        <div class="chat-gift-user-group"><span v-for="(cItem,cIndex) in item.userInfo" :key="cItem.uid">{{cIndex!==0?',':''}}{{cItem.nickname}}</span></div>
        {{item.e_name}}
        <icon type="close" class="room-chat-number"></icon>
        {{item.giftNum}}
        <v-image :src="item.show_img" mode="center" background-color="transparent" class="room-chat-icon"></v-image>
      </div>
      <div class="room-chat-message" v-else
      >{{message}}</div>
    </layout-chat-background>

  </section>

</template>

<script>
import vImage from '$components/v-image';
import props from '../props';
import {AgoraRTMessage} from '$utils/socket/agoraRTM/const/channel';
import {
  icon
} from '$components';
import layoutChatBackground from '$layout/layout-chat-background';
export default {
  name: "room-chat-message",
  data(){
    return {
      AgoraRTMessage
    }
  },

  computed:{
    message(){
      if (this.item.message) {
        // @ts-ignore
        return window.RongIMLib.RongIMEmoji.symbolToEmoji(this.item.message);
      } else {
        return '';
      }
    }
  },

  components:{
    vImage,
    icon,
    layoutChatBackground
  },
  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
