<template>
    <view class="member--list">
        <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)">
                <view class="avatar">
                    <u-avatar :size="avatarSize" shape="square"
                        :src="contact(item.targetId).portraitUrl || require('@/static/user/cover.png')" />
                    <view class="admin" v-if="item.is_admin === 1">管理</view>
                    <view class="owner" v-if="item.is_admin === 2">群主</view>
                </view>
                <view class="name">{{ item.name }}</view>
            </view>
            <view class="user" v-if="canInvite">
                <u-avatar @click="inviteUser" :size="avatarSize" shape="square" icon="plus" bgColor="#f9f9f9"
                    color="#c7c7c7" />
                <view class="name">邀请好友</view>
            </view>
        </view>

        <view class="loadmore">
            <u-icon name="arrow-right" @click="loadMore" v-if="members > users.length" color="#999" labelColor="#999"
                label="查看更多群成员" labelPos="left" :labelSize="labelSize" :size="iconSize" />
        </view>

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

<script>
    import {
        getGroupUsers,
        getGroupBase,
        removeGroupUser,
        setGroupAdmin,
        removeGroupAdmin,
        transferGroupOwner
    } from '@/apis/interfaces/im.js'
    import utils from '@/utils/index.js'
    import imBase from '../mixins/imBase.js'
    
    export default {
        mixins: [
            imBase
        ],
        props: {
            targetId: {
                type: String,
                default: ''
            },
            count: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                users: [],
                isOwner: false,
                isAdmin: false,
                canInvite: false, //  是否可以开启邀请
                adminUid: 0,
                members: 0,
                actionShow: false,
                actionMap: [],
                actionTitle: '',
                currentUser: {},
                avatarSize: 40,
                labelSize: 14,
                iconSize: 14
            }
        },
        created() {
            this.avatarSize = utils.rpx2px(84)
            this.labelSize = utils.rpx2px(24)
            this.iconSize = utils.rpx2px(26)
        },
        mounted() {
            this.initGroupInfo()
            getGroupUsers(this.targetId, this.count).then(res => {
                this.users = res
                res.map(item => {
                    this.$store.dispatch('updateContact', item)
                })
            })
        },
        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
                    this.canInvite = res.can_invite
                })
            },
            initUsers() {
                getGroupUsers(this.targetId, this.count).then(res => {
                    this.users = res
                })
                this.currentUser = {}
            },
            hideAction(item) {
                this.actionShow = false
            },
            showAction(item) {
                if (item.is_admin == 2) {
                    return
                }
                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) {
                                    console.log(this.targetId, this.currentUser.targetId);
                                    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>
    .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;
            }

            .avatar {
                border-radius: 0 8rpx 0 0;
                position: relative;
                width: 84rpx;
                overflow: hidden;

                .admin {
                    position: absolute;
                    background-color: $main-color;
                    transform: rotate(45deg);
                    color: #ffffff;
                    font-size: 16rpx;
                    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: 16rpx;
                    width: 100rpx;
                    padding-top: 30rpx;
                    text-align: center;
                    right: -45rpx;
                    top: -20rpx;
                }

            }

            .name {
                color: 20rpx;
                width: 126rpx;
                padding-top: 6rpx;
                text-align: center;
                font-size: 22rpx !important;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: break-word;
                color: $text-gray-m !important;
            }

        }
    }

    .loadmore {
        font-size: 26rpx;
        color: $text-gray-m;
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
</style>
