<template>
  <div class="courceTeach">
    <div :style="{'text-align': direction}" class="fontTitle">{{data.title}}</div>
      <div v-if="data.hasSelect" class="teachTitle mb42">
        <select v-model="selected">
            <option :key="index" v-for="(option,index) in data.selectOptions" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span :key="index" v-for="(item,index) in data.options">
          <span @click="study(index)" class="gray fs26 marginLR40">{{item}}</span>
        </span>
      </div>
      <div class="content">
          <div class="needLeft white" :key="index" v-for="(item,index) in cource">
            <img class="courceImg" src=""/>
            <div :class="[item.color,item.isLeft?'flex-start':'flex-end']" class="courceType fs22 white">{{item.name}}
            </div>
            <div :class="hasPersonName?'space-between':'flex-end'" class="courceText fs22 white">
            <div v-if="hasPersonName"><img class="avatar" src="../../images/Shape@2x.png"/><span class="person white">{{item.teacher}}</span></div>
            <div class="white">{{item.count}}人已学</div>
            </div>
            <div class="title">{{item.name}}
            <span v-if="courceData.hasHospital" class="gray fs24">{{item.hospital}}</span>
            </div>
        </div>
      </div>
      <div @click="showMoreFn" v-if="data.showMoreBtn" class="courceMore">更多课程</div>
  </div>
</template>

<script>
export default {
  name: 'YqyTeacherList',
  components: {
  },
  props: 
  {
    data: {
      type: Object,
      default: ()=>{
        return {
            title: '课程教学',
            hasSelect: true,
            showMoreBtn: true,
            selectOptions: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ],
            options: ['在学人数', '最新发布']
        }
      }
    },
    hasPersonName: {
      type: Boolean,
      default: true
    },
    courceData: {
      type: Object,
      default:()=>{
        return {
            selected: '综合1',
            hasHospital: true,
            data: [
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'blue',
                    teacher: '小单',
                    count: 477
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'green',
                    teacher: '小单',
                    count: 477
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'pink',
                    teacher: '小单',
                    count: 477
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'yellow',
                    teacher: '小单',
                    count: 477
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'blue',
                    teacher: '小单',
                    count: 477
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'green',
                    teacher: '小单',
                    count: 477
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'pink',
                    teacher: '小单',
                    count: 477
                },
                {
                    img: '../../images/Shape@2x.png',
                    name: '检查',
                    isLeft: true,
                    hospital: '阜外医院',
                    color: 'yellow',
                    teacher: '小单',
                    count: 477
                }
            ],
            options: ['在学人数', '最新发布']
        }  
      }
    },
    direction: {
        type: String,
        default: 'left'
    }
  },
  watch: {
      selected(val){
          console.log('val',val);
          this.$emit('selected',val)
      }
  },
  data () {
    return {
        selected: 'A',
        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);
    },
    flag(){
        let temp = this.courceData.data;
        let fourCource = temp&&temp.slice(0,4);
        console.log('fourCource',fourCource);
        if(!this.showMore){
            this.cource = fourCource;
        }else{
            this.cource = this.courceData.data;
        }
    },
    showMoreFn(){
        console.log('more',1);
        
        this.showMore = !this.showMore;
        // let temp = this.cource;
        // let fourCource = temp&&temp.slice(0,4);
        // console.log('fourCource',fourCource);
        // if(!this.showMore){
        //     this.courceData = fourCource;
        // }else{
        //     this.courceData = this.cource;
        // }
        this.flag();
    },
    collection(){
        console.log('收藏');
    
    },
    study(val){
        console.log('val',val);
        this.$emit('study',val)
    }
  }
}
</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);
}
.content{
    width: 100%;
    height: px2rem(300px);
}
.courceTeach{
  background: #fff;
  padding: 0 px2rem(15px) 0 px2rem(10px);
}
.blue{
    background: RGBA(236, 244, 242, 1);
    color: RGBA(68, 146, 132, 1);
}
.green{
    background: RGBA(235, 242, 249, 1);
    color: RGBA(74, 135, 212, 1);
}
.pink{
    background: RGBA(254, 242, 237, 1);
    color: RGBA(244, 122, 72, 1);
}
.yellow{
    background: RGBA(248, 245, 238, 1);
    color: RGBA(202, 168, 97, 1);
}
.courceText{
  position: absolute;
  top: px2rem(75px);
  width: 90%;
  padding-left: px2rem(7px);
}
.courceType{
    position: absolute;
    top: px2rem(5px);
    // right: px2rem(5px);
    width: 90%;
    text-align: right;
    width: px2rem(30px);
    height: px2rem(16px);
    border-radius: px2rem(2px);
    line-height: px2rem(16px);
    text-align: center;
    display: flex;
    justify-content: flex-start;
    margin: 0 10px;
}
.fontTitle{
  font-size: px2rem(18px);
  padding: 0 0 px2rem(21px) px2rem(5px);
  width: 100%;
  text-align: left;
  font-weight: bold;
}
.title{
  font-size: px2rem(16px);
  text-align: left;
  width: px2rem(170px);
  max-height: px2rem(20px);
}
.courceLeft{
  padding-left: px2rem(15px);
}
.needLeft{
  float: left;
  padding: 0 0 px2rem(40px) px2rem(5px);
  position: relative;
  min-height: px2rem(123px);
  min-width: px2rem(170px);
}
.courceTime{
  float: left;
}
.courceImg{
  width: px2rem(170px);
  height: px2rem(96px);
  margin-bottom: px2rem(10px);
  background-color: yellow;
}
.courceMore{
  font-size: px2rem(15px);
  color: #999999;
  text-align: center;
}
.teachTitle{
  width: 100%;
  padding-left: px2rem(5px);
  text-align: left;
}
.avatar{
  width: px2rem(11px);
  height: px2rem(11px);
  position: absolute;
  top: px2rem(4px);
}
.person{
  position: absolute;
  left: px2rem(25px);
}
</style>
