<template>
    <el-dialog v-if="dialogVisible" v-el-drag-dialog title="聊天室" :visible.sync="dialogVisible" width="40%" :before-close="handleClose" :close-on-click-modal="false">
        <div class="info-messageInfo">
            <div class="messageInfo-content">
                <div class="chatPerson">
                    <span :style="{ backgroundColor: chatPerson.isLine ? '#30d64d' : '#686a6b' }"
                        v-show="chatPerson.isLine != undefined"></span>&nbsp;
                    <span v-text="chatPerson.name"></span>
                </div>
                <div id="chatContent" class="chatContent" ref="chatContent">
                    <div v-for="item in chatMessageList" class="everyMessage">
                        <div :style="{ justifyContent: item.fromUserId == userInfo.account ? 'flex-end' : 'flex-start' }">
                            <template v-if="item.fromUserId != userInfo.account">
                                <img :src="avatar" alt="">
                                <div v-text="item.content" style="background-color:white"></div>
                            </template>
                            <template v-else-if="item.fromUserId == userInfo.account">
                                <div v-text="item.content" style="background-color: #85ce61;"></div>
                                <img :src="avatar" alt="">
                            </template>
                        </div>
                    </div>
                </div>
                <div class="chatSendMessage">
                    <div class="messageContent">
                        <el-input type="textarea" autosize placeholder="请输入内容" v-model="sendMessage">
                        </el-input>
                    </div>
                    <div class="sendMessageButtonList">
                        <el-button size="mini" type="success" @click="sendMessageFn">发送</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>


<script>
import avatar from '../../../assets/img/ddkz/headPhoto.jpg';
import { getRecordsByPagingTeam } from '../../../api/chat/chatRecords';
import elDragDialog from "@/util/directive/el-dragDialog";
export default {
    data() {
        return {
            dialogVisible: false,
            avatar: avatar,
            chatPerson: {
                name: '',
                isLine: undefined
            },
            sendMessage: '',
            chatMessageList: [],
            // stompClient: '',
            // ws: null,
            analogDataList: [],
            currentChatRoom: {},
            myStompClient: null
        }
    },
    directives: {
        elDragDialog
    },
    props: {
        visible: Boolean,
        analogData: Array,
        stompClient: Object,
        currentChatRoomInfo: Object
    },
    methods: {
        handleClose() {
            // this.dialogVisible = false;
            this.$emit('handleCancel');
        },
        showDialog(){
            this.dialogVisible = true;
        },
        sendMessageFn() {
            if (this.sendMessage.trim().length > 0) {
                this.myStompClient.send("/app/sendToChatRoomTeam/" + this.currentChatRoom.id + '/' + this.currentChatRoom.teamId, {}, JSON.stringify({
                    'content': this.sendMessage
                }));

                setTimeout(() => {
                    this.keepBottom();
                    this.sendMessage = '';
                }, 100);
            } else {
                this.$message.warning('不能发送空白信息');
            }
        },
        keepBottom() {
            this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
        },
        listChatroom(data) {
            //取消群聊的订阅
            for (const sub in this.stompClient.subscriptions) {
                if (sub.startsWith("multicast")) {
                    this.stompClient.unsubscribe(sub);
                }
            }
            data.forEach(e => {
                //订阅聊天室主题，订阅功能中设置ID：
                this.stompClient.subscribe('/topic/multicast/' + e.id + '/' + e.teamId, data => {
                    this.chatMessageList.push({
                        content: JSON.parse(data.body).content,
                        fromUserId: data.headers.fromUserId
                    });
                    this.$nextTick(() => {
                        this.keepBottom();
                    });
                }, { id: "multicast" + e.id + new Date().getTime() });

            })
        },
        getCurrentMessageList(item) {
            //查询我方聊天记录
            getRecordsByPagingTeam(item.id, 1, 100, '2020-01-01 00:00:00', '2024-10-01 00:00:00', null, item.teamId).then(res1 => {
                this.chatMessageList = res1.records;
                this.$nextTick(() => {
                    this.keepBottom();
                });
            })
        }
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    mounted() {
        this.dialogVisible = this.$props.visible;
        this.analogDataList = this.$props.analogData;
        this.currentChatRoom = this.$props.currentChatRoomInfo;
        this.myStompClient = this.$props.stompClient;
        //订阅
        this.listChatroom(this.analogDataList);
        this.getCurrentMessageList(this.$props.currentChatRoomInfo);
    }
}
</script>

<style lang="scss">
.info-messageInfo {
    width: 100%;
    height: 60%;

    .title {
        width: 100%;
        height: 30px;
        line-height: 30px;

        img {
            width: 20px;
            height: 20px;
        }

        span {
            font-size: 16px;
            font-weight: 500;
            color: white;
            vertical-align: text-bottom;
        }
    }

    .messageInfo-content {
        width: 100%;
        height: calc(100% - 40px);
        margin-top: 10px;
        padding: 0px 10px;
        border: 1px solid #254751;
        box-sizing: border-box;

        .chatPerson {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: center;
            font-size: 13px;
            border-bottom: 1px solid #37383f;
            display: none;

            &>span:first-child {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: block;
                float: left;
                margin-top: 15px;
                margin-left: 5px;
            }

            &>span:last-child {
                float: left;
                margin-left: 10px;
            }

        }

        .chatContent {
            width: 100%;
            height: 60%;
            border-bottom: 1px solid #37383f;
            padding: 10px 0px;
            box-sizing: border-box;
            overflow-y: auto;

            .everyMessage {
                width: 100%;
                margin-top: 10px;

                &>div {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                    font-size: 13px;

                    img {
                        width: 20px;
                        height: 20px;
                        margin: 0px 10px;
                    }

                    &>div {
                        max-width: 50%;
                        padding: 5px 10px;
                        border-radius: 5px;
                        color: black;
                    }
                }
            }
        }

        .chatSendMessage {
            width: 100%;
            height: calc(40% - 42px);
            position: relative;

            .messageContent {
                width: 100%;
                height: 100%;
                padding: 5px;
                box-sizing: border-box;

                .el-textarea__inner {
                    height: 100% !important;
                    color: white !important;
                    background-color: transparent !important;
                    border: 1px solid #37383f !important;
                }
            }

            .sendMessageButtonList {
                position: absolute;
                right: 10px;
                bottom: 10px;
            }
        }
    }
}
</style>