<template>
    <div>
        <TextMessageContentView :message="message"
                                v-if="message.messageContent.type === 1"
                                :style="{'--out-arrow-color':'#a8bdff', '--in-arrow-color':'white'}"
                                v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>
        <StreamingTextMessageContentView :message="message"
                                         v-else-if="message.messageContent.type === 14 || message.messageContent.type === 15"
                                         :style="{'--out-arrow-color':'#a8bdff', '--in-arrow-color':'white'}"
                                         v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>
        <AudioMessageContentView :message="message"
                                 v-else-if="message.messageContent.type === 2"/>
        <AudioMessageContentView :message="message"
                                 v-else-if="message.messageContent.type === 23"/>
        <ImageMessageContentView :message="message"
                                 v-else-if="message.messageContent.type === 3"/>
        <!--                           v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>-->
        <FileMessageContentView :message="message"
                                v-else-if="message.messageContent.type === 5"
                                v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>
        <VideoMessageContentView :message="message"
                                 v-else-if="message.messageContent.type === 6"/>
        <!--                           v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>-->
        <StickerMessageContentView :message="message"
                                   v-else-if="message.messageContent.type === 7"/>
        <LinkMessageContentView :message="message"
                                v-else-if="message.messageContent.type === 8"
                                :style="{'--out-arrow-color':'#a8bdff', '--in-arrow-color':'white'}"
                                v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>
        <CompositeMessageContentView :message="message"
                                     v-else-if="message.messageContent.type === 11"/>
        <CallStartMessageContentView :message="message"
                                     v-else-if="message.messageContent.type === 400"/>
        <ConferenceInviteMessageContentView :message="message"
                                            v-else-if="message.messageContent.type === 408"/>
        <UserCardMessageContentView :message="message"
                                    v-else-if="message.messageContent.type === 10"
                                    :style="{'--out-arrow-color':'white', '--in-arrow-color':'white'}"
                                    v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>
        <MixMultiMediaTextMessageContentView :message="message"
                                             v-else-if="message.messageContent.type === MessageContentType.MESSAGE_CONTENT_TYPE_MIX_MULTI_MEDIA_TEXT"/>
        <MixFileTextMessageContentView :message="message"
                                       v-else-if="message.messageContent.type === MessageContentType.MESSAGE_CONTENT_TYPE_MIX_FILE_TEXT"/>
        <UnsupportMessageContentView :message="message"
                                     v-else-if="[/* todo un support message types */].indexOf(message.messageContent.type) >= 0"/>
        <TestCustomMessageContentView :message="message"
                                      v-else-if="message.messageContent.type === CustomMessageContentType.MESSAGE_CONTENT_TYPE_CUSTOM_MESSAGE_TEST"
                                      :style="{'--out-arrow-color':'#a8bdff', '--in-arrow-color':'white'}"
                                      v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>
        <!--更多自定义消息，注意 v-else-if -->
        <UnknownMessageContentView :message="message"
                                   v-else
                                      v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>
    </div>
</template>

<script>
import Message from "../../../../wfc/messages/message";
import TextMessageContentView from "../../../main/conversation/message/content/TextMessageContentView";
import ImageMessageContentView from "../../../main/conversation/message/content/ImageMessageContentView";
import VideoMessageContentView from "../../../main/conversation/message/content/VideoMessageContentView";
import UnsupportMessageContentView from "../../../main/conversation/message/content/UnsupportMessageContentView";
import FileMessageContentView from "../../../main/conversation/message/content/FileMessageContentView";
import StickerMessageContentView from "../../../main/conversation/message/content/StickerMessageContentView";
import CallStartMessageContentView from "../../../main/conversation/message/content/CallStartMessageContentView";
// 语音消息说明
//  目前提供连个实现版：
//  1. 基于APP_SERVER做编码转换，采用audio标签，播放mp3文件，对应AudioMessageContentViewAPP
//  2. 本地解码，采用自定义UI，直接播放AMR文件，对应AudioMessageContentViewAMR
import AudioMessageContentView from "../../../main/conversation/message/content/AudioMessageContentViewAMR";
// import AudioMessageContentView from "../../../main/conversation/message/content/AudioMessageContentViewAPP";
import CompositeMessageContentView from "../../../main/conversation/message/content/CompositeMessageContentView";
import UserCardMessageContentView from "./content/UserCardMessageContentView";
import ConferenceInviteMessageContentView from "./content/ConferenceInviteMessageContentView";
import UnknownMessageContentView from "./content/UnknownMessageContentView";
import LinkMessageContentView from "./content/LinkMessageContentView";
import StreamingTextMessageContentView from "./content/StreamingTextMessageContentView.vue";
import CustomMessageContentType from "../../../../wfc_custom_message/customMessageContentType";
import TestCustomMessageContentView from "./content/TestCustomMessageContentView.vue";
import MixMultiMediaTextMessageContentView from "./content/MixMultiMediaTextMessageContentView.vue";
import MessageContentType from "../../../../wfc/messages/messageContentType";
import MixFileTextMessageContentView from "./content/MixFileTextMessageContentView.vue";

export default {
    name: "MessageContentContainerView",
    computed: {
        MessageContentType() {
            return MessageContentType
        },
        CustomMessageContentType() {
            return CustomMessageContentType
        }
    },
    props: {
        message: {
            type: Message,
            required: true,
        }
    },
    components: {
        MixFileTextMessageContentView,
        MixMultiMediaTextMessageContentView,
        TestCustomMessageContentView,
        LinkMessageContentView,
        UnknownMessageContentView,
        ConferenceInviteMessageContentView,
        CompositeMessageContentView,
        AudioMessageContentView,
        CallStartMessageContentView,
        UnsupportMessageContentView,
        TextMessageContentView,
        ImageMessageContentView,
        VideoMessageContentView,
        FileMessageContentView,
        StickerMessageContentView,
        UserCardMessageContentView,
        StreamingTextMessageContentView,
    }
}
</script>

<style lang="css">

:root {
    --in-arrow-color: white;
    --out-arrow-color: #a8bdff;
}

.leftarrow:before {
    /*right: -10px;*/
    left: -10px;
    top: 15px;
    position: absolute;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    pointer-events: none;
}

.leftarrow:before {
    border-color: transparent;
    border-right-color: var(--in-arrow-color);
    border-width: 5px;
}


.rightarrow:before {
    /*right: -10px;*/
    left: 100%;
    top: 15px;
    position: absolute;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    pointer-events: none;
}

.rightarrow:before {
    border-color: transparent;
    border-left-color: var(--out-arrow-color);
    border-width: 5px;
}
</style>
