<template>
    <view>
        <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
            <view>
                <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>
                    <view class="name">新的朋友</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="name">我的群聊</view>
                </view>
            </view>
            <block v-if="friends.length > 0">
                <template v-for="(item, friend) in friends">
                    <!-- #ifdef APP-NVUE -->
                    <u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666">
                    </u-index-anchor>
                    <!-- #endif -->
                    <u-index-item>
                        <!-- #ifndef APP-NVUE -->
                        <u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666">
                        </u-index-anchor>
                        <!-- #endif -->
                        <view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex u-border-bottom"
                            @click="$Router.push({ name: 'imFriendsInfo', params: { targetId: friendItem.userId } })">
                            <block v-if="friendItem.portraitUrl != ''">
                                <u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''"
                                    :default-url="require('@/static/user/cover.png')"></u-avatar>
                            </block>
                            <block v-else>
                                <u-avatar class="cover" size="40" shape="square"
                                    :src="require('@/static/user/cover.png')"></u-avatar>
                            </block>
                            <view class="name">{{ friendItem.name }}</view>
                        </view>
                    </u-index-item>
                </template>
            </block>
            <block v-else>
                <u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
                </u-empty>
            </block>
        </u-index-list>
    </view>
</template>

<script>
    import {
        getFriends
    } from '@/apis/interfaces/im';
    export default {
        data() {
            return {
                indexs: [],
                friends: []
            };
        },
        onShow() {
            getFriends().then(res => {
                this.indexs = res.indexList;
                this.friends = res.itemArr;
            });
        },
        computed: {},
        methods: {
            // 扫码提示
            showToast() {
                uni.showToast({
                    title: '群聊功能暂未开放，敬请期待',
                    icon: 'none'
                });
            },
            // 新朋友
            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;

        // .cover
        .name {
            flex: 1;
            padding-left: $padding;
            font-size: $title-size;
            @extend .nowrap;
        }
    }
</style>
