<template>
    <view class="members">
        <view class="users">
            <view :class="['user', {'active': item.targetId == currentUser.targetId}]" @longpress="showAction(item)"
                v-for="(item, index) in users" :key="index" @click="toUser(item)">
                <u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
                <view class="name">{{ item.name }}</view>
                <view class="admin" v-if="item.is_admin">管理</view>
                <view class="owner" v-if="item.targetId === adminUid">群主</view>
            </view>
            <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>

        <view @click="loadMore" v-if="members > users.length" class="loadmore">查看更多群成员 ></view>

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

<script>
    import {
        getGroupUsers,
        getGroupBase,

        removeGroupUser,
        setGroupAdmin,
        removeGroupAdmin,
        transferGroupOwner
    } from '@/apis/interfaces/im.js'

    export default {
        props: {
            targetId: {
                type: String,
                default: ''
            },
            count: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                users: [],
                isOwner: false,
                isAdmin: false,
                adminUid: 0,
                members: 0,
                actionShow: false,
                actionMap: [],
                actionTitle: '',
                currentUser: {}
            }
        },
        mounted() {
            this.initGroupInfo()
            this.initUsers()
        },
        methods: {
            initGroupInfo() {
                getGroupBase(this.targetId).then(res => {
                    this.isOwner = res.is_owner
                    this.isAdmin = res.is_admin
                    this.adminUid = res.user_id
                    this.members = res.members
                })
            },
            initUsers() {
                getGroupUsers(this.targetId, this.count).then(res => {
                    this.users = res
                    console.log('群成员列表', res);
                })
            },
            hideAction(item) {
                this.actionShow = false
                this.actionTitle = ''
                this.currentUser = {}
            },
            showAction(item) {
                this.currentUser = item
                this.actionTitle = item.name
                // 只有管理员以上才会弹窗
                if (this.isAdmin) {
                    if (this.isOwner) {
                        if (!item.is_admin) {
                            this.actionMap = [{
                                key: 0,
                                name: '移除成员',
                                disabled: false
                            }, {
                                key: 1,
                                name: '设置管理',
                                disabled: false
                            }, {
                                key: 2,
                                name: '转移群主',
                                disabled: false
                            }]
                        } else {
                            this.actionMap = [{
                                key: 0,
                                name: '移除成员',
                                disabled: false
                            }, {
                                key: 4,
                                name: '取消管理',
                                disabled: false
                            }, {
                                key: 2,
                                name: '转移群主',
                                disabled: false
                            }]
                        }
                    } else {
                        this.actionMap = [{
                            key: 0,
                            name: '移除成员',
                            disabled: false
                        }]
                    }
                    this.actionShow = true
                }
            },
            handleAction(e) {
                switch (e.key) {
                    case 0:
                        removeGroupUser(this.targetId, this.currentUser.targetId).then(res => {
                            uni.showToast({
                                icon: 'none',
                                title: '成员移除成功'
                            })
                        }).catch(err => {
                            uni.showToast({
                                icon: 'none',
                                title: err.message
                            })
                        }).finally(() => {
                            this.initUsers()
                        })
                        break;
                    case 1:
                        setGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
                            uni.showToast({
                                icon: 'none',
                                title: '设置管理成功'
                            })
                        }).catch(err => {
                            uni.showToast({
                                icon: 'none',
                                title: err.message
                            })
                        }).finally(() => {
                            this.initUsers()
                        })
                        break;
                    case 4:
                        removeGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
                            uni.showToast({
                                icon: 'none',
                                title: '取消管理员成功'
                            })
                        }).catch(err => {
                            uni.showToast({
                                icon: 'none',
                                title: err.message
                            })
                        }).finally(() => {
                            this.initUsers()
                        })
                        break;
                    case 2:
                        uni.showModal({
                            title: '转让群主',
                            content: '这个操作不可逆转，确定要转让群主身份么？',
                            success: (res) => {
                                if (res.confirm) {
                                    transferGroupOwner(this.targetId, this.currentUser.targetId).then(
                                        res => {
                                            uni.showToast({
                                                icon: 'none',
                                                title: '群主转让成功'
                                            })
                                        }).catch(err => {
                                        uni.showToast({
                                            icon: 'none',
                                            title: err.message
                                        })
                                    }).finally(() => {
                                        this.initUsers()
                                        this.initGroupInfo()
                                    })
                                }
                            }
                        })
                        break;
                }
            },
            inviteUser() {
                uni.navigateTo({
                    url: '/pages/im/group/invite?targetId=' + this.targetId
                })
            },
            loadMore() {
                uni.navigateTo({
                    url: '/pages/im/group/users?targetId=' + this.targetId
                })
            },
            toUser(item) {
                if (item.targetId == this.$store.getters.sender.userId) {
                    uni.navigateTo({
                        url: '/pages/im/friends/mine?targetId=' + item.targetId
                    })
                } else {
                    uni.navigateTo({
                        url: '/pages/im/friends/info?targetId=' + item.targetId
                    })
                }
            }
        }
    }
</script>


<style lang="scss" scoped>
    .members {

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

            .user {
                overflow: hidden;
                position: relative;
                width: 126rpx;
                margin-left: 20rpx;
                margin-bottom: 20rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-radius: 0 10rpx 0 0;

                &.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;
                }

                .admin {
                    position: absolute;
                    background-color: $main-color;
                    transform: rotate(45deg);
                    color: #ffffff;
                    font-size: 12rpx;
                    width: 100rpx;
                    padding-top: 30rpx;
                    text-align: center;
                    right: -45rpx;
                    top: -20rpx;
                }
                
                .owner {
                    position: absolute;
                    background-color: $text-price;
                    transform: rotate(45deg);
                    color: #ffffff;
                    font-size: 12rpx;
                    width: 100rpx;
                    padding-top: 30rpx;
                    text-align: center;
                    right: -45rpx;
                    top: -20rpx;
                }
            }
        }

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