<template>
  <section class="layout-chat row"
    :class="{
      'layout-chat-reverse':reverse
    }"
  >
    <v-image class="layout-chat-avatar" :src="user.head_pic" radius="50%"></v-image>
    <aside class="flex-1 layout-chat-content relative rowACenter">
      <div v-if="item.type === MessageType.gift && item.gift" class="layout-chat-message relative row aCenter">
        <span>赠送</span>
        <span class="layout-chat-gift-name">{{item.gift.gift_name}}</span>
        <icon type="close" class="layout-chat-close-icon"></icon>
        <span>{{item.number}}</span>
        <v-image mode="center" :src="item.gift.base_image" backgroundColor="transparent" class="layout-chat-gift"></v-image>
      </div>
      <div v-else class="layout-chat-message relative" v-html="message"></div>
    </aside>
  </section>
</template>

<script>
import {
  vImage,
  icon
} from '$components';
import props from '../props';
import mixins from '../mixins';
export default {
  name: "layout-chat",
  components:{
    icon,
    vImage
  },
  mixins,
  props
}
</script>

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