<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">
              换一批
              <img src="../../images/change.png"/>
              
            </div>
          </div>
          
      </div>
      <div>
        <div class="couse-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
            <div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in list">
                <div class="course-pic">
                  <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="loading">加载中...</span>
            <span class="no-more" v-if="noMore">没有更多了~</span>
        </div>
        
      </div>
  </div>
</template>

<script>

import { Loadmore,Spinner,InfiniteScroll } from 'mint-ui';
export default {
  data () {
    return {
      list:[],
      pageNo:1,
      pageSize:10,
      title:'为您推荐',
      isCollected:'',
      allLoaded:true,
      loading:false,
      noMore:false,
      mockUrl:'http://sosoapi.yunqueyi.com/sosoapi-web/pass/mock/39'
    }
  },
  props: 
    {
      isFixed:{
        default:false,
        type:Boolean
      }
  },
  mounted(){
    this.getData();
  },
  methods: {

    //滑动加载更多
    loadMore(){
      
      let _this = this,
      parm = {
        pageNo:_this.pageNo,
        pageSize:_this.pageSize,
        token:'EA67293E35C249C1832583F7AD2669EC',
        setEntry: 'headers'
      }

      this.loading = true;

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

        if(res.code === '000000'){
          if(res.data.length == 0){
            _this.loading = false;
            _this.noMore = true;
          }
          setTimeout(()=>{
            _this.list =  [..._this.list ,...res.data] || [];
            _this.pageNo++;
            _this.loading = false;
          },2500)
          
        }
      })
     
      
    },

    //收藏 取消收藏
    collectFun(status,id){
      let _this = this,
      parm = {
        token:this.token,
        type:status,
        courseId:id,
        setEntry: 'headers'
      }
      _this.POST('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(){
      let _this = this,
      parm = {
        pageNo:_this.pageNo,
        pageSize:_this.pageSize,
        token:'EA67293E35C249C1832583F7AD2669EC',
        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';
.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;
  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(2px) 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>
