<template>
    <view>
        <view class="list">
            <view class="list__item" @click="toPending">
                <u-avatar size="35" icon="plus-people-fill" fontSize="26" bg-color="#f0ad4e"></u-avatar>
                <text class="list__item__user-name">新的朋友</text>
            </view>
            <u-line></u-line>
            <view class="list__item" @click="showToast">
                <u-avatar size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar>
                <text class="list__item__user-name">我的群聊</text>
            </view>
            <u-line></u-line>
        </view>
        <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">
    .list {
        &__item {
            @include flex;
            padding: 6px 12px;
            align-items: center;

            &__avatar {
                height: 35px;
                width: 35px;
                border-radius: 50%;
            }

            &__user-name {
                font-size: 16px;
                margin-left: 10px;
                color: $u-main-color;
            }
        }

        &__footer {
            color: $u-tips-color;
            font-size: 14px;
            text-align: center;
            margin: 15px 0;
        }
    }

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