<template>
  <div class="courseType">
    <div class="normalArrange">
        <p>{{transBaseData.mainTitle}}<span>{{transBaseData.secTitle}}</span></p>
        <div class="marklabel">
          <div class="marklabel_left">
            <ul>
              <li :class="{'activeIn': index==num}" v-for="(item,index) in transBaseData.label" :key="index" @click="toparentSwitchTab(index)">{{item}}</li>
            </ul>
          </div>
          <div class="marklabel_right" @click="checkMore(transBaseData.id)">查看更多</div>
        </div>
        <div class="allDetailCourse">
          <div class="singlePart" v-for="(item,index) in transBaseData.courseDetail" :key="index" @click="toParentDetail(item,index)">
            <div class="courseCover"> <img :src="item.img" alt=""></div>
            <p>{{item.title}}</p>
            <div class="evalStar">
              <img src="../assets/kczy/stars.png" v-for="(item,index) in item.starNum" :key="index">
            </div>
            <!-- positing -->
            <div class="dataShow">
              <div class="baseInfoPart">
                <img src="../assets/kczy/cellectIcon.png" alt="">
                <span>{{item.collectNum}}</span>
              </div>
              <div class="baseInfoPart">
                <img src="../assets/kczy/fingerIcon.png" alt="">
                <span>{{item.zanNum}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  export default {
    name: 'courseType',
    props: {
      transBaseData: {
        type: Object,
        required: true, 
        default: {}
      },
    },
    data() {
      return {
        num:0
      }
    },
    methods: {
      toparentSwitchTab(index) {
        console.log(index)
      },
      //详情页
      toParentDetail(item,index) {
        let ID=Math.random();
        let transObj = {
          ID,
          num:index
        }
        this.$emit("toParentDetail", transObj);
      },
      // 
      checkMore(mark) {
        this.$emit('baseCourseAll', mark);
      }

    },

  }
</script>

<style lang="scss" scoped>
.normalArrange{
  margin-top:30px;
  p{
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    color: #000000;
    span{
      font-size: 16px;
      font-weight: 500;
      text-align: left;
      color: #949494;
      margin-left: 8px;
      font-weight: normal;
    }
  }
  .marklabel{
    width:100%;
    display: flex;
    .marklabel_left{
      width:85%;
      margin-top:30px;
      ul{
        display: flex;
        li{
          width: 100px;
          height: 40px;
          line-height: 40px;
          color: #949494;
          border-radius: 20px;
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          background: #D4F1FE;
          font-weight: normal;
          margin-right: 15px;
          cursor: pointer;
        }
      }
    }
    .marklabel_right{
      width:15%;
      font-size: 16px;
      font-weight: 400;
      text-align: right;
      color: #00a3ff;
      line-height: 40px;
      cursor: pointer;
    }
  }
  .allDetailCourse{
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    .singlePart{
      width:19.2%;
      height: 234px;
      border-radius: 12px;
      box-shadow: 0px 10px 24px 0px rgba(153,160,168,0.18); 
      margin-right: 1%;
      margin-bottom: 30px;
      position: relative;
      cursor: pointer;
      .courseCover{
        height: 157px;
        img{
          width:100%;
          height: 100%;
        }
      }
      p{
        height: 22px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #000000;
        box-sizing: border-box;
        padding: 0 6px;
        margin:10px 0;
      }
      .evalStar{
        box-sizing: border-box;
        padding: 0 6px;
        margin-top:5px;
        img{
          width:18px;
          display: inline-block;
        }
      }
      .dataShow{
        position: absolute;
        right:0;
        top: 0;
        z-index: 13;
        width: 160px;
        height: 32px;
        background: rgba(0,0,0,0.5);
        border-bottom-left-radius: 12px;
        border-top-right-radius: 12px;
        display: flex;
        .baseInfoPart{
          width:50%;
          box-sizing: border-box;
          padding-left: 4px;
          img{
            display: inline-block;
            vertical-align: middle;
          }
          span{
            font-size: 14px;
            font-weight: 400;
            text-align: left;
            color: #ffffff;
            margin-left:5px;
          }
        }
      }
    }
    .singlePart:nth-child(5n){
      margin-right: 0!important;
    }
  }
  
}
.activeIn{
  background: #00a3ff!important;
  color: #ffffff!important;
}
</style>