<template>
    <view class="members">
        <view class="users">
            <view class="user" v-if="isAdmin">
                <u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
                </u-avatar>
                <view class="name">邀请用户</view>
            </view>
            <view :class="['user', {'active': item.targetId == currentUser.targetId}]" @longpress="showAction(item)"
                v-for="(item, index) in members" :key="index" @click="toUser(item)">
                <u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
                <view class="name">{{ item.name }}</view>
            </view>
        </view>
        <view class="loadmore">成员总数（{{ members.length }}）</view>

        <u-action-sheet :actions="userActions" :title="actionTitle" cancelText="取消" @close="hideAction"
            @select="doAction" :show="actionShow">
        </u-action-sheet>
    </view>
</template>

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

    export default {
        data() {
            return {
                targetId: '',
                members: [],
                isOwner: false,
                isAdmin: false,
                actionShow: false,
                userActions: [{
                        type: 0,
                        name: '设置管理员',
                        disabled: false
                    },
                    {
                        type: 1,
                        name: '解除管理员',
                        disabled: false
                    },
                    {
                        type: 2,
                        name: '移除成员',
                        disabled: false
                    }
                ],
                actionTitle: '',
                currentUser: {}
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            getGroupBase(this.targetId).then(res => {
                this.isOwner = res.is_owner
                this.isAdmin = res.is_admin
                if (this.isOwner) {
                    this.userActions.push({
                        type: 3,
                        name: '转移群主',
                        disabled: false
                    })
                }
            })
            this.getUserList()
        },
        methods: {
            getUserList() {
                getGroupUsers(this.targetId).then(res => {
                    this.members = res
                })
            },
            toUser(item) {
                uni.navigateTo({
                    url: '/pages/im/friends/info?targetId=' + item.targetId
                })
            },
            showAction(item) {
                this.currentUser = item
                this.actionTitle = item.name
                this.actionShow = true
                // 根据当前用户，是不是管理，来控制按钮的可用性
                this.userActions[0].disabled = true
            },
            hideAction(item) {
                this.actionShow = false
                this.actionTitle = ''
                this.currentUser = {}
                this.userActions[0].disabled = false
                this.userActions[1].disabled = false
            },
            doAction(e) {
                switch (e.type) {
                    case 0:
                        // 设置管理
                        break;
                    case 1:
                        // 取消管理
                        break;
                    case 2:
                        // 移除成员
                        break;
                    case 3:
                        // 转移管理员
                        break;
                }
                this.getUserList()
            },
            inviteUser() {

            }
        }
    }
</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;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                &.active {
                    background-color: $window-color;
                }

                .name {
                    color: $text-gray-m;
                    width: 126rpx;
                    text-align: center;
                    font-size: 26rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-word;
                }
            }
        }

        .loadmore {
            font-size: 26rpx;
            color: $text-gray-m;
            text-align: center;
        }
    }
</style>
