<template>
    <section class="forward-message-container">
        <div class="forward-message">
            <div v-if="forwardType === 0">
                <img v-if="[3, 6].indexOf(messages[0].messageContent.type) >= 0"
                     :src="'data:video/jpeg;base64,' + messages[0].messageContent.thumbnail" alt="">
                <p v-else>
                    {{ this.forwardMessageStr }}
                </p>
            </div>
            <div v-else>
                <p>
                    {{ this.forwardMessageStr }}
                </p>
            </div>
        </div>
        <label>
            <input type="text" :placeholder="$t('conversation.forward_extra')" v-model="extraMessageText">
        </label>
    </section>
</template>

<script>
import MessageContentType from "../../../../../wfc/messages/messageContentType";
import ForwardType from "./ForwardType";
import ConversationType from "../../../../../wfc/model/conversationType";

export default {
    name: "ForwardMessageView",
    props: {
        forwardType: {
            // 可参考ForwardType
            type: Number,
            required: false,
        },
        messages: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            extraMessageText: '',
        }
    },
    methods: {},
    computed: {
        forwardMessageStr() {
            let str;
            let firstMsg = this.messages[0];
            switch (this.forwardType) {
                case ForwardType.NORMAL:
                    str = !firstMsg._from ? '' : firstMsg._from._displayName + ':';
                    if ([MessageContentType.Image, MessageContentType.Video].indexOf(firstMsg.messageContent.type) < 0) {
                        str += firstMsg.messageContent.digest(firstMsg);
                    }
                    break;
                case ForwardType.ONE_BY_ONE:
                    str = '[' + this.$t('conversation.forward_one_by_one') + ']'
                    if (firstMsg.conversation.type === ConversationType.Single) {
                        str += this.$t('conversation.user_message_records', [firstMsg._from._displayName]);
                    } else {
                        str += this.$t('conversation.group_message_records');
                    }
                    break;
                case ForwardType.COMPOSITE:
                    str = '[' + this.$t('conversation.forward_composite') + ']'
                    if (firstMsg.conversation.type === ConversationType.Single) {
                        str += this.$t('conversation.user_message_records', [firstMsg._from._displayName]);
                    } else {
                        str += this.$t('conversation.group_message_records');
                    }
                    break;
                default:
                    break;
            }
            return str;
        }
    },
}
</script>

<style lang="css" scoped>
.forward-message-container {
    width: 100%;
    padding: 0 30px;
}

.forward-message {
    display: flex;
    max-width: 100%;
    border-radius: 5px;
    justify-content: center;
    max-height: 100px;
    overflow: hidden;
}

.forward-message p {
    padding: 5px 10px;
    border-radius: 5px;
    word-wrap: break-word;
    word-break: break-all;
    color: #aaaaaa;
    font-size: 13px;
    overflow: hidden;
    background-color: #e7e7e7;
    text-overflow: ellipsis;
}

.forward-message img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 3px;
}

.forward-message-container label input {
    width: 100%;
    margin: 20px 0;
    outline: none;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid #e6e6e6;
}

</style>
