<template>
    <view class="contents">
        <view class="ios-top"></view>
        <!-- header -->
        <view class="custom-header">
            <view class="header-flex">
                <view class="tabs">
                    <view :class="['item', {'active': showType == 0}]" @click="showPrivate">
                        私聊
                        <u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="privateUnread" />
                    </view>
                    <view :class="['item', {'active': showType == 1}]" @click="showGroup">
                        群聊
                        <u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="groupUnread" />
                    </view>
                </view>
                <view class="btns">
                    <view class="item" @click="scanQrCode">
                        <uni-icons color="#555" type="scan" size="22" />
                    </view>
                    <view class="item" @click="onNav('imFriends', {})">
                        <u-badge absolute max="99" :offset="[-5, -5]" :value="hasNewFriends" />
                        <uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22" />
                    </view>
                </view>
            </view>
        </view>
        <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
        <!-- content -->
        <view v-if="$store.state.token !== ''">
            <conversation-private v-show="showType == 0" @refresh="getPrivateConversationList()"
                :conversations="conversations" />
            <conversation-group v-show="showType == 1" @refresh="getGroupConversationList()"
                :conversations="groupConversations" />
        </view>
        <!-- 未登录 -->
        <view v-else class="vertical null-list">
            <u-empty icon="http://cdn.uviewui.com/uview/empty/permission.png" textColor="#999" text="登录后开启聊天吧~">
                <template>
                    <view class="null-list-btn" @click="toLogin">去登录</view>
                </template>
            </u-empty>
        </view>
    </view>
</template>

<script>
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
    import im from '@/utils/im/index.js'
    import userAuth from '@/public/userAuth'
    import conversationPrivate from './components/conversationPrivate'
    import conversationGroup from './components/conversationGroup'

    export default {
        data() {
            return {
                isShown: true, // 当前页面显示状态
                showType: 1, // 0 单聊，1 群聊
                conversations: [], // 会话列表
                groupConversations: [],
                connection: 0,
                privateUnread: 0,
                groupUnread: 0,
                hasNewFriends: 0
            }
        },
        components: {
            conversationPrivate,
            conversationGroup
        },
        onLoad() {
            // 好友申请数量
            this.checkNewFriendPending()
            uni.$on('onConnectionStatusChange', (status) => {
                this.connection = status
            })
            uni.$on('onContactNotification', this.checkNewFriendPending)
        },
        onShow() {
            if (this.$store.state.token !== '') {
                this.getPrivateConversationList()
                this.getGroupConversationList()
            }
            // 监听新消息
            uni.$on('onReceivePrivateMessage', (msg) => {
                this.getPrivateConversationList()
            })
            uni.$on('onReceiveGroupMessage', (msg) => {
                this.getGroupConversationList()
            })
            
            this.isShown = true
        },
        onHide() {
            uni.$off('onReceivePrivateMessage')
            uni.$off('onReceiveGroupMessage')
            this.isShown = false
        },
        onNavigationBarButtonTap(e) {
            if (e.index == 0) {
                uni.showToast({
                    title: '开发中暂未开放，敬请期待',
                    icon: 'none'
                })
            }
            if (e.index == 1) {
                if (this.toLogin()) {
                    this.$Router.push({
                        name: 'imFriends'
                    })
                }
            }
        },
        methods: {
            showPrivate() {
                console.log('切换到单聊');
                this.showType = 0
            },
            showGroup() {
                console.log('切换到群聊');
                this.showType = 1
            },
            checkNewFriendPending() {
                // 获取是否有新的好友申请
                RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
                    if (res.code === 0) {
                        this.hasNewFriends = res.conversations.filter((item) => {
                            return item.objectName == RongIMLib.ObjectName.ContactNotification
                        }).length
                    }
                })
            },
            // 检查登录
            toLogin() {
                if (this.$store.state.token === '') {
                    const Auth = new userAuth()
                    Auth.Login()
                    return false
                }
                return true
            },
            // 获取私聊的会话列表
            getPrivateConversationList() {
                const count = 1000
                const timestamp = 0
                RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
                    if (res.code === 0) {
                        this.conversations = res.conversations
                    }
                })
            },
            // 获取群组会话列表
            getGroupConversationList() {
                const count = 1000
                const timestamp = 0
                RongIMLib.getConversationList([RongIMLib.ConversationType.GROUP], count, timestamp, (res) => {
                    if (res.code === 0) {
                        this.groupConversations = res.conversations
                    }
                })
            },
            // 点击按钮
            onNav(name, params) {
                if (this.toLogin) {
                    if (name === '') {
                        uni.showToast({
                            title: '开发中，敬请期待',
                            icon: 'none'
                        })
                        return
                    }
                    this.$Router.push({
                        name,
                        params
                    })
                }
            },
            // 调起扫码
            scanQrCode() {
                uni.scanCode({
                    success: (res) => {
                        if (res.scanType == 'QR_CODE') {
                            res.result.substr(0, 10) == 'ADDFRIEND|'
                            uni.navigateTo({
                                url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // header
    .custom-header {
        @extend .ios-top;
        background: $window-color;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;

        .header-flex {
            padding: 20rpx $padding;
            display: flex;
            justify-content: space-between;
            height: 60rpx;
            line-height: 60rpx;

            .tabs {

                .item {
                    position: relative;
                    margin-left: $margin;
                    display: inline-block;
                    font-size: $title-size-lg;
                    color: $text-gray;
                    padding: 0 ($padding - 10);
                    border-radius: 30rpx;

                    &:first-child {
                        margin: 0;
                    }

                    &.active {
                        background: rgba($color: $main-color, $alpha: .1);
                        color: $main-color;
                        font-weight: bold;
                    }
                }
            }

            .btns {
                .item {
                    position: relative;
                    display: inline-block;
                    margin-left: $margin;
                }
            }
        }
    }

    // contents
    .contents {
        background-color: $window-color;
        min-height: 100vh;
        padding-top: 90rpx + 20rpx;
        box-sizing: border-box;

        .null-list {
            height: 100vh;
            text-align: center;

            &-btn {
                margin-top: $margin * 2;
                line-height: 70rpx;
                color: $main-color;
                border: solid 2rpx $main-color;
                padding: 0 ($padding*3);
                font-size: $title-size-m;
                border-radius: 35rpx;
                box-sizing: border-box;
            }
        }
    }

    .u-border-bottom {
        border-bottom: solid 1rpx #f9f9f9 !important;
    }
</style>
