<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="friendsArr.length > 0">
			<u-index-list activeColor="#34CE98">
				<template v-for="(item, index) in friendsArr">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor bgColor="#F3F6FB" color="#666" :text="indexList[index]" :key="index"></u-index-anchor>
					<!-- #endif -->
					<u-index-item :key="index">
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]" bgColor="#F3F6FB" color="#666"></u-index-anchor>
						<!-- #endif -->
						<view class="list" v-for="(item1, index1) in item" :key="index1">
							<view class="list__item" @click="toInfo(10047)">
								<image class="list__item__avatar" :src="item1.url"></image>
								<!-- <u-avatar  size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> -->
								<text class="list__item__user-name">{{item1.name}}</text>
							</view>
							<u-line></u-line>
						</view>
					</u-index-item>
				</template>
				<view slot="footer" class="u-safe-area-inset--bottom">
					<text class="list__footer">共305位好友</text>
				</view>
			</u-index-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 {
                friendsArr: []
            }
        },
		onShow() {
			getFriends().then(res => {
				this.friendsArr = res
				console.log(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?targeId=' + 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>
