<template>
  <div class="el-course_show_list_mobile_1">
    <div class="course_show_list_mobile_1">
      <div class="search-bar">
        <input type="text"  v-model="czName" placeholder="输入关键字进行查找" class="inp1">
        <input type="button" @click="search()" value="搜索" class="btn1">
      </div>
      <div class="grade-list">
        <div class="grade-list-tab">
          <ul>
            <li :class="{active:showId===''}"><a @click="allcouse()">全部</a></li>
            <li @click="clvClick(item.catId,index)" v-for="(item,index) in claList" :class="{active:showId===index}" :key="index"><a>{{item.catName}}</a></li>

          </ul>
        </div>
        <div class="course-screen-bar">

        </div>
          <fyer-load-more
                  ref="pulldown"
                  :pageIndex="page"
                  :page-size="rows"
                  :totalCount="totalCount"
                  :openRefresh="false"
                  @loadmore="loadmore"
                  @refresh="refresh" >
        <div class="course-list-part-row clearfix">

          <div class="course-list-part" v-for="(item,index) in courseList" :key="index"><!--循环-->
              <a @click="csdetail(item.csId)">
            <span class="sp1">
<!--               <img class="icon1" src="images/course-play-icon.png" alt="">-->
              <img class="img1" :src="item.csPhoto" alt=""></span>
              </a>
            <span class="sp2"><a class="course-span2a">{{item.csName}}</a></span>
            <span class="clp-sp3">
               <span class="sp3">课时：<i>{{item.csStudylength}}课时</i></span>
               <span class="sp4"><i v-if="item.studyNum==''">0</i><i v-else>{{item.studyNum}}</i>人已学</span>
            </span>
          </div>

        </div>
          </fyer-load-more>
      </div>
<!--      <span class="grade-list-daodi">-->
<!--      <img src="images/gif/gif-icon2.gif" alt="">呜呜呜…到底了~-->
<!--   </span>-->

    </div>
      <van-divider class="loadings" style="margin-bottom: 1.406667rem"></van-divider>
  </div>
</template>

<script>
  import {httpPost} from '../../../src/utils/utils';
  import formMixin from '../../../src/mixins/formMixin';
  import lenye_base from 'lenye_base';
  import { Toast, Divider } from "vant";
  import fyerLoadMore from "fyer-load-more";
  import $ from "fy-kit";
export default {
  name: 'ElCourseShowListMobile1',
  mixins: [formMixin],
    components: {
        [Toast.name]: Toast,
        [Divider.name]: Divider,
        fyerLoadMore
    },
  model: {},
  data(){
    return {
        czName:'',
      claList:[],
      courseList:[],
      showId:'',
      rows:6,
      page:1,
      totalCount:0
    }
   },
   mounted() {
    this.getlist();
    this.getclalist();
   },
   methods: {
       async getlist(params) {
           //common/clzClazz/queryPageUse.do
           let {data, totalCount} = await $.util.ajax(
               lenye_base.base_data.getapiUrl() +
               "/course-service/common/crsCourse/queryShowPage.do",
               lenye_base.base_data.getformatting({
                   sites: lenye_base.site_data.getsiteData().siteId,
                   csName: this.czName,
                   csCatstr: this.typeId,
                   rows: this.rows,
                   page: this.page
               })
           );
           this.courseList = this.courseList.concat(data);
           this.totalCount = totalCount;

       },
     getclalist(){
       const that = this
         httpPost(
               lenye_base.base_data.getapiUrl() +
               "/course-service/common/crsCatalog/queryShowPage.do",
               lenye_base.base_data.getformatting({
                 parentName:"按类型",
                 sites:lenye_base.site_data.getsiteData().siteId,
               }),
               function(data) {
                 that.claList=data.data
                 // that.typeId=data.data[0].catId
                 // that.getlist();
               }
       )
     },
     clvClick(id,index){
       this.typeId=id
       this.showId=index
         this.courseList = [];
       this.getlist();
     },
       // tabList(num) {
       //     this.isEnd = num;
       //     this.courseList = [];
       //     this.getList();
       // },
       loadmore(page) {
           this.page = page;
           this.getlist();
       },
       refresh() {
           this.page = 1;
           this.getlist();
       },
       search() {
           this.page = 1;
           this.courseList = [];
           this.getlist();
       },
       allcouse(){
           this.typeId=''
           this.showId=''
           this.courseList = [];
           this.getlist();
       },

     csdetail(id){
       window.location.href="/coursedetail?id="+id
     }
   },
};
</script>
