<template>
    <view class="chat-content">
        <scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID"
            :scroll-with-animation="false">
            <!-- 聊天窗口 -->
            <view class="chat-item" v-for="(item,index) in messages" :key="index">
                <view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
                    <view class="chat-msg">
                        <view class="chat-msg-text">{{ item.content.content }}</view>
                        <!-- 预留一些图片，语音表情包等位置 -->
                    </view>
                    <view class="chat-status" :class="{'hide': item.sentStatus == 50}"
                        v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
                    <view class="chat-avatar">
                        <u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl"
                            @click="showFriend(targetId)"></u-avatar>
                        <u-avatar v-else @click="showMine" bg-color="#ffffff"
                            :src="$store.getters.sender.portraitUrl" />
                    </view>
                </view>
                <view class="chat-item-time" :id="'chatId_'+index">
                    <text>{{ item.sentTime|timeCustomCN }}</text>
                </view>
            </view>
        </scroll-view>

        <view class="chat-footer">
            <input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
                cursor-spacing="10" />
            <button class="chat-push" :disabled="disabled" size="mini" @click="send">发送</button>
        </view>
    </view>
</template>

<script>
    import * as RongIMLib from '@rongcloud/imlib-uni'
    import im from '@/utils/im/index.js'

    export default {
        data() {
            return {
                targetId: '',
                scrollIntoID: 'chatID_0',
                inputTxt: '',
                messages: [],
                conversationType: 1,
                totalCount: 0,
                userInfo: {
                    name: '',
                    userId: '',
                    portraitUrl: ''
                }
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            this.conversationType = e.conversationType // 会话类型
            // 消息总数量
            RongIMLib.getMessageCount(this.conversationType, this.targetId, ({
                code,
                count
            }) => {
                if (code == 0) {
                    this.totalCount = count
                }
            })
            this.userInfo = this.$store.getters.userInfo(this.targetId)
            uni.setNavigationBarTitle({
                title: this.$store.getters.userInfo(this.targetId).name
            })

            RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
            im.setNotifyBadge()
            RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())

            this.getMessageList()

            // 监听消息回执
            RongIMLib.addReadReceiptReceivedListener((result) => {
                const res = result.data.message
                if (res.targetId == this.targetId) {
                    this.getMessageList()
                }
            })
        },
        onUnload() {
            RongIMLib.clearReadReceiptReceivedListener()
        },
        computed: {
            disabled() {
                return this.inputTxt.length == 0
            },
            friend() {
                return function(targetId) {
                    return this.$store.getters.userInfo(targetId)
                }
            }
        },
        onNavigationBarButtonTap(e) {
            if (e.index == 0) {
                uni.navigateTo({
                    url: '/pages/im/private/setting?targetId=' + this.targetId +
                        '&conversationType=' + this.conversationType,
                    events: {
                        messageClear: () => {
                            this.getMessageList()
                            console.log('聊天消息被清空');
                        }
                    }
                })
            }
        },
        watch: {
            '$store.getters.newMessage': function(msg) {
                if (msg.targetId == this.targetId) {
                    RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
                    RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
                    this.getMessageList()
                    im.setNotifyBadge()
                }
            }
        },
        methods: {
            getMessageList() {
                // 获取消息列表
                const objectNames = [
                    'RC:TxtMsg',
                    'RC:VcMsg',
                    'RC:HQVCMsg',
                    'RC:ImgMsg',
                    'RC:GIFMsg',
                    'RC:ImgTextMsg',
                    'RC:FileMsg',
                    'RC:LBSMsg',
                    'RC:SightMsg',
                    'RC:ReferenceMsg',
                    'RC:CombineMsg'
                ]
                const timeStamp = new Date().getTime()
                const count = 20 // 获取的消息数量
                const isForward = true // 是否向前获取
                RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
                    count,
                    isForward,
                    ({
                        code,
                        messages
                    }) => {
                        if (code === 0) {
                            this.messages = messages.reverse()
                            this.scrollBottom()
                        }
                    }
                )
            },
            send() {
                im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => {
                    this.getMessageList()
                    this.inputTxt = ''
                })
            },
            showFriend(targetId) {
                uni.navigateTo({
                    url: '/pages/im/friends/info?targetId=' + targetId
                })
            },
            showMine() {
                uni.navigateTo({
                    url: '/pages/im/friends/mine'
                })
            },
            scrollBottom() {
                this.$nextTick(function() {
                    setTimeout(() => {
                        let len = this.messages.length
                        if (len) {
                            if (this.scrollIntoID == "chatId_" + (len - 1)) {
                                this.scrollIntoID = "chatId_" + (len - 2)
                                this.scrollBottom()
                            } else if (this.scrollIntoID == "chatId_" + (len - 2)) {
                                this.scrollIntoID = "chatId_" + (len - 1)
                            } else {
                                this.scrollIntoID = "chatId_" + (len - 1)
                            }
                        } else {
                            this.scrollIntoID = "chatId_0";
                        }
                    }, 50)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .chat-content {
        height: 100vh;
        background: $window-color;

        .chat-scrool {
            height: calc(100vh - 140rpx);
            box-sizing: border-box;
            padding-bottom: $padding;

            .chat-item {
                .chat-item-time {
                    text-align: center;
                    padding: $padding/2 $padding;

                    text {
                        background: rgba($color: #000000, $alpha: .2);
                        color: white;
                        font-size: $title-size-sm - 4;
                        line-height: 40rpx;
                        padding: 0 15rpx;
                        display: inline-block;
                        border-radius: $radius-lg;
                    }
                }

                .chat-item-article {
                    position: relative;
                    padding: 10rpx ($padding + 110) 0;
                    overflow: hidden;
                    min-height: 40px;

                    .chat-msg {
                        overflow: hidden;

                        .chat-msg-text {
                            display: inline-block;
                            padding: ($padding - 10) $padding;
                            color: $text-color;
                            box-sizing: border-box;
                            font-size: $title-size-lg;
                        }
                    }

                    .chat-status {
                        color: $text-gray;
                        font-size: $title-size-sm;
                        text-align: right;

                        &.hide {
                            color: $text-gray-m;
                        }
                    }

                    .chat-avatar {
                        position: absolute;
                        top: 0;
                    }

                    &.left {
                        .chat-avatar {
                            left: $margin;
                        }

                        .chat-msg {
                            .chat-msg-text {
                                background-color: white;
                                border-radius: 0 $radius*2 $radius*2 $radius*2;
                            }
                        }
                    }

                    &.right {
                        .chat-avatar {
                            right: $margin;
                        }

                        .chat-msg {
                            text-align: right;

                            .chat-msg-text {
                                border-radius: $radius*2 0 $radius*2 $radius*2;
                                background: $main-color;
                                color: white;
                            }
                        }
                    }
                }
            }
        }

        .chat-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 140rpx;
            padding: 20rpx ($padding + 150rpx) 40rpx $padding;
            background: white;
            box-sizing: border-box;
            z-index: 99;

            .chat-input {
                background: $window-color;
                height: 80rpx;
                border-radius: $radius-lg;
                font-size: $title-size-m;
                padding: 0 $padding;
                box-sizing: border-box;
            }

            .chat-push[size='mini'] {
                position: absolute;
                right: $margin;
                top: 20rpx;
                height: 80rpx;
                line-height: 80rpx;
                padding: 0;
                margin: 0;
                width: 120rpx;
                background: $main-color;
                color: white;
                border-radius: $radius-lg;
                font-size: $title-size-m;
                font-weight: bold;

                &[disabled] {
                    background: $uni-bg-color-grey;
                }

                &::after {
                    display: none;
                }
            }
        }
    }
</style>
