<template>
  <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="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in cList">
                <div class="course-pic" @click="goToPage(item)">
                  <img v-lazy="item.courseInfoUrl" class="pic-tec" :key="item.courseInfoUrl"/>
                  <!-- <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>
</template>

<script>

import { Loadmore,Spinner,InfiniteScroll } from 'mint-ui';
// import { setEventByModuleCode } from '@/utils/index'
 // import LOADING from '../../components/common/loading-new';
import {mapGetters, mapMutations, mapActions} from 'vuex'
export default {
  data () {
    return {
      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: 2
      },
      userToken:{
        type:String,
        default:''
      },
      parmData:{
          type:Array,
          default:[]
      },
  },
  computed: {
    ...mapGetters({
      'adjustList': 'adjustList'
    }),
    cList() {
      return this.list
    }
  },
  mounted(){
    
    this.list = this.parmData;
    
    // this.$store.dispatch("setSource", []);
    //this.pageNo = this.adjustPageNo;

    // if(window.__isAndroid){
    //   this.popHeight = this.statusBarHeight/2
    // }else{
    //   this.popHeight = this.statusBarHeight
    // }
    // this.menuHeight = this.popHeight + 7 + 40 + "px";
    // this.ptop = this.popHeight + "px";
   // this.getData();
    
  },
  created(){
    let _this = this;
    window.__getStatusBarHeight = function(parm){
           
      if(window.__isAndroid){
        _this.popHeight = parseInt(parm.statusBarHeight)/2
      }else{
        _this.popHeight = parm.statusBarHeight
      }
      _this.ptop = _this.popHeight+5+'px';

      _this.menuptop = _this.popHeight+25+'px'
      ///alert(_this.menuptop);
       
    }
    this.getStatusHight()
  },
  watch: {
    adjustPageNo(val) {
      this.pageNo = val
    },
    // setAdjustList: {
    //   handler: function(val,oldval){
    //       console.log(val.name)
    //     },
    //     deep:true //对象内部的属性监听，也叫深度监听
    // }
  },
  components:{
      // LOADING
  },
  methods: {
    ...mapActions({
      'setAdjustList': 'setAdjustList'
    }),
    getStatusHight(){
        rocNative.getStatusBarHeight({
            __funcName: '__getStatusBarHeight'
        })
        
    },

    //跳转
    goToPage(item){
      this.pageBurialPoin({
        menuLevel:1,
        menuCode:'m_home',
        functionCode:'f_recommend',
        actionCode:'c_course',
        labelId:item.id,
        labelValue :item.name,
      })
      this.$emit("setRefrshParm",{isclick:true,id:item.id,allData:this.list,isFromAdjust: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({
          menuLevel:1,
          menuCode:'m_home',
          functionCode:'f_recommend',
          actionCode:'c_load_more'
        })
        _this.isReauestBack = false;
        setTimeout(()=>{
          _this.getData('loadMore');
        },500)
      }
    },

    //收藏 取消收藏
    collectFun(status,id,name){
     // alert(this.userToken);
      status = status == 1 ? 2 : 1;
      this.pageBurialPoin({
        menuLevel:1,
        menuCode:'m_home',
        functionCode:'f_recommend',
        actionCode:'c_collect',
        labelId:id,
        labelValue :name,
      })
      let _this = this,
      parm = {
        token:_this.userToken,
        type:status,
        courseId:id,
        setEntry: 'headers',
        data:{
             token:_this.userToken,
        }
      }
     /// alert(this.token)
      _this.POST('contents/favors',parm).then(function(res){

        if(res.code === '000000'){
         
          _this.handelData(id,status);
        }else{
          //alert(res.message);
          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;
        }
      }
    },

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

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

        if(res.code === '000000'){
          if(res.data == null || res.data.length == 0){
            res.data = [];
            _this.isLoading = false;
            _this.noMore = true;
            _this.loading = true;
            _this.isReauestBack = false;
          }else{
            _this.isReauestBack = true;
            _this.list =  [..._this.list ,...res.data];
            _this.isLoading = true;
            _this.noMore = false;
            _this.loading = false;
            _this.pageNo += 1;
            // this.setAdjustList(_this.list)
          }
        }

      })
    }
  }
}
</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/defaults/icon-p3-2.png');
}
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  width: px2rem(170px);
}

.couse-list{
  overflow: hidden;
   display: flex;
  
  flex-wrap: wrap;
}
.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(8px);
  .font-title{
    line-height: px2rem(28px);
    height: px2rem(30px);
    padding-bottom: px2rem(7px);
    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;*/
  width:px2rem(170px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: flex-start;
  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>
