<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 newsList" 
                    :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.title}}</p>
                            <p class="list-card-content-abstract">{{item.abstract}}</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,PullRefresh,List } from 'vant';

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

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

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

                        this.newsList = this.newsList.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:'news_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>