<template>
    <view class="content">
        <view class="box" v-if="listArr.length > 0">
            <view class="list" v-for="(item, index) in listArr" @click="$Router.push({ name: 'noticeDetails', params: {id: item.notification_id }})">
                <view class="title">
                    {{ item.title }}
                </view>
                <view class="text">
                    {{ item.content }}<view class="more">点我查看<u-icon name="arrow-right-double" color="#34CE98" bold size="14" style="display: inline-block;"></u-icon></view>
                </view>
            </view>
            <block v-if="page.total_page > 1">
                <u-loadmore :status="status" />
            </block>
        </view>
        <view class="noMessage" v-else>
            <u-empty
                mode="message"
            />
        </view>
    </view>
</template>

<script>
    import { lists } from '@/apis/interfaces/notice'
    export default {
        data() {
            return {
                listArr : [],
                status  : 'loadmore',
                page    : ''
            };
        },
        mounted() {
            // 获取列表
            this.getList()
        },
        methods: {
            // 列表
            getList(pages){
            	lists(this.$Route.query.type, {
                    page: pages
                }).then(res => {
                    if(res.page.current == 1){
                        this.listArr = []
                    }
                    this.listArr  = this.listArr.concat(res.data)
                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
                    this.page     = res.page
            	})
            }
        },
        // 下拉加载
        onReachBottom() {
            if(this.page.has_more){
                this.status = 'loading'
                let pages = this.page.current + 1
                // 获取列表
                this.getList(pages)
                return
            }
            this.status = 'nomore'
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        background-color: $window-color;
		min-height: 100vh;
    }
    
    .box {
        padding: $padding;
        box-sizing: border-box;
        .list {
            padding: $padding;
            box-sizing: border-box;
            border-radius: $radius;
            background-color: white;
            margin-bottom: $margin;
            .title {
                font-size: $title-size-lg;
                margin-bottom: $margin - 10;
                font-weight: bold;
            }
            .text {
                font-size: $title-size-m;
                color: $text-gray-m;
                .more {
                    color: $main-color;
                    padding-left: $padding - 10;
                }
            }
        }
    }
    
    .noMessage {
        background-color: white;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>
