<template>
    <view class="members">
        <view class="users">
            <view class="user" v-for="(item, index) in members" :key="index" @click="toUser(item)">
                <u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
                <text class="name">{{ item.name }}</text>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getGroupInfo,
        getGroupUsers
    } from '@/apis/interfaces/im.js'

    export default {
        data() {
            return {
                targetId: '',
                members: []
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            getGroupInfo(this.targetId).then(res => {
            
            })
            getGroupUsers(this.targetId).then(res => {
                this.members = res
            })
        },
        methods: {
            toUser(item) {
                uni.navigateTo({
                    url: '/pages/im/friends/info?targetId=' + item.targetId
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .members {
        background-color: white;
        padding-bottom: 40rpx;

        .users {
            flex-direction: row;
            flex-wrap: wrap;
            display: flex;
            padding: 20rpx 0;

            .user {
                width: 126rpx;
                margin-left: 20rpx;
                margin-bottom: 20rpx;
                justify-content: center;
                align-items: center;

                .name {
                    width: 126rpx;
                    text-align: center;
                    font-size: 28rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
</style>
