<template>
  <div class="cource-teach" id="adjust-u">
      <div :class="isFixed ? 'cource-header fixed' : 'cource-header'">
          <div  class="font-title">
            {{title}}
            <div class="change-part gray" @click="changeFun">
              换一批
              <img src="../../images/change.png"/>
              
            </div>
          </div>
          
      </div>
      <div>
        <div class="couse-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" :style="'height:'+clientHeight">
            <div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in list">
                <div class="course-pic" @click="goToPage(item)">
                  <img :src="item.appIndexCourseUrl" 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.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>
</template>

<script>

import { Loadmore,Spinner,InfiniteScroll } from 'mint-ui';
// import { setEventByModuleCode } from '@/utils/index'
 // import LOADING from '../../components/common/loading-new';
export default {
  data () {
    return {
      list:[],
      pageNo:1,
      pageSize:10,
      title:'为您推荐',
      isCollected:'',
      allLoaded:true,
      loading:true,//是否滚动加载
      isLoading:false,//加载中
      noMore:false,
      clientHeight:0,
      isShowLoading:true,
  
    }
  },
  props: 
    {
      isFixed:{
        default:false,
        type:Boolean
      }
  },
  mounted(){
    this.getData();
    
  },
  components:{
      // LOADING
  },
  methods: {

    //跳转
    goToPage(item){
      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
      })
    },
 
    //换一批
    changeFun(){
      this.clientHeight = document.documentElement.clientHeight+'px';
      document.documentElement.scrollTop = document.documentElement.scrollTop - 20;
      document.body.scrollTop = document.body.scrollTop - 20;
      //console.log(document.documentElement.scrollTop);
      this.loading = true;
      this.noMore = false;
      this.pageNo++;
      this.list = [];
      this.getData();
    },

    //滑动加载更多
    loadMore(){
      let _this = this;
      if(!_this.noMore){
        _this.pageNo += 1;
        _this.isLoading = true;
        this.loading = true;

        setTimeout(()=>{
          _this.getData('loadMore');
        },500)
      }
      
    },

    //收藏 取消收藏
    collectFun(status,id){
      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'){
          status = status == 1 ? 2 : 1;
          _this.handelData(id,status);
        }
      })
    },

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

    //加载数据
    getData(type){
      let _this = this,
      parm = {
        pageNo:_this.pageNo,
        pageSize:_this.pageSize,
        token:_this.token,
        setEntry: 'headers'
      }

      _this.GET('contents/courses/recommendCourseList',parm).then(function(res){

        if(res.code === '000000'){
          
          if(type == 'loadMore'){
            if(res.data == null || !res.data){
              res.data = [];
              _this.isLoading = false;
              _this.noMore = true;
              _this.loading = false;
            }
          

            _this.list =  [..._this.list ,...res.data] || [];
          }else{
            _this.noMore = false;
            _this.isLoading = false;
            _this.list =  res.data || [];
          }
        }else{
          alert(res.message)
        }
        _this.clientHeight = 'auto'

        _this.isLoading = false;
        _this.loading = false;
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  width: px2rem(170px);
}

.couse-list{
  overflow: hidden;
  
}
.cource-teach{
  padding:0 px2rem(15px);
}
.cource-header{
  margin: 0 0 px2rem(11px) 0;
  overflow: hidden;
  height: px2rem(40px);
  .font-title{
    line-height: px2rem(40px);
  }
}
.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{
  .font-title{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
     height: px2rem(40px);
     line-height: px2rem(40px);
    background: #fff;
    z-index: 102;
    padding: 0  px2rem(15px);;
  }
}
.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);
    height: px2rem(16px);
    color:#4A87D4;
    padding: 0 px2rem(3px);
    background: #C3DCFB;
    font-size: px2rem(10px);
    border-radius: px2rem(2px);
  }
}
.course-txt{
  margin-top: px2rem(5px);
  font-size: px2rem(14px);
  line-height: px2rem(19px);
  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{
   
    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;

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


</style>
