<template>
  <div class="courceTeach">
      <div class="space-between courceTeachHeader">
            <div :style="{'text-align': direction}" class="fontTitle">{{teacherData.title}}</div>
            <div @click="teacherChange" class="fs11 gray change">换一批
                <img src=""/>
            </div>
      </div>
      <div class="space-between">
        <div v-if="teacherData.hasSelect" class="teachTitle mb42">
            <!-- <select v-model="selected">
                <option :key="index" v-for="(option,index) in teacherData.selectOptions" v-bind:value="option.value">
                    {{ option.text }}
                </option>
            </select> -->
            <span @click="firstOption" :class="!isStudy?'titlegGreen':'gray'" class="fs26">{{teacherData.firstOption}}</span>
            <span :key="index" v-for="(item,index) in teacherData.options">
                <span @click="study(index)" :class="isStudy&&item.isCheck?'titlegGreen':'gray'" class="fs26 marginLR40">{{item.title}}</span>
            </span>
        </div>
        <div v-if="teacherData.hasSelect" @click="teacherMore" class="fs11 gray teacherMore">更多课程
            <img src=""/>
        </div>
      </div>
      <div class="content">
          <div class="needLeft  white" :key="index" v-for="(item,index) in cource">
            <img class="courceImg" src=""/>
            <div v-if="courceData.hasType" :style="{'color':item.color}" :class="[item.isLeft?'flex-start':'flex-end']" class="courceType fs22 bgWhite">{{item.type}}
            </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="teacherData.showMoreBtn" class="courceMore">更多课程</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;
        // 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){
        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/mixin.scss';
@import '../../style/global.scss';
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  width: px2rem(170px);
}
.courceTeachHeader{
    width: 100%;
}
.titlegGreen{
    color: RGBA(68, 146, 132, 1)
}
.change{
    width: px2rem(57px);
    height: px2rem(16px);
    text-align: center;
    line-height: px2rem(14px);
    border: 1px solid RGBA(204, 204, 204, 1);
    border-radius: px2rem(9px);
    margin-top: px2rem(6px);
}
.teacherMore{
    width: px2rem(65px);
    height: px2rem(16px);
    text-align: center;
    line-height: px2rem(14px);
    border-radius: px2rem(9px);
    border: 1px solid RGBA(204, 204, 204, 1);
    margin-top: px2rem(10px);
}
.content{
    width: 100%;
    height: px2rem(300px);
}
.courceTeach{
  background: #fff;
  padding: px2rem(15px) 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);
  margin-bottom: 10px
}
.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>
