<template>
    <div>
        <beautiful-chat
                :participants="participants"
                :titleImageUrl="titleImageUrl"
                :onMessageWasSent="onMessageWasSent"
                :messageList="messageList"
                :newMessagesCount="newMessagesCount"
                :isOpen="isChatOpen"
                :close="closeChat"
                :open="openChat"
                :showEmoji="true"
                :showFile="true"
                :showEdition="true"
                :showDeletion="true"
                :showTypingIndicator="showTypingIndicator"
                :showLauncher="true"
                :showCloseButton="true"
                :colors="colors"
                :alwaysScrollToBottom="alwaysScrollToBottom"
                :disableUserListToggle="false"
                :messageStyling="messageStyling"
                @onType="handleOnType"
                @edit="editMessage" />
<!--        :icons="icons"-->
    </div>
</template>

<script>

    export default {
        name: "dialogs",
        data() {
            return {
                // socket: null,
                // icons: {
                //     open: {
                //         img: OpenIcon,
                //         name: "default",
                //     },
                //     close: {
                //         img: CloseIcon,
                //         name: "default",
                //     },
                //     file: {
                //         img: FileIcon,
                //         name: "default",
                //     },
                //     closeSvg: {
                //         img: CloseIconSvg,
                //         name: "default",
                //     },
                // },
                participants: [
                    {
                        id: 'user1',
                        name: 'Matteo',
                        imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
                    },
                    {
                        id: 'user2',
                        name: 'Support',
                        imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
                    }
                ], // 对话的所有参与者的列表。' name '是用户名，' id '用于建立消息的作者，' imageUrl '应该是用户头像。
                titleImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
                messageList: [
                    { type: 'text', author: `me`, data: { text: `Say yes!` } },
                    { type: 'text', author: `user1`, data: { text: `No.` } }
                ], // // 要显示的消息列表可以动态地分页和调整
                newMessagesCount: 0,
                isChatOpen: false, // 确定聊天窗口应该打开还是关闭
                showTypingIndicator: '',  // 当设置为匹配参与者的值时。它显示特定用户的输入指示
                colors: {
                    header: {
                        bg: '#4e8cff',
                        text: '#ffffff'
                    },
                    launcher: {
                        bg: '#4e8cff'
                    },
                    messageList: {
                        bg: '#ffffff'
                    },
                    sentMessage: {
                        bg: '#4e8cff',
                        text: '#ffffff'
                    },
                    receivedMessage: {
                        bg: '#eaeaea',
                        text: '#222222'
                    },
                    userInput: {
                        bg: '#f4f7f9',
                        text: '#565867'
                    }
                }, // specifies the color scheme for the component
                alwaysScrollToBottom: false, // 当设置为true时，当有新事件发生时(新消息，用户开始输入…)，总是将聊天滚动到底部。
                messageStyling: true // 启用*bold* /emph/ _underline_等(更多信息请访问github.com/mattezza/msgdown)
            }
        },
        methods: {
            sendMessage (text) {
                if (text.length > 0) {
                    this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
                    this.onMessageWasSent({ author: 'support', type: 'text', data: { text } })
                }
            },
            onMessageWasSent (message) {
                // 当用户发送消息时调用
                this.messageList = [ ...this.messageList, message ]
            },
            openChat () {
                // 当用户单击fab按钮打开聊天时调用
                this.isChatOpen = true
                this.newMessagesCount = 0
            },
            closeChat () {
                // // 当用户单击按钮关闭聊天时调用
                this.isChatOpen = false
            },
            handleScrollToTop () {

                // 当用户将消息列表滚动到顶部时调用
// 利用分页来加载另一个消息页面

            },
            handleOnType () {
                console.log('Emit typing event')
            },
            editMessage(message){
                const m = this.messageList.find(m=>m.id === message.id);
                m.isEdited = true;
                m.data.text = message.data.text;
            }
        }
    }
</script>

<style>
    .sc-chat-window[data-v-08d4c038]{
        width: 500px !important;
        padding-right: 50px;
    }
    .sc-header[data-v-61edfd75]{
        margin-top: 50px;
        width: 500px;
    }
    .sc-user-input{
        width: 500px;
    }
    .sc-message-list[data-v-36bb2cf7]{
        width: 500px;
    }
</style>