<template>
    <view class="announce">
        <u-skeleton rows="2" :loading="loading" avatar :rows="5">
            <view v-for="(item,index) in announcements" :key="index" class="item">
                <view class="header">
                    <u-avatar :src="item.user.portraitUrl"></u-avatar>
                    <view class="user">
                        <view class="name">{{ item.user.name }}</view>
                        <view class="time">{{ item.created_at }}</view>
                    </view>
                    <view class="delete" v-if="isAdmin" @click="onDelete(item.announcement_id)">删除</view>
                </view>
                <view class="content">{{ item.content }}</view>
            </view>
        </u-skeleton>
    </view>
</template>

<script>
    import {
        getGroupInfo,
        getGroupAnnouncements,
        deleteGroupAnnouncement
    } from '@/apis/interfaces/im.js'

    export default {
        data() {
            return {
                targetId: '',
                announcements: [],
                loading: true,
                isAdmin: false
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            getGroupInfo(this.targetId).then(res => {
                this.isAdmin = res.group.is_admin
            })
            this.initData()
            uni.$on('groupAnnouncementCreated', this.initData)
        },
        onUnload() {
            uni.$off('groupAnnouncementCreated')
        },
        onNavigationBarButtonTap() {
            if (this.isAdmin) {
                uni.navigateTo({
                    url: '/pages/im/group/announceCreate?targetId=' + this.targetId
                })
            } else {
                uni.showToast({
                    icon: 'none',
                    title: '没有权限'
                })
            }
        },
        methods: {
            initData() {
                getGroupAnnouncements(this.targetId).then(res => {
                    this.announcements = res
                    this.loading = false
                })
            },
            onDelete(aId) {
                uni.showModal({
                    title: '删除公告',
                    success: (res) => {
                        if (res.confirm) {
                            deleteGroupAnnouncement(this.targetId, aId).then(res => {
                                uni.showToast({
                                    icon: 'none',
                                    title: '删除成功'
                                })
                                this.initData()
                            })
                        }
                    }
                })
            }
        }
    }
</script>

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

        .item {
            border-bottom: solid 1rpx #f9f9f9 !important;
            padding-top: $padding;

            .header {
                display: flex;
                flex-direction: row;
                align-items: center;

                .user {
                    margin-left: $padding;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .name {}

                    .time {
                        font-size: 24rpx;
                        color: $text-gray-m;
                    }
                }

                .delete {
                    color: $text-price;
                    font-size: 28rpx;
                }
            }

            .content {
                padding: $padding;
                font-size: 34rpx;
            }
        }
    }
</style>
