<template v-if="message">
  <div class="chat-message" :class="message.viewType ? 'chat-message--accept' : 'chat-message--send'">
    <TextMessage v-if="message.type === 'text'" :message-content="message.messageContent"
                 :view-type="message.viewType"></TextMessage>
    <ImageMessage v-if="message.type === 'image'" :message-content="message.messageContent"
                  :view-type="message.viewType"></ImageMessage>
    <AudioMessage v-if="message.type === 'audio'" :message-content="message.messageContent"
                  :view-type="message.viewType"></AudioMessage>
    <LinkMessage v-if="message.type === 'link'" :message-content="message.messageContent"
                  :view-type="message.viewType"></LinkMessage>
  </div>
</template>
<script setup>
import TextMessage from "~/pages/chat/chat-message/text-message/index.vue";
import ImageMessage from "~/pages/chat/chat-message/image-message/index.vue";
import AudioMessage from "~/pages/chat/chat-message/audio-message/index.vue";
import LinkMessage from "~/pages/chat/chat-message/link-message/index.vue";

defineProps({
  message: Object
});

</script>
<style scoped lang="scss">
.chat-message {
  //background: red;
  width: max-content;
  margin: 20px 0;
  &.chat-message--accept {
    //float: left;
    margin-right: auto;
  }
  &.chat-message--send {
    //float: right;
    margin-left: auto;
  }
}
</style>