<template>
    <view>
        <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 class="user">
                    <u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee"
                        color="#999999"></u-avatar>
                    <text class="name">邀请用户</text>
                </view>
            </view>

            <view class="">
                <text @click="loadMore" class="loadmore">查看更多群成员</text>
            </view>
        </view>

        <u-cell-group>
            <u-cell isLink title="群公告" :label="announcement" @click="toAnnouncement"></u-cell>
            <u-cell isLink title="聊天置顶"></u-cell>
            <u-cell isLink title="免打扰"></u-cell>
        </u-cell-group>

        <u-cell-group v-if="group.is_owner">
            <u-cell isLink title="修改群聊名称" :value="group.name"></u-cell>
            <u-cell isLink title="修改群头像"></u-cell>
        </u-cell-group>

        <view class="actions u-border-top">
            <view class="action u-border-bottom" @click="onClean">
                <text>清空聊天记录</text>
            </view>
            <view class="action u-border-bottom" v-if="group.is_owner" @click="onDismiss">
                <text>解散群聊</text>
            </view>
            <view class="action u-border-bottom" v-else @click="onQuite">
                <text>删除并退出</text>
            </view>
        </view>
    </view>
</template>

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

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

            },
            loadMore() {
                uni.navigateTo({
                    url: '/pages/im/group/users?targetId=' + this.targetId
                })
            },
            toAnnouncement() {
                uni.navigateTo({
                    url: '/pages/im/group/announcement?targetId=' + this.targetId
                })
            },
            onClean() {
                
            },
            onDismiss() {
                
            },
            onQuite() {
                
            }
        }
    }
</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;
                }
            }
        }

        .loadmore {
            font-size: 28rpx;
            color: $text-gray-m;
            text-align: center;
        }
    }

    .actions {
        margin-top: $padding;

        .action {
            color: $text-price;
            justify-content: center;
        }
    }
</style>
