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

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

    export default {
        data() {
            return {
                targetId: '',
                content: ''
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
        },
        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;
            }
        }
        .u-button {
            margin-top: $padding;
        }
    }
</style>
