<template>
    <view class="container">
        <view class="members u-border-bottom">
            <group-user-list :targetId="targetId" :count="14" />
        </view>

        <u-cell-group class="cells">
            <u-cell isLink title="群公告" :label="announcement" @click="toAnnouncement"></u-cell>
            <u-cell isLink title="二维码" @click="showGroupQrCode"></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_admin">
            <u-cell isLink title="修改群聊名称" :value="groupName" @click="onGroupName"></u-cell>
            <u-cell isLink title="修改群头像" @click="onGroupAvatar">
                <u-avatar slot="value" size="25" shape="square" :src="group.cover"></u-avatar>
            </u-cell>
            <u-cell isLink v-if="group.is_owner" title="准入方式" :value="joinType" @click="onChangeJoinType"></u-cell>
        </u-cell-group>

        <view class="cells actions u-border-top" v-if="loaded">
            <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>

        <u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal"
            @confirm="onChangeGroupName">
            <view class="slot-content">
                <u--input placeholder="群名称" border="surround" focus v-model="groupName"></u--input>
            </view>
        </u-modal>

        <u-modal :show="qrCodeShow" :title="group.name" @confirm="qrCodeShow = false">
            <view class="slot-content">
                <uqrcode class="info-code-src" :size="198" :text="qrContent" />
            </view>
        </u-modal>

        <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions"
            @close="showActions=false">
        </u-action-sheet>
    </view>
</template>

<script>
    import {
        getGroupInfo,
        updateGroup,
        quitGroup,
        dismissGroup
    } from '@/apis/interfaces/im.js'
    import {
        uploads
    } from '@/apis/interfaces/uploading'
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
    import groupUserList from '../components/groupUserList'

    export default {
        components: {
            groupUserList
        },
        data() {
            return {
                targetId: '',
                group: {},
                conversationType: 3,
                announcement: '',
                status: false,
                isTop: false,
                loaded: false,
                modalShow: false,
                groupName: '',
                qrCodeShow: false,
                qrContent: 'JOINGROUP|',
                joinType: '',
                joinTypeMap: [],
                showActions: false
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            this.qrContent += e.targetId
            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
                }
            })
            this.initData()
            uni.$on('groupAnnouncementCreated', this.initData)
        },
        onUnload() {
            uni.$off('groupAnnouncementCreated')
        },
        methods: {
            initData() {
                getGroupInfo(this.targetId).then(res => {
                    this.group = res.group
                    this.groupName = res.group.name
                    this.announcement = res.announcement
                    this.members = res.members
                    this.loaded = true
                    this.joinTypeMap = res.join_type_map.map(item => {
                        item.disabled = item.key == res.join_type
                        return item
                    })
                    this.joinType = res.join_type_map.filter(item => {
                        return item.key == res.join_type
                    })[0].name
                }).catch(err => {
                    console.log('getGroupInfo ERR', err);
                    uni.showToast({
                        icon: 'none',
                        title: '群不存在'
                    })
                })
            },
            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
                    })
                })
            },
            toAnnouncement() {
                uni.navigateTo({
                    url: '/pages/im/group/announcement?targetId=' + this.targetId
                })
            },
            showGroupQrCode() {
                this.qrCodeShow = true
            },
            onGroupName() {
                this.modalShow = true
            },
            onChangeGroupName() {
                if (this.groupName != this.group.name) {
                    updateGroup(this.targetId, {
                        name: this.groupName
                    }).then(res => {
                        this.modalShow = false
                        uni.showToast({
                            icon: 'none',
                            title: '群名称修改成功'
                        })
                    })
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '无修改'
                    })
                }
            },
            onHideModal() {
                this.modalShow = false
                this.groupName = this.group.name
            },
            // 修改群头像
            onGroupAvatar() {
                uni.chooseImage({
                    count: 1,
                    sourceType: ['album'],
                    crop: {
                        quality: 100,
                        width: 128,
                        height: 128,
                        resize: true
                    },
                    success: res => {
                        console.log(res);
                        let path = res.tempFiles.map((val, index) => {
                            return {
                                name: 'uploads' + index,
                                uri: val.path
                            }
                        })
                        uploads(path).then(path => {
                            updateGroup(this.targetId, {
                                cover: path.path[0]
                            }).then(res => {
                                uni.showToast({
                                    icon: 'none',
                                    title: '群头像修改成功'
                                })
                                this.modalShow = false
                                this.group.cover = path.url[0]
                            })
                        }).catch(err => {
                            uni.showToast({
                                title: err.message,
                                icon: 'none'
                            })
                        })
                    },
                    fail: (err) => {
                        console.log(err);
                    }
                })
            },
            onChangeJoinType() {
                this.showActions = true
            },
            doAction(e) {
                updateGroup(this.targetId, {
                    join_type: e.key
                }).then(res => {
                    uni.showToast({
                        icon: 'none',
                        title: '修改成功'
                    })
                    this.joinTypeMap = this.joinTypeMap.map(item => {
                        if (item.key == e.key) {
                            item.disabled = true
                        } else {
                            item.disabled = false
                        }
                        return item
                    })
                    this.initData()
                    this.joinType = e.name
                    this.showActions = false
                }).catch(err => {
                    console.log(err);
                    uni.showToast({
                        icon: 'error',
                        title: err.message
                    })
                })
            },
            onClean() {
                uni.showModal({
                    title: '清空聊天记录',
                    content: '清空聊天记录，只会清空本地的记录，其他成员不会变化',
                    success: (res) => {
                        if (res.confirm) {
                            RongIMLib.deleteMessages(3, this.targetId, () => {
                                uni.showToast({
                                    icon: 'none',
                                    title: '清空成功'
                                })
                                uni.$emit('cleanGroupMessage')
                            })
                        }
                    }
                })
            },
            onDismiss() {
                uni.showModal({
                    title: '解散群聊',
                    success: (res) => {
                        if (res.confirm) {
                            dismissGroup(this.targetId).then(res => {
                                uni.showToast({
                                    icon: 'none',
                                    title: '解散成功'
                                })
                                uni.switchTab({
                                    url: '/pages/im/index'
                                })
                            })
                        }
                    }
                })
            },
            onQuite() {
                uni.showModal({
                    title: '退出群聊',
                    success: (res) => {
                        if (res.confirm) {
                            quitGroup(this.targetId).then(res => {
                                uni.showToast({
                                    icon: 'none',
                                    title: '退出群聊成功'
                                })
                                // 移除指定的会话
                                RongIMLib.removeConversation(this.conversationType, this.targetId)

                                uni.switchTab({
                                    url: '/pages/im/index'
                                })
                            }).catch(err => {
                                console.log(err);
                            })
                        }
                    }
                })
            }
        }
    }
</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;
    }

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

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