<template>
    <widget-card :bodyStyle="bodyStyle" ref="container">
        <template slot="header">
            通知通告
        </template>
        <div class="boardList" :style="{ height: height + 'px' }">
            <router-link
                :underline="false"
                :to="{
                    path: '/announcementDetail',
                    query: {
                        id: item.id
                    }
                }"
                class="board-item"
                v-for="(item, index) in tableData"
                :key="index"
            >
                <span>{{ item.title }}</span>
                <span>{{ item.createdAt }}</span>
            </router-link>
            <div class="empty" v-if="isEmpty">暂无数据</div>
        </div>
    </widget-card>
</template>
<script>
import WidgetCard from './WidgetCard';

export default {
    data() {
        return {
            bodyStyle: {},
            tableData: [],
            height: 200,
            isEmpty: false
        };
    },
    components: {
        WidgetCard
    },
    mounted() {
        this.$nextTick(() => {
            this.height = this.$refs.container.$el.offsetHeight - 100;
        });
        this.$http
            .post('/announcement/all', { size: 10, query: { type: 'NOTIFICATION' } }, { body: 'json' })
            .then(res => {
                this.tableData = res.content;
                this.isEmpty = res.empty;
            });
    }
};
</script>
<style lang="less" scoped>
.info {
    flex-grow: 1;
    text-align: right;
    .text {
        color: #999;
        font-size: 16px;
        margin-bottom: 12px;
    }
    .num {
        font-size: 20px;
        color: #333;
    }
}
.boardList {
    .board-item + .board-item {
        margin-top: 20px;
    }
    .board-item {
        font-size: 14px;
        margin-right: 15px;
        line-height: 20px;
        display: flex;
        justify-content: space-between;

        span {
            &:first-child {
                color: #000;
                font-weight: bold;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }
            &:last-child {
                color: #999;
                flex-shrink: 0;
            }
        }
    }
    overflow: auto;
}

.empty {
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 50px;
}
</style>
