<template>
    <view>
        <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
            <view class="friend-flex u-border-bottom" @click="toPending">
                <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
                <u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
                <view class="info">新的朋友</view>
            </view>
            <view class="friend-flex" @click="showToast">
                <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
                <view class="info">我的群聊</view>
            </view>
            <block v-if="friends.length > 0">
                <u-index-item v-for="(item, fkey) in friends" :key="fkey">
                    <u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
                    </u-index-anchor>

                    <view v-for="(friendItem, index) in item" :key="index" class="friend-flex u-border-bottom"
                        @click="toFriend(friendItem.userId)">
                        <u-avatar size="40" shape="square" :src="friend(friendItem.userId).portraitUrl" />
                        <view class="info">
                            <view class="name">{{ friend(friendItem.userId).name }}</view>
                            <view class="address">{{ friendItem.address }}</view>
                        </view>
                    </view>
                </u-index-item>
            </block>
            <block v-else>
                <u-empty class="pages-null" mode="data" text="暂无好友">
                </u-empty>
            </block>
        </u-index-list>
    </view>
</template>

<script>
    import {
        getFriendsLetter
    } from '@/apis/interfaces/im';
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'

    export default {
        data() {
            return {
                indexs: [],
                friends: [],
                pendingCount: 0
            };
        },
        computed: {
            friend() {
                return function(targetId) {
                    return this.$store.getters.userInfo(targetId)
                }
            }
        },
        onLoad() {
            this.getFriendList()
            this.checkNewFriendPending()
            uni.$on('onContactNotification', () => {
                this.checkNewFriendPending()
                this.getFriendList()
            })
        },
        onUnload() {
            uni.$off('onContactNotification')
        },
        methods: {
            getFriendList() {
                getFriendsLetter().then(res => {
                    this.indexs = res.indexList
                    this.friends = res.itemArr
                })
            },
            checkNewFriendPending() {
                // 获取是否有新的好友申请
                RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
                    if (res.code === 0) {
                        this.pendingCount = res.conversations.filter((item) => {
                            return item.objectName == RongIMLib.ObjectName.ContactNotification
                        }).length
                    }
                })
            },
            showToast() {
                uni.showToast({
                    title: '群聊功能暂未开放，敬请期待',
                    icon: 'none'
                });
            },
            toFriend(targetId) {
                uni.navigateTo({
                    url: '/pages/im/friends/info?targetId=' + targetId
                })
            },
            // 新朋友
            toPending() {
                uni.navigateTo({
                    url: '/pages/im/friends/pending'
                });
            }
        },
        onNavigationBarButtonTap(e) {
            uni.navigateTo({
                url: '/pages/im/friends/search'
            });
        }
    };
</script>

<style lang="scss" scoped>
    // 页面空
    .pages-null {
        height: 70vh;
    }

    // 好友列表
    .friend-flex {
        position: relative;
        padding: 20rpx $padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .info {
            flex: 1;
            margin-left: $padding;

            .name {
                font-size: $title-size + 2;
                font-size: $title-size + 2;
                color: #454545 !important;
                @extend .nowrap;
            }

            .address {
                color: $text-gray-m;
                font-size: $title-size-m - 5;
            }
        }

    }
</style>
