<template>
    
    <BaseContainer class="activity_list">
        <NavBar title="活动列表" />
        <view class="list">
            <navigator v-for="(item, index) in activityList" :key="index" :url="'/pages/activity/index?id='+item.id" class="item">
                <view class="image">
                    <image :src="item.image" class="img">
                </view>
                <view class="text">
                    <view class="name">{{ item.title }}</view>
                    <view class="time">
                        <text class="iconfont iconshijian2"></text>{{ item.time }}
                    </view>
                    <view class="group">
                        <view class="money">
                            ¥<text class="num">{{ item.price }}</text>
                        </view>
                        {{ item.count }}人已报名
                    </view>
                </view>
            </navigator>
        </view>
        <view v-show="loading" class="loading">
            <text class="fa fa-spinner"></text>
        </view>
        <view v-if="loadend" class="loaded">{{loadTitle}}</view>
        <view v-if="!activityList.length && !loading" class="nothing"></view>
    </BaseContainer>
</template>

<script>
    import {
        getActivityList,
        getActivityDetail
    } from "@/api/activity";

    export default {
        data() {
            return {
                activityList: [],
                loadTitle: '',
                loading: false,
                loadend: false,
                page: 1,
                limit: 20
            };
        },
        watch: {},
        created() {
            this.getActivityList();
            // this.init();
        },
        methods: {
            init: function () {
                var that = this;

                that.getActivityList();

            },
            // 获取活动列表
            getActivityList: function () {
                var that = this;
                if (that.loading) return;
                if (that.loadend) return;
                that.loadTitle = '';
                that.loading = true;
                getActivityList({ page: that.page, limit: that.limit }).then(res => {
                    let list = res.data;
                    that.activityList.push.apply(that.activityList, list);
                    that.loadend = list.length < that.limit;
                    that.loadTitle = that.loadend ? '已全部加载' : '上拉加载更多';
                    that.page = that.page + 1;
                    that.loading = false;
                    that.$set(this, 'activityList', that.activityList);
                }).catch(res => {
                    that.loadTitle = '上拉加载更多';
                    that.loading = false;
                })
            }
        },
    };
</script>
<style lang="scss" scoped>
    .loading {
        font-size: 40rpx;
        text-align: center;
        color: #999999;
    }

    .loaded {
        font-size: 28rpx;
        line-height: 72rpx;
        text-align: center;
        color: #999999;
    }

    .nothing {
        position: absolute;
        top: 30%;
        left: 50%;
        width: 400rpx;
        height: 400rpx;
        background: url(getAssetsPath("/wap/first/zsff/images/nothing.png")) center/contain no-repeat;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>