<template>
    <section>
        <GroupTitle groupTitle="大家在看" :isShowNum="isShowNum"/>
        <div class="cource-teach" id="adjust-u">
            <!-- <div :class="isFixed ? 'cource-header fixed' : 'cource-header'" :style="{height:menuptop}">

                <div class="fixBox">
                    <div class="bgFill" :style="{height:ptop}"></div>
                    <div class="font-title">
                        {{title}}
                    </div>
                </div>
            </div> -->
            <div class="couse-cont">
                <!-- <div class="couse-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" :style="'height:'+clientHeight"> -->
                <div class="couse-list" infinite-scroll-disabled="loading" infinite-scroll-distance="10" :style="'height:'+clientHeight">
                    <div v-show="index < 4" :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" 
                        v-for="(item,index) in cParamData">
                        <div class="course-pic" @click="goToPage(item)">
                            <img :src="item.courseInfoUrl" class="pic-tec" />
                            <span class="course-tag">{{item.disName}}</span>
                        </div>
                        <p class="course-txt">
                            {{item.name}}
                        </p>
                        <div class="course-opt">
                            <span class="opt-info">{{!item.showTime ? '' : item.showTime + ' |'}} {{item.joinNum}}人已学</span>
                            <span :class="item.whetherFavors==2?'opt collect':'opt collected'" @click="collectFun(item.whetherFavors,item.id,item.name)">
                            {{item.whetherFavors==2?'收藏':'已收藏'}}
                        </span>

                        </div>
                    </div>
                </div>
                <!-- <div class="loading-box">
                    <span class="loading-more-txt" v-if="isLoading">努力加载中...</span>
                    <span class="no-more" v-if="noMore">没有更多了......</span>
                </div> -->

            </div>
            <!-- <LOADING v-if="isShowLoading"></LOADING> -->
        </div>
    </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import {
    m_search_history_no_search_result_d,
    m_search_history_no_search_result_m
    } from '@/utils/buryingPoint'
import {
    Loadmore,
    Spinner,
    InfiniteScroll
} from 'mint-ui';
import GroupTitle from '@/components/business/group-title';
// import { setEventByModuleCode } from '@/utils/index'
// import LOADING from '../../components/common/loading-new';

export default {
    data() {
        return {
            token: '',
            isShowNum: false,
            list: [],
            pageNo: 2,
            isDisabled: false,
            pageSize: 10,
            title: '为您推荐',
            isCollected: '',
            allLoaded: true,
            loading: false, //是否滚动加载
            isLoading: false, //加载中
            noMore: false,
            clientHeight: 'auto',
            isShowLoading: true,
            menuHeight: 0,
            ptop: 20,
            popHeight: 0,
            menuptop: 0,
            isReauestBack: true,
        }
    },
    props: {
        isFixed: {
            default: false,
            type: Boolean
        },
        statusBarHeight: {
            type: Number,
            default: 0
        },
        adjustPageNo: {
            type: Number,
            default: 1
        },
        userToken: {
            type: String,
            default: ''
        },
        parmData: {
            type: Array,
            default: () => []
        },
    },
    created() {
        let _this = this
        window.__getUserInfo_CA = function(params){
            _this.token = params.userToken
            _this.getData()
            _this.setUserInfo(params)
        }
        window.__refresh = function (parm) {
            _this.getUserInfo();
        }
    },
    mounted() {
        this.getUserInfo()
    },
    computed: {
        ...mapGetters({
            userInfo: 'userInfo',
            refreshNum: 'refreshNum' 
        }),
        cParamData() {
            if(this.list && this.list.length){
                return this.list
            } else {
                return this.parmData
            }
        }
    },
    watch: {
        refreshNum(val) {
            this.getData()
        }
    },
    components: {
        GroupTitle
    },
    methods: {
        ...mapActions({
            setUserInfo: 'setUserInfo'
        }),
        getUserInfo: function () {
            rocNative.getUserInfo({'__funcName': '__getUserInfo_CA'})
        }, 
        //跳转
        goToPage(item) {
            this.pageBurialPoin({
                ...m_search_history_no_search_result_d,
                labelId: item.id,
                labelValue: item.name,
                createdTime: new Date().getTime(),
            })
            this.pageNo = 1;
            this.$emit("setRefrshParm", {
                isclick: true
            })
            let itemData = {
                "title": item.name,
                "imageUrl": "",
                "appModuleInfo": {
                    "code": "M200",
                    "type": 4,
                    "name": "课程介绍页",
                    "paramFlag": 1,
                    "paramList": [{
                            "key": "className",
                            "value": "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
                            "type": 4,
                            "seqNo": 1
                        },
                        {
                            "key": "courseId",
                            "value": `${item.id}`,
                            "type": 1,
                            "seqNo": 2
                        }
                    ]
                }
            };
            let paramList = this.setEventByModuleCode(itemData);
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
        },

        //滑动加载更多
        loadMore() {
            let _this = this;
            if (_this.isReauestBack) {
                _this.isLoading = true;
                //埋点
                this.pageBurialPoin({
                    ...m_search_history_no_search_result_m,
                    labelValue: item.name,
                    createdTime: new Date().getTime(),
                })
                setTimeout(() => {
                    _this.getData('loadMore');
                }, 500)
            }
        },

        //收藏 取消收藏
        collectFun(status, id, name) {
            // alert(this.userToken);
            status = status == 1 ? 2 : 1;
            this.pageBurialPoin({
                menuLevel: 1,
                menuCode: 'm_search',
                functionCode: 'f_recommend',
                actionCode: 'c_collect',
                labelId: id,
                labelValue: name,
            })
            let _this = this,
                parm = {
                    token: _this.token,
                    type: status,
                    courseId: id,
                    setEntry: 'headers',
                }
            _this.POST('contents/favors', parm).then(function (res) {
                if (res.code === '000000') {
                    // _this.handelData(id, status);
                    _this.getData()
                } else {
                    rocNative.showNativeToast({
                        message: '注册登陆后才能收藏哦'
                    })
                }
            })
        },

        handelData(id, status) {
            let d = this.list;
            for (let i = 0; i < d.length; i++) {
                if (id == d[i].id) {
                    d[i].whetherFavors = status;
                }
            }
            this.list = (d || []).slice()
        },

        //加载数据
        getData(type) {
            let _this = this,
                parm = {
                    pageNo: 1,
                    pageSize: 4,
                    token: _this.token,
                    setEntry: 'headers'
                }
            _this.GET('contents/courses/recommendCourseList', parm).then(function (res) {
                if (res.code === '000000') {
                    _this.list = res.data || []
                }
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';

img {
    @include bis('../../images/evaluatBg.png');
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    width: px2rem(170px);
}

.couse-list {
    overflow: hidden;

}

.bgFill {
    background: inherit;
    height: px2rem(20px);
}

.cource-teach .cource-header,
.couse-cont {
    padding: 0 px2rem(15px);
}

.couse-cont {}

.fixBox {}

.cource-header {
    /* margin: 0 0 px2rem(11px) 0;*/

    /*height: px2rem(45px);*/
    margin-bottom: px2rem(15px);

    .font-title {
        line-height: px2rem(36px);
        height: px2rem(36px);
        background: #fff;
    }
}

.loading-box {
    font-size: px2rem(16px);
    padding: px2rem(10px) 0 px2rem(20px) 0;
    text-align: center;

    span {
        color: #999;
    }

}

.change-part {
    margin-top: px2rem(10px);
    float: right;
    font-size: px2rem(11px);
    line-height: px2rem(11px);
    border: 1px solid #A9AEB7;
    border-radius: px2rem(9px);
    vertical-align: middle;
    padding: px2rem(3px) px2rem(5px) px2rem(4px) px2rem(6px);

    img {
        width: px2rem(12px);
        height: px2rem(12px);

    }
}

.fixed {

    .fixBox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;

        z-index: 112;

        .font-title {
            background: #44A99B;
            padding: 0 px2rem(15px);
            color: #fff;
        }
    }

    .bgFill {
        background: #44A99B;
    }

}

.course-item {
    float: left;
    margin-bottom: px2rem(19px);
    margin-right: px2rem(5px);
}

.end-left {
    margin-right: 0;
}

.course-pic {
    width: px2rem(170px);
    height: px2rem(95px);
    border-radius: px2rem(3px);
    position: relative;

    .pic-tec {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: px2rem(3px);
    }

    .course-tag {
        position: absolute;
        display: inline-block;
        top: px2rem(5px);
        left: px2rem(5px);
        line-height: px2rem(16px);
        height: px2rem(16px);
        color: #4A87D4;
        padding: 0 px2rem(3px);
        background: #FAFCFF;
        border: 1px solid #C3DCFB;
        font-size: px2rem(10px);
        border-radius: px2rem(2px);
    }
}

.course-txt {
    margin-top: px2rem(5px);
    font-size: px2rem(14px);
    line-height: px2rem(19px);
    max-height: px2rem(38px);
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    width: px2rem(170px);
}

.course-opt {
    font-size: px2rem(12px);
    position: relative;

    /*margin-top: px2rem(6px);*/
    .opt-info {
        color: #999;
    }

    .opt {
        display: inline-block;
        height: px2rem(18px);
        line-height: px2rem(18px);
        padding: 0 px2rem(4px);
        position: absolute;
        right: 0;
        top: 0;
    }

    .collect {
        background: #F7F8F9;
        color: #666;
    }

    .collected {
        color: #F47A48;
        background: RGBA(244, 122, 72, 0.04);

    }
}

.font-title {
    font-size: px2rem(18px);
    font-weight: bold;
    color: #28344C
}

.title {
    font-size: px2rem(16px);
    text-align: left;
    width: px2rem(170px);
    max-height: px2rem(20px);
}
</style>
