<template>
  <div class="cource-teach" id="new-course">
      <div class="space-between cource-header" >
          <div  class="title" >{{title}}</div>
      </div>
     
      <div class="couse-list">
        <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 v-if="list.length==0" class="noSource">暂无最新教程数据</div>
     
  </div>
</template>

<script>
//import { setEventByModuleCode } from '@/utils/index'
export default {
  name: 'YqyTeacherList',
  data () {
    return {
        list: [],
        title:'最新课程',
        pageNo:1,
        pageSize:10,
    }
  },
  mounted(){
      this.getData()
  },
  
  props:{
     userToken:{
          type:String,
          default:''
      }
  },

  methods: {
    //跳转
    goToPage(item){

      this.pageBurialPoin({
          menuLevel:1,
          menuCode:'m_home',
          functionCode:'f_new_course',
          actionCode:'c_course',
          labelId:item.id,
          labelvalue:item.name,
      })
      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
      })

    },

    //收藏 取消收藏
    collectFun(status,id){
      this.pageBurialPoin({
          menuLevel:1,
          menuCode:'m_home',
          functionCode:'f_new_course',
          actionCode:'c_collect',
          labelId:id,
         /// labelvalue:item.name,
      })
      let _this = this,
      parm = {
        token:this.userToken,
        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(){
      let _this = this,
      parm = {
        pageNo:_this.pageNo,
        pageSize:_this.pageSize,
        token:'EA67293E35C249C1832583F7AD2669EC',
        setEntry: 'headers'
      }
      _this.GET('/contents/HomeNewCourse/NewCourseInformation',parm).then(function(res){

        if(res.code === '000000'){
          _this.list =  res.data.contentAppModels || [];
        }
      })
    }
   
  }
}
</script>

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

.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  width: px2rem(170px);
}
.couse-list{
  overflow: hidden;
}
.noSource{
  text-align: center;
  font-size: px2rem(15px);
  padding:px2rem(13px) 0;
}
.cource-teach{
 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%;
    border-radius: px2rem(3px);
    display: block;
  }
  .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);
}
.opt-info{
  color:#999;
}
.course-opt{
  font-size: px2rem(12px);
 /* margin-top: px2rem(6px);*/
  position: relative;
 
  .opt{
   top:0;
   right: 0;
   position: absolute;
    height: px2rem(18px);
    line-height: px2rem(18px);
    padding:0 px2rem(4px);
    
  }
  .collect{
     background: #F7F8F9;
     color: #666;
  }
  .collected{
    color: #F47A48;
    background: RGBA(244, 122, 72, 0.04);

  }
}



.title{
  font-size: px2rem(18px);
  height: px2rem(18px);
  margin: 0 0 px2rem(21px) 0;
  font-weight: bold;
}


</style>
