<template>
    <view class="create">
        <view class="create-title">公告内容</view>

        <block v-if="type === 'check'">
            <view class="content"> {{content}} </view>
        </block>

        <block v-else>
            <u--textarea v-model="content" count height="240" maxlength="240" placeholder="请输入公告内容" />
            <u-button type="primary" text="发布" :disabled="disabled" @click="onCreate" color="#34CE98" />
        </block>
    </view>
</template>

<script>
    import {
        createGroupAnnouncement,
        getGroupAnnouncement
    } from '@/apis/interfaces/im.js'
    import onGroupDismiss from '../mixins/onGroupDismiss.js'

    export default {
        mixins: [
            onGroupDismiss
        ],
        data() {
            return {
                targetId: '',
                content: '',
                aId: '',
                type: '' // cheack ' 查看详情'
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            if (e.aId) {
                this.type = e.type
                uni.setNavigationBarTitle({
                    title: '群公告'
                })
                this.aId = e.aId
                getGroupAnnouncement(this.targetId, this.aId).then(res => {
                    this.content = res.content
                }).catch(err => {
                    if (err.status_code == 404) {
                        this.$nextTick(() => {
                            uni.navigateBack()
                        })
                    } else {
                        uni.showToast({
                            title: err.message,
                            icon: 'none',
                            mask: true
                        })
                    }
                })
            }
        },
        computed: {
            disabled() {
                return this.content.length == 0 || this.content.length > 200
            }
        },
        methods: {
            onCreate() {
                createGroupAnnouncement(this.targetId, this.content).then(res => {
                    uni.$emit('groupAnnouncementCreated')
                    uni.showToast({
                        title: '发布成功',
                        success: () => {
                            setTimeout(() => {
                                uni.navigateBack()
                            }, 1000)
                        }
                    })
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .create {
        padding: $padding;

        .create-title {
            font-size: $title-size + 4;
            padding: $padding - 10 0 $padding - 10 $padding - 10;
            color: $text-color;
            font-weight: 800;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                width: 10rpx;
                height: 34rpx;
                background-color: $main-color;
                left: 0;
                top: 26rpx;
            }
        }

        .content {
            color: $text-color;
            font-size: $title-size;
            line-height: 1.7;
        }

        .u-button {
            margin-top: $padding;
        }
    }
</style>
