<template>
    <view>
        <view v-for="(item, index) in groups" :key="index" class="friend-flex u-border-bottom"
            @click="toGroup(item.targetId)">
            <u-avatar size="40" shape="square" :src="contact(item.targetId).portraitUrl" />
            <view class="info">
                <view class="name">{{ item.name }}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getMyGroups
    } from '@/apis/interfaces/im.js'

    export default {
        data() {
            return {
                groups: []
            }
        },
        computed: {
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        onNavigationBarButtonTap() {
            uni.navigateTo({
                url: 'pages/im/group/create'
            })
        },
        onLoad() {
            getMyGroups().then((res) => {
                this.groups = res
                res.map(item => {
                    this.$store.dispatch('updateContact', item)
                })
            })
        },
        methods: {
            toGroup(targetId) {
                uni.navigateTo({
                    url: '/pages/im/group/chat?targetId=' + targetId
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 好友列表
    .friend-flex {
        position: relative;
        padding: 20rpx $padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .info {
            flex: 1;
            margin-left: $padding;

            .name {
                font-size: $title-size + 2;
                font-size: $title-size + 2;
                color: #454545 !important;
            }

            .address {
                color: $text-gray-m;
                font-size: $title-size-m - 5;
            }
        }
    }
</style>
