<template>
  <common-header/>
  <div class="courseResources allPageWidthBg">
    <div class="likeBread">
      <div class="likeBread_left">{{bigTitle}}</div>
      <div class="likeBread_right">
        <span>{{bigTitle}}</span>-
        <span>查看更多</span>-
        <span>全部</span>
      </div>
    </div>
    <div class="widthBg">
      <div class="baseTop">
        <p>{{bigTitle}}</p>
        <div class="searchValue">
          <input type="text" placeholder="搜索关键字" v-model="searchKey" >
          <div class="searchBtn" @click="handleSearch">
            <img src="/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(item,index)"><span :class="{ 'selectActive':num==index }">{{item.grade_name}}</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(item,index)"><span :class="{ 'selectActive':secNum==index }">{{item.name}}</span></li>
        </ul>
      </div>
    </div>
    <div class="common1280 contentMain">
      <div class="allDetailCourse" v-if="courseDetail && courseDetail.length>0">
          <div class="singlePart" v-for="(item,index) in courseDetail" :key="index" @click="toDetail(item,index)">
            <div class="courseCover"> <img :src="item.kk_img" alt=""></div>
            <p>{{item.kk_name}}</p>
            <div class="evalStar">
              <img src="/kczy/stars.png" v-for="(item,index) in item.kk_star_num" :key="index">
            </div>
            <!-- positing -->
            <div class="dataShow">
              <div class="baseInfoPart">
                <img src="/kczy/cellectIcon.png" alt="">
                <span>{{item.kk_fav_num}}</span>
              </div>
              <div class="baseInfoPart">
                <img src="/kczy/fingerIcon.png" alt="">
                <span>{{item.kk_like_num}}</span>
              </div>
            </div>
          </div>
      </div>
      <div class="NOdata" v-else>
        <img src="../assets/kczy/noData4.png" alt="">
        <p class="NOdata_p">暂无数据~</p>
      </div>

    </div>
    <div class="common1280" style="position:relative;">
      <div class="paganationPage">
        <el-pagination background layout="prev, pager, next, ->" :total="totalRows"  @current-change="handleChangePage" />
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import { defaultGrade,baseCourseList } from "./kczy/allApi.js";
import { user } from "@/store/user.js";
  export default {
    name: 'courseResources',
    components:{
      CommonHeader
    },
    data() {
      return {
        bigTitle:'基础课程',
        searchKey: '',
        num: 0,
        secNum:0,
        filterData: [],
        secFilterData: [
          {
            keyV: '',
            name:"全部"
          },
          {
            keyV: 1,
            name:"上册"
          },
          {
            keyV: 2,
            name:"下册"
          }
        ],
        courseDetail: [],
        page: 1,
        totalRows:'',
        prefixImg: 'https://tyyxopenapi.bozedu.top/',
        chooseGradeId: '',//选中的年级id
        chooseGradeName:'',
        chooseVolume: '',//选中的分册
        kcID:'',

      }
    },
  mounted() {
      //获取上个页面的标识 判定是种课程（待串联）

      this.initGrade();
      this.initData(this.page);
    },
  methods: {
    /**初始化年级*/
    initGrade() {
      let transObj = {
        token: user.token,
      };
      defaultGrade(transObj)
        .then(res => {
          if (res.code == "1") {
            this.filterData = res.data.page_data;
            let allSection = {
              area_id1: "0",
              area_id2: "0",
              area_id3: "0",
              area_id4: "0",
              create_dateline: "1662016924",
              create_user_id: "0",
              dept_id: "0",
              grade_id: "",
              grade_name: "全部",
              id: "30",
              isdelete: "0",
              modify_dateline: "0",
              modify_user_id: "0",
              sm_id: "0",
              user_id: "0",
            }
            this.filterData.unshift(allSection);
          }
        })
        .catch(error => { console.log(error) });
    },
    /**初始化数据*/
    initData(changePage) {
      //获取上级的标记
      let trans_kkId = this.$route.query.kkId;
      let trans_kcName = this.$route.query.kcName;
      this.kcID = this.$route.query.kcId;
      this.bigTitle=trans_kcName;
      // switch (P_markLable.kc_id) {
      //   case"1"://基础课程
      //     break;
      //   case 'famousCourse'://名师在线
      //     window.location.href = "http://www.txhlwxx.com/zj/mskt.html";
      //     break;
      //   case 'homeworkAss'://作业辅导
      //     window.location.href = "http://www.txhlwxx.com/index.php?mod=txwx&action=micro_course&do=index";
      //   break;
      //   case 'familyCourse'://家庭教育
      //     window.location.href = "http://www.txhlwxx.com/zj/jtjy.html?v=1.1";
      //   break;
      //   case 'specialCourse'://特色课程
      //   window.location.href = "http://www.txhlwxx.com/zj/tskc.html?v=1.1";
      //   return
      //   break;
      //   case 'resourceCenter'://资源中心
      //   return
      //   break;
      //   default:
      //   this.$router.push('/resourceAll');
      // }
      let transObj = {
        token: user.token,
        page: changePage,
        limit: 10,
        kc_cate_level_1:'',//一级目录的ID
        grade_id: this.chooseGradeId,
        team_id: this.chooseVolume,//分页 1:上册 2下册
        keyword: this.searchKey,
        kc_cate_level_1:this.kcID,//

      };
      baseCourseList(transObj)
        .then(res => {
          if (res.code == "1") {
            this.courseDetail = res.data.page_data;
            this.totalRows =Number(res.data.total_rows);
          }
        })
        .catch(error => {
          console.log(error);
      })
    },
    //关键字搜索
    handleSearch() {
      this.initData(this.page);
    },
    //年级选择
    gradeChoose(item,index){
      this.num = index;
      this.chooseGradeId = item.grade_id;
      this.chooseGradeName = item.grade_name;
      this.initData(this.page);
    },
    //学科选择
    secChoose(item,index) {
      this.secNum = index;
      this.chooseVolume = item.keyV;
      this.initData(this.page);
    },
    //移步详情页
    toDetail(row, index) {
      this.$router.push({ path: '/resourceChapter', query: { id: row.kk_id }})
    },
    //翻页
    handleChangePage(val) {
      this.page = val;
      this.initData(val);
    }

    },

  }
</script>

<style scoped lang="scss">
@import "../styles/common_resource.scss";
.courseResources{
  width:100%;
    .widthBg{
      width:100%;
      height: 200px;
      background: url("/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{
  position:absolute;
  right:0;
  top:0;
  z-index:11;

}
.contentMain{
  min-height: 500px;
}
</style>
