<template>
    <view class="apply" v-if="loaded">
        <u-avatar :src="group.cover || require('@/static/user/cover.png')" size="128" shape="square" />
        <view class="name">
            {{ group.name }}
        </view>

        <u-button class="apply-btn" v-if="group.can_join" @click="applyGroup" text="申请加群" :disabled="disabled"
            color="#34CE98" />
        <view class="" v-else>
            <view class="" v-if="group.is_full">群已满员</view>
            <view class="" v-if="group.deny_apply">禁止申请</view>
            <u-button class="apply-btn2" v-if="group.state === 'accepted'" color="#34CE98" text="进入群聊"
                @click="toGroupChat" />
        </view>

        <u-modal negativeTop="300" :show="modalShow" title="申请原因" showCancelButton @cancel="onHideModal"
            @confirm="onJoinGroup">
            <view class="slot-content">
                <u--input placeholder="申请原因" border="surround" focus v-model="message" />
            </view>
        </u-modal>
    </view>
</template>

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

    export default {
        data() {
            return {
                targetId: '',
                group: {},
                modalShow: false,
                message: '',
                disabled: false,
                loaded: false
            }
        },
        onLoad(e) {
            console.log(e, 'e。。。。。。')
            this.targetId = e.targetId
            // this.targetId = "TG2"
            joinGroupPre(this.targetId).then(res => {
                this.group = res
                this.loaded = true
            }).catch(err => {
                uni.showToast({
                    title: err.message,
                    icon: 'none',
                    mask: true,
                    duration: 3000
                })
            })
        },
        methods: {
            toGroupChat() {
                uni.redirectTo({
                    url: '/pages/im/group/chat?targetId=' + this.targetId
                })
            },
            applyGroup() {
                this.modalShow = true
            },
            onHideModal() {
                this.message = ''
                this.modalShow = false
            },
            onJoinGroup() {
                joinGroup(this.targetId, this.message).then(res => {
                    console.log('申请结果', res);
                    uni.showToast({
                        icon: 'none',
                        title: '申请成功',
                        duration:2000,
                        mast:true
                    })
                    setTimeout(() => {
                        this.$Router.back()
                    }, 2000)
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                })
                this.disabled = true
                this.onHideModal()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .apply {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-height: 100vh;
        background-color: $window-color;

        .u-avatar {
            margin-top: 60rpx;
            width: 180rpx;
            height: 180rpx;
        }

        .name {
            margin: 40rpx 0;
            font-size: $title-size + 2;
        }

        .apply-btn {
            width: 80%;
            font-size: $title-size;
        }
        .apply-btn2{   
            padding: 0 100rpx;
        }
    }
</style>
