<template>
  <common-header/>
  <div class="courseResources">
    <div class="likeBread">
      <div class="likeBread_left">基础课程</div>
      <div class="likeBread_right">
        <span>基础课程</span>-
        <span>基础课程</span>-
        <span>查看更多</span>-
        <span>全部</span>
      </div>
    </div>
    <div class="widthBg">
      <div class="baseTop">
        <p>基础课程</p>
        <div class="searchValue">
          <input type="text" placeholder="搜索关键字" v-model="searchKey" >
          <div class="searchBtn">
            <img src="../assets/kczy/searchIcon.png" alt="">
          </div>
        </div>
      </div>
    </div>
    
    <div class="common1280 keyFilter">
      <div class="bigTitle">年级</div>
      <div class="selectionFilter">
        <ul>
          <li v-for="(item,index) in filterData" :key="index" @click="gradeChoose(index)"><span :class="{ 'selectActive':num==index }">{{item}}</span></li>
        </ul>
      </div>
    </div>

    <div class="common1280 keyFilter">
      <div class="bigTitle">分册</div>
      <div class="selectionFilter">
        <ul>
          <li v-for="(item,index) in secFilterData" :key="index" @click="secChoose(index)"><span :class="{ 'selectActive':secNum==index }">{{item}}</span></li>
        </ul>
      </div>
    </div>
    <div class="common1280">
       <div class="allDetailCourse">
          <div class="singlePart" v-for="(item,index) in courseDetail" :key="index" @click="toDetail(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 class="common1280 paganationPage">
        <el-pagination background layout="prev, pager, next, ->" :total="1000" />
    </div>
  </div>
</template>

<script>
  import commonHeader from "@/components/header/index.vue";
  export default {
    name: 'courseResources',
    components:{
      commonHeader
    },
    data() {
      return {
        searchKey: '',
        num: 0,
        secNum:0,
        filterData: ["全部","幼儿园", "一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "其它"],
        secFilterData: ["全部","上册", "下册"],
        courseDetail: [
          {
            id: 'base_1',
            img: 'src/assets/kczy/singlePic1.png',
            title: '野天鹅',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },
          {
            id:'base_2',
            img: 'src/assets/kczy/singlePic2.png',
            title: '安徒生世界插画',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },
          {
            id:'base_3',
            img: 'src/assets/kczy/singlePic3.png',
            title: '传送门',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },
          {
            id: 'base_1',
            img: 'src/assets/kczy/singlePic1.png',
            title: '野天鹅',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },
          {
            id:'base_2',
            img: 'src/assets/kczy/singlePic2.png',
            title: '安徒生世界插画',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },
          {
            id: 'base_1',
            img: 'src/assets/kczy/singlePic1.png',
            title: '野天鹅',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },
          {
            id:'base_2',
            img: 'src/assets/kczy/singlePic2.png',
            title: '安徒生世界插画',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },
          {
            id:'base_3',
            img: 'src/assets/kczy/singlePic3.png',
            title: '传送门',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },
          {
            id: 'base_1',
            img: 'src/assets/kczy/singlePic1.png',
            title: '野天鹅',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },
          {
            id:'base_2',
            img: 'src/assets/kczy/singlePic2.png',
            title: '安徒生世界插画',
            starNum: 5,
            collectNum: '10w+',
            zanNum:'14w+'
          },

        ]

      }
    },
    mounted(){
      
    },
    methods: {
      //年级选择
      gradeChoose(index){
        this.num = index;
        // 网络请求二级数据

      },
      //学科选择
      secChoose(index) {
        this.secNum = index;
      },
      //移步详情页
      toDetail(row, index) {
        this.$router.push('/resourceChapter');
      }

    },
  
  }
</script>

<style scoped lang="scss">
@import "../styles/common_resource.scss";
.courseResources{
  margin:0;
  padding:0;
  width:100%;
  min-height: 1650px;
  
    .widthBg{
      width:100%;
      height: 200px;
      background: url("../assets/kczy/sourceBg2.png") no-repeat left top;
      background-size: 100% 100%;
    }
    .baseTop{
      width: 1280px;
      margin: 0 auto;
      p{
        font-size: 48px;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        padding-top:35px;
      }
      .searchValue{
        width: 497px;
        height: 50px;
        margin:0 auto;
        background: #ffffff;
        border: 1px solid #00a3ff;
        border-radius: 8px;
        margin-top: 13px;
        overflow: hidden;
        position:relative;
        input{
          width:100%;
          height: 100%;
          outline: 0;
          box-sizing: border-box;
          padding-left: 10px;
        }
        .searchBtn{
          width: 26px;
          height: 26px;
          background: #00a3ff;
          border-radius: 6px;
          position: absolute;
          right:5px;
          top:50%;
          transform: translate(-50%,-50%);
          text-align: center;
          vertical-align: middle;
          cursor: pointer;
          img{
            display: inline-block;
            text-align: center;
          }
        }
      }
    }
    .keyFilter{
      display: flex;
      height: 50px;
      line-height: 50px;
      margin: 30px auto;
      .bigTitle{
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        color: #000000;
        margin-right:10px;
      }
      .selectionFilter{
        flex:1;
        ul{
          display: flex;
          border-bottom: 1px dashed #e4e6e8;
          li{
            display: inline-block;
            font-size: 16px;
            font-weight: 400;
            text-align: center;
            color: #949494;
            margin-right: 2%;
            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;
    }
  }
.active{
  color: #000000!important;
  font-weight: bold;
}
.selectActive{
  background: #DCF1FF;
  border-radius: 6px;
  color: #00a3ff!important;
  padding: 5px;
}
.paganationPage{
  .el-pagination {
    text-align: right; 
  }
}
</style>