<template>
  <div class="el-resource_show_list_mobile_2">
    <div class="live_show_list_mobile_1">
   <div class="search-bar">
      <input type="text" placeholder="输入关键字进行查找" v-model="lylName" class="inp1">
      <input type="button" value="搜索" @click="search" class="btn1">
   </div>
   <div class="grade-list">
      <!-- <div class="grade-list-tab">
         <ul>
            <li class="active"><a href="">全部</a></li>
            <li><a href="">疫情专区</a></li>
            <li><a href="">老年教育</a></li>
            <li><a href="">书画雕刻</a></li>
            <li><a href="">老年教育</a></li>
            <li><a href="">书画雕刻</a></li>
         </ul>
      </div> -->
      <div class="select-tab"><!--选择分类-->
         <div class="select-tab-bar">
            <span class="sp1">选择分类</span>
            <a href="javascript:void(0)" class="sp2" @click="showClass($event)">{{selected}}</a>
         </div>
         <div class="select-tab-cont" v-show="isSeach">
            <ul class="ul1 clearfix treeUl">
               <li class="active"><a href="javascript:void(0)" @click="getTree('',$event)">全部</a></li>
               <li v-for="(list,i) in treeList" :key="i" ><a @click="getTree(list,$event)" href="javascript:void(0)">{{list.catName}}</a></li>
            </ul>
         </div>
      </div>
       <!--<div class="course-screen-bar">
         <ul class="ul1">
            <li :class="{active:status=='1'}"><a href="javascript:void(0)" @click="liveStatus('1')">正在直播</a></li>丨
            <li :class="{active:status=='0'}"><a href="javascript:void(0)" @click="liveStatus('0')">直播预告</a></li>丨
            <li :class="{active:status=='3'}"><a href="javascript:void(0)" @click="liveStatus('3')">直播回放</a></li>
         </ul>
        <span class="csb-sp1"><a href="">筛选</a></span>
      </div> -->

      <fyer-load-more
         ref="pulldown"
        :pageIndex="page"
        :pageSize="rows"
        :totalCount="totalCount"
        :openRefresh="false"
        @loadmore="loadmore"
        @refresh="refresh"
        >
      <div class="course-list-part-row clearfix" >
         <div class="course-list-part" v-for="(list,index) in audioList" :key="index"><!--循环-->
            <span class="sp1">
               <img  class="icon1" src="../../theme-chalk/src/images/jslndx-play-icon.png" alt="">
               <a href="javascript:void(0)" @click="toDl(list)" >
                  <img class="img1" v-if="list.resPhoto" :src="list.resPhoto" alt="">
                  <img v-else class="img1" src="../../theme-chalk/src/images/active-pic.jpg" alt="">
               </a></span>
            <span class="sp2"><a href="javascript:void(0)" @click="toDl(list)" >{{list.resName}}</a></span>
            <span class="live-sp3" style="position:relative;">
              <span>讲师：{{list.resAuthor}}</span>
              <span style="position:absolute;right:0px;"><i style="color:#00b7ee;font-style:normal;">{{list.studyNum}}</i>人已学</span>
            </span>

         </div>

      </div>

      </fyer-load-more>

      <div class="loadings" style="display:none;height:40px;line-height:40px;font-size:12px;background:#f5f5f5;text-align:center;color:#aaa;">没有更多数据了</div>
      <!-- <span class="grade-list-daodi">
            <img src="../../theme-chalk/src/images/gif/gif-icon2.gif" alt="">呜呜呜…到底了~
        </span> -->



   </div>

</div>
  </div>
</template>
<script>
import formMixin from "../../../src/mixins/formMixin";
import lenye_base from "lenye_base";
import fyerLoadMore from "fyer-load-more";
import $ from "fy-kit";
import { Toast, Divider } from "vant";

export default {
  name: "ElResourceShowListMobile2",
  mixins: [formMixin],
  model: {},
  data() {
    return {
      isEnd: "", //0 未开始，1进行中，2已结束
      page: 1,
      rows: 6,
      czName: "",
      totalCount: 0,
      audioList: [],
      totalCount1: 0,
      isSeach:false,
      selected:'全部',
      status:'', //1
      lylName:'',
      lylPlayBackType:'', //回放
      treeList:[],
      catId:'',

    };
  },
  components: {
    [Toast.name]: Toast,
    [Divider.name]: Divider,
    fyerLoadMore
  },
  filters: {
    $toYMD(val) {
      if (val) {
        return $.date.moment(val).format("YYYY/MM/DD");
      }
    }
  },
  mounted() {
    this.init();
  },
  computed: {},
  methods: {
    toDl(list){
      //:href="'/resourcedetail?id='+list.resId+'&resId='+list.resId"
      if(list.resFiles.length){
        if((list.resFiles[0].fileType =='video') || (list.resFiles[0].fileType =='audio')){
          window.location.href = "/resourcedetail?id="+list.resId+'&types=1&resId='+list.resId;
        }else{
          window.location.href = "/resourcedetail?id="+list.resId+'&types=2&resId='+list.resId;
        }
      }else{
        Toast.fail("暂未发现可用资源");
        return false;
      }


    },
    getTree(list,ev){
      var ele = $._.default(ev.target);
      ele.parents('.treeUl').find('li').removeClass('active');
      ele.parent('li').addClass('active');
      this.page = 1;
      this.rows = 6;
      this.audioList = [];
      if(list){
        this.catId = list.catId;
        this.selected = list.catName;
      }else{
        this.catId = '';
        this.selected = '全部';
      }
       this.getList();
       this.isSeach = false;


    },
    liveStatus(str){
      this.status = str;
      if(str=='3'){
        this.lylPlayBackType = '1'
      }else{
        this.lylPlayBackType = ''
      }
      this.audioList = [];
      this.getList();

    },
    showClass(ev){
      var ele = $._.default(ev.target);
      if(this.isSeach){
        this.isSeach = false;
      }else{
        this.isSeach = true;
      }

    },
    toDetail(czId){
      window.location.href="/classregdetail?czId="+czId
    },
    init() {
      this.getList();
      this.liveTree();
    },
    liveTree(){
      //
      $.util.ajax(
        lenye_base.base_data.getapiUrl() +
          "/resource-service/common/resCategory/queryShowPage.do",
        lenye_base.base_data.getformatting({
          sites: lenye_base.site_data.getsiteData().siteId,
          //cascade: 1
        })
      ).then(res=>{
        if(res.success=='1'){
          this.treeList = res.data;
        }else{
          Toast.error(res.message);
        }
      })
    },
    tabList(num) {
      this.isEnd = num;
      this.audioList = [];
      this.getList();
    },
    loadmore(page) {
      this.page = page;
      this.getList();
    },
    refresh() {
      this.page = 1;
      this.getList("pull");
    },
    search() {
      this.page = 1;
      this.audioList = [];
      //this.$refs.pulldown.state = 0;
      this.getList("search");
    },
    noMore(){
      if (this.audioList.length < 6) {
            $._.default(".loadings").show().html("没有更多数据了");
          }else{
            $._.default(".loadings").hide()
          }
    },
    async getList(params) {
      //common/clzClazz/queryPageUse.do
      let { data, totalCount } = await $.util.ajax(
        lenye_base.base_data.getapiUrl() +
          "/resource-service/common/resResource/queryShowPageModify.do",
        lenye_base.base_data.getformatting({
          //lylRealStatus: this.status,
          resName: this.lylName,
          sites:lenye_base.site_data.getsiteData().siteId,
          page: this.page,
          rows: this.rows,
          resCatstr:this.catId,
          orderType:2
          //lylPlayBackType:this.lylPlayBackType,
        })
      );
      if (params == "pull") {
        this.audioList = [];
        this.$refs.pulldown.state = 0;
      }
      this.audioList = this.audioList.concat(data);
      this.totalCount = totalCount;
      if(this.isEnd===""){
       this.totalCount1 = totalCount;
      }
      if (params == "search") {
        this.noMore();
      }
      this.noMore();


    }
  }
};
</script>
