<template>
    <view class="container">
        <view class="members u-border-bottom">
            <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>
                    <view class="name">{{ item.name }}</view>
                </view>
                <view class="user">
                    <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" class="loadmore">查看更多群成员</view>
        </view>

        <u-cell-group class="cells">
            <u-cell isLink title="群公告" :label="announcement" @click="toAnnouncement"></u-cell>
            <u-cell title="聊天置顶">
                <u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch>
            </u-cell>
            <u-cell title="免打扰">
                <u-switch slot="value" size="20" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
            </u-cell>
        </u-cell-group>

        <u-cell-group class="cells" v-if="group.is_owner">
            <u-cell isLink title="修改群聊名称" :value="group.name" @click="onGroupName"></u-cell>
            <u-cell isLink title="修改群头像">
                <u-avatar slot="value" size="24" shape="square" :src="group.cover"></u-avatar>
            </u-cell>
        </u-cell-group>

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

<script>
    import {
        getGroupInfo
    } from '@/apis/interfaces/im.js'
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'

    export default {
        data() {
            return {
                targetId: '',
                group: {},
                conversationType: 3,
                announcement: '',
                members: [],
                status: false,
                isTop: false,
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            getGroupInfo(this.targetId).then(res => {
                this.group = res.group
                console.log(this.group);
                this.announcement = res.announcement
                this.members = res.members
            })
            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
                status
            }) => {
                this.status = !Boolean(status)
            })
            RongIMLib.getConversation(this.conversationType, this.targetId, ({
                code,
                conversation
            }) => {
                if (code == 0) {
                    this.isTop = conversation.isTop
                }
            })
        },
        methods: {
            setStatus() {
                RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status,
                    ({
                        status
                    }) => {
                        this.status = !Boolean(status)
                    })
            },
            setTop() {
                RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
                    RongIMLib.getConversation(this.conversationType, this.targetId, ({
                        conversation
                    }) => {
                        this.isTop = conversation.isTop
                    })
                })
            },
            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
                })
            },
            onGroupName() {

            },
            onClean() {
                uni.showModal({
                    title: '清空聊天记录',
                    content: '清空聊天记录，只会清空本地的记录，其他成员不会变化',
                    success: (res) => {
                        if (res.confirm) {
                            RongIMLib.deleteMessages(3, this.targetId, () => {
                                uni.showToast({
                                    icon: 'none',
                                    title: '清空成功'
                                })
                            })
                        }
                    }
                })
            },
            onDismiss() {
                uni.showToast({
                    icon: 'none',
                    title: '开发中'
                })
            },
            onQuite() {
                uni.showToast({
                    icon: 'none',
                    title: '开发中'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        min-height: 100vh;
        background: $window-color;
    }

    .cells {
        margin-top: $padding;
        background-color: white;
    }

    .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;
                    white-space: nowrap;
                    word-break: break-word;
                }
            }
        }

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

    .actions {
        margin-top: $padding;
        text-align: center;

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