<template>
  <div class="cource-teach">
      <div class="space-between cource-header">
          <div :style="{'text-align': direction}" class="title">{{teacherData.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 cource">
            <div class="course-pic">
              <img src="../../images/552064153@2x.png" class="pic-tec" />
              <span class="course-tag">高血压</span>
            </div>
            <p class="course-txt">
              高血压伴糖尿病的规范化治疗
            </p>
            <div class="course-opt">
              <span class="opt-info">刚刚 | 89人已学</span>
              <span class="opt collect">
                收藏
              </span>
              <span class="opt collected">
                已收藏
              </span>
            </div>
        </div>
      </div>
     
  </div>
</template>

<script>
export default {
  name: 'YqyTeacherList',
  components: {
  },
  props: 
  {
    teacherData: {
      type: Object,
      default: ()=>{
        return {
            title: '最新课程',
            hasSelect: true,
            showMoreBtn: true,
            selectOptions: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ],
            firstOption: '综合',
            options: [
                {
                    isCheck: false,
                    title: '在学人数'
                }, 
                {
                    isCheck: false,
                    title: '最新发布'
                }
            ]
        }
      }
    },
    hasPersonName: {
      type: Boolean,
      default: true
    },
    courceData: {
      type: Object,
      default:()=>{
        return {
            selected: '综合1',
            hasHospital: true,
            hasType: true,
            ascending: true,
            data: [
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'blue',
                    teacher: '小单',
                    count: 477,
                    type: '检查'
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'green',
                    teacher: '小单',
                    count: 477,
                    type: '检查'
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'pink',
                    teacher: '小单',
                    count: 477,
                    type: '检查'
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'yellow',
                    teacher: '小单',
                    count: 477,
                    type: '检查'
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'blue',
                    teacher: '小单',
                    count: 477,
                    type: '检查'
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'green',
                    teacher: '小单',
                    count: 477,
                    type: '检查'
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'pink',
                    teacher: '小单',
                    count: 477,
                    type: '检查'
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'yellow',
                    teacher: '小单',
                    count: 477,
                    type: '检查'
                }
            ]
        }  
      }
    },
    direction: {
        type: String,
        default: 'left'
    }
  },
  watch: {
      selected(val){
          console.log('val',val);
          this.$emit('selected',val)
      }
  },
  data () {
    return {
        selected: 'A',
        isStudy: false,
        ascending: true,
        cource: [
            {
            img: '../../images/Shape@2x.png',
            name: '检查',
            hospital: '阜外医院',
            color: 'blue'
            },
            {
            img: '../../images/Shape@2x.png',
            name: '检查',
            hospital: '阜外医院',
            color: 'blue'
            },
            {
            img: '../../images/Shape@2x.png',
            name: '检查',
            hospital: '阜外医院',
            color: 'blue'
            },
            {
            img: '../../images/Shape@2x.png',
            name: '检查',
            hospital: '阜外医院'
            },
            {
            img: '../../images/Shape@2x.png',
            name: '检查',
            hospital: '阜外医院'
            },
            {
            img: '../../images/Shape@2x.png',
            name: '检查',
            hospital: '阜外医院'
            },
            {
            img: '../../images/Shape@2x.png',
            name: '检查',
            hospital: '阜外医院'
            },
            {
            img: '../../images/Shape@2x.png',
            name: '检查',
            hospital: '阜外医院'
            }
        ],
        showMore: false,
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
        ]
    }
  },
  created () {
  },
  mounted(){
      this.flag();
  },
  methods: {
    disable(val){
        console.log('val',val);
    },
    teacherChange(){
        console.log('teacherChange');
        this.$emit('teacherChange')
    },
    teacherMore(){
        console.log('teacherMore');
        this.$emit('teacherMore')
    },
    firstOption(){
        this.isStudy = false;
        this.ascending = !this.ascending;
        console.log('firstOption');
        this.$emit('firstOption',this.ascending)
    },
    flag(){
        let temp = this.courceData.data;
        let fourCource = temp&&temp.slice(0,4);
        console.log('fourCource',fourCource);
        if(!this.showMore&&this.teacherData.showMoreBtn){
            this.cource = fourCource;
        }else{
            this.cource = this.courceData.data;
        }
    },
    showMoreFn(){
        console.log('more',1);
        
        this.showMore = !this.showMore;
      
        this.flag();
    },
    collection(){
    
    },
    study(val){
        this.isStudy = true;
        console.log('val',val);
        this.teacherData.options[val].isCheck=!this.teacherData.options[val].isCheck;
        this.teacherData.options.filter((item,index)=>
            index!==val
        )[0].isCheck= false
        this.$emit('study',val)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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;
}
.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);
  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);
}
.opt-info{
  color:#999;
}
.course-opt{
  font-size: px2rem(12px);
  margin-top: px2rem(6px);
 
  .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);

  }
}



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


</style>
