<template>
<div class="app-container">
    <van-sticky>
        <van-nav-bar title="研学活动" left-text="返回" left-arrow @click-left="$router.back()" />
    </van-sticky>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div 
                class="list-card-item"
                v-for="item in activityList" 
                :key="item.id"
                @click="showDetail(item)"
            >
                <!-- 图片 -->
                <div class="list-card-image">
                    <van-image
                        width="100"
                        height="100"
                        :src="item.cover"
                    />
                </div>
                <!-- 内容 -->
                <div class="list-card-content">
                    <div>
                        <p class="list-card-content-title">{{item.name}}</p>
                        <p class="list-card-content-abstract">开始时间：{{item.start_time}}</p>
                        <p class="list-card-content-abstract">结束时间：{{item.end_time}}</p>
                        <p class="list-card-content-abstract">计划人数：{{item.act_plan_num}}（已有 <span style="color:blue">{{item.apply_count}}</span> 人报名）</p>
                    </div>
                    <p class="list-card-content-bottom" >发布于：{{item.updated_at_datetime}}</p>
                </div>
            </div>

        </van-list>
    </van-pull-refresh>

</div>
</template> 

<script type="text/babel">

import Vue from 'vue';
import { NavBar,Sticky,Image,PullRefresh,List } from 'vant';

Vue.use(NavBar);
Vue.use(Sticky);
Vue.use(Image);
Vue.use(PullRefresh);
Vue.use(List);

export default {
    data() {
        return {
            error: false,
            loading: false,
            finished: false,
            refreshing: false,
            userid: null,
            openid: null,
            page: 0,
            activityList: [],
        }
    },
    created(){
        this.userid = localStorage.getItem("userid");
        this.openid = localStorage.getItem("openid");
    },
    methods: {
        /**
         * 加载数据
         */
        onLoad() {
            if (this.refreshing) {
                this.activityList = [];
                this.refreshing = false;
                this.page = 0;
            }
            this.page += 1;

            this.$http.get('/getActivity&userid='+this.userid+'&openid='+ this.openid + '&page=' + this.page)
                .then(res => {
                    let resp = res.data;
                    if(resp.success){

                        this.activityList = this.activityList.concat(resp.data.list) ;

                        let total = parseInt(resp.data.total);
                        let pageSize = parseInt(resp.data.pageSize);
                        if (total <= pageSize * this.page) {
                            this.finished = true;
                        }

                    }else{
                        this.$notify({
                            message: resp.message || '出错了',
                        })
                        this.page -= 1;
                        this.error = true;
                    }

                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                    this.finished = true;
                })
        },
        /**
         * 刷新
         */
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        showDetail(item){
            this.$router.push( {name:'activities_detail', query: {id: item.id}} );
        },

    }
}
</script>
<style scoped>

.list-card-item {
    display: flex;
    height: 120px;
    padding: 10px 0;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
}
.list-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 5px;
    height: 100%;
    width: 100%;
}
.list-card-content-title {
    font-weight: 600;

    display: -webkit-box !important;
    overflow: hidden;

    text-overflow: ellipsis;
    word-break: break-all;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.list-card-content-abstract {
    
    display: -webkit-box !important;
    overflow: hidden;
    
    /* text-indent: 2em; */
    text-overflow: ellipsis;
    word-break: break-all;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.list-card-content-bottom {
    text-align: right;
}
</style>