<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 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">
              <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="opt collect">
                收藏
              </span>
              <span class="opt collected">
                已收藏
              </span>
            </div>
        </div>
      </div>
     
  </div>
</template>

<script>


export default {
  data () {
    return {
      list:[{name:'ahda',disName:'fajhkfhak',joinNum:'111',modifyTime:1534312600000,showTime:''}],
      pageNo:1,
      pageSize:10,
      title:'为您推荐',
      mockUrl:'http://sosoapi.yunqueyi.com/sosoapi-web/pass/mock/39'
    }
  },
  props: 
    {
      isFixed:{
        default:false,
        type:Boolean
      }
  },
  mounted(){
    this.getData();
    
  },
  methods: {

    getData(){
      let _this = this,
      parm = {
        pageNo:_this.pageNo,
        pageSize:_this.pageSize,
        token:'F08EDE2622B34953B970E3FD686F5064',
        setEntry: 'headers'
      }
      _this.API_GET(_this.mockUrl+'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(21px) 0;
  overflow: hidden;
  height: px2rem(40px);
  .font-title{
    line-height: px2rem(40px);
  }
}
.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);
  position: relative;
  .pic-tec{
    width: 100%;
    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);
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  width: px2rem(170px);
}
.course-opt{
  font-size: px2rem(12px);
  margin-top: px2rem(6px);
  .opt-info{
    color:#999;
  }
  .opt{
   
    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);

  }
}



.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>
