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

            <!-- 多个设备时可能需要用到 -->
            <!-- <van-dropdown-menu >
                <van-dropdown-item v-model="applyState" :options="applyOptions" @change="condSet('applyState', $event)" />
                <van-dropdown-item v-model="deviceId" :options="deviceOptions"  @change="condSet('deviceId', $event)" />
            </van-dropdown-menu> -->
        </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"
                :immediate-check="true"
            >
                <div 
                    class="list-card-item"
                    v-for="item in courseList" 
                    :key="item.id"
                    @click="showDetail(item)"
                >
                    <!-- 图片 -->
                    <div class="list-card-image">
                        <van-image
                            width="100"
                            height="100"
                            :src="item.cover_image"
                        />
                    </div>
                    
                    <!-- 内容 -->
                    <div class="list-card-content">
                        <div>
                            <p class="list-card-content-title">{{item.name}}</p>
                            <p class="list-card-content-abstract">{{item.introduction}}</p>
                        </div>
                        <p class="list-card-content-bottom">已有<span style="color:#00f;"> {{item.apply_count || 0}} </span>人报名</p>
                    </div>
                </div>

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

    </div>

</template>

<script type="text/babel">
import Vue from 'vue';

import { PullRefresh,Empty,List,Card,NavBar,Sticky,Image,DropdownMenu,DropdownItem } from 'vant';

Vue.use(PullRefresh);
Vue.use(Empty);
Vue.use(List);
Vue.use(NavBar);
Vue.use(Card);
Vue.use(Sticky);
Vue.use(Image);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);

export default {
    data() {
        return {
            // 顶部下拉菜单
            applyState: '',
            applyOptions: [
                { text: '全部课程', value: '' },
                { text: '已报名', value: 1 },
            ],
            deviceId: '',
            deviceOptions: [],
            //
            error: false,
            loading: false,
            finished: false,
            refreshing: false,
            defaultImage: 'https://rltest.oss-cn-hangzhou.aliyuncs.com/noimg.jpg',
            checkedStudentId: null,
            userid: null,
            openid: null,
            courseList: [],
            page: 0,
        };
    },
    created() {
        this.userid = localStorage.getItem("userid");
        this.openid = localStorage.getItem("openid");
        
        // this.getDevices();
    },
    methods: {
        /**
         * 筛选
         */
        condSet(type, value) {
            this[type] = value;
            
            if (this.deviceId) {
                this.refreshing = true;
                this.onRefresh();
            }
        },
        /**
         * 加载数据
         */
        onLoad() {
            /* if (this.applyState && !this.deviceId) {
                this.$notify('请选择用户');
                return;
            }
 */
            if (this.refreshing) {
                this.courseList = [];
                this.refreshing = false;
                this.page = 0;
            }
            this.page += 1;
            
            // let url = '/getUserCourses&userid='+this.userid+'&openid='+this.openid+'&page='+this.page+'&applyState='+this.applyState+'&deviceId='+this.deviceId;
            let url = '/getUserCourses&userid='+this.userid+'&openid='+this.openid+'&page='+this.page;

            this.$http.get(url)
                .then(res => {
                    let resp = res.data;
                    if(resp.success){

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

                        let total = parseInt(resp.data.total);
                        let pageSize = parseInt(resp.data.limit);
                        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){
            let query = {
                id: item.id,
            }
            this.$router.push( {name:'courses_detail', query: query} );
        },
        /**
         * 获取设备
         */
        getDevices() {
            this.$http.get("/getMyDevices&userid=" + this.userid + '&openid=' + this.openid)
                .then(res => {
                    let deviceList = res.data.data || [];
                    if (deviceList.length) {
                        deviceList.forEach(item => {
                            let text = item.imei;
                            if (item.device_name) {
                                text = item.device_name + '(' + text + ')';
                            }
                            this.deviceOptions.push({
                                text: text,
                                value: item.id
                            })
                        });
                        // 默认选择第一个
                        this.deviceId = deviceList[0].id || '';

                        this.onRefresh();
                    } else {
                        this.deviceOptions = [{
                            text: '请添加设备',
                            value: '',
                        }]
                    }

                })
                .catch(res => {
                    console.error('get devices error');
                });
        },

    }
};
</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>