<template>
    <view>
        <u-list height="auto">
            <u-list-item>
                <u-cell title="新的朋友" @click="toPending">
                    <u-avatar slot="icon" size="35" font-size="24" icon="plus-people-fill" shape="square"
                        bg-color="#f0ad4e"></u-avatar>
                </u-cell>
            </u-list-item>
            <u-list-item>
                <u-cell title="我的群聊" @click="showToast">
                    <u-avatar slot="icon" size="35" font-size="24" icon="account-fill" shape="square"
                        bg-color="#4cd964"></u-avatar>
                </u-cell>
            </u-list-item>
        </u-list>

        <block v-if="friends.length > 0">
            <u-list height="auto">
                <u-list-item v-for="(item, index) in friends" :key="index">
                    <u-cell :title="item.name + item.userId" @click="toInfo(item.userId)">
                        <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
                    </u-cell>
                </u-list-item>
            </u-list>
        </block>
        <block v-else>
            <u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
            </u-empty>
        </block>
    </view>
</template>

<script>
    import {
        getFriends
    } from '@/apis/interfaces/im'
    export default {
        data() {
            return {
                friends: []
            }
        },
        onShow() {
            getFriends().then(res => {
                this.friends = res
            })
        },
        computed: {

        },
        methods: {
            // 扫码提示
            showToast() {
                uni.showToast({
                    title: "群聊功能暂未开放，敬请期待",
                    icon: "none"
                })
            },
            // 新朋友
            toPending() {
                uni.navigateTo({
                    url: '/pages/im/friends/pending'
                })
            },
            // 用户资料
            toInfo(targetId) {
                uni.navigateTo({
                    url: '/pages/im/friends/info?targetId=' + targetId
                })
            }
        },
        onNavigationBarButtonTap(e) {
            this.toPending()
        }
    }
</script>

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