<template>
  <div class="el-classreg_show_list_mobile_1">
    <div class="classreg_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:isEnd===''}"><a  @click="tabList()" href="javascript:void(0)">全部<i>({{totalCount1}})</i></a></li>
            <li :class="{active:isEnd===1}"><a  @click="tabList(1)"  href="javascript:void(0)">报名中</a></li>
            <li :class="{active:isEnd===0}"><a  @click="tabList(0)" href="javascript:void(0)">未开始</a></li>
            <li :class="{active:isEnd===2}"><a  @click="tabList(2)" href="javascript:void(0)">已结束</a></li>
         </ul>
      </div>
      <fyer-load-more
         ref="pulldown"
        :pageIndex="page"
        :page-size="rows"
        :totalCount="totalCount"
        :openRefresh="false"
        @loadmore="loadmore"
        @refresh="refresh"
        style="margin-bottom:50px;"
        >

      <div class="grade-list-part" v-for="(list,index) in audioList" :key="index"><!--循环-->
         <div class="part1">
            <span class="sp1">
               <span class="tip2" v-if="Number(list.czStatus)===1">进行中</span><!--未开始class：tip1 tip2 tip3-->
               <span class="tip3" v-else-if="Number(list.czStatus)===2">已结束</span>
               <span class="tip1" v-else>未开始</span>
               <img  @click="toDetail(list.czId)" v-if="list.czPhoto" :src="list.czPhoto" alt="">
               <img   @click="toDetail(list.czId)" v-else src="../../theme-chalk/src/images/jslndx-online-apply-pic.png" alt="">
            </span>
            <span class="sp2"  @click="toDetail(list.czId)">
               <span class="spp1" >
                  <span >{{list.czName}}</span>
                <a href="javascript:void(0)">+报名</a>
               </span>
               <span class="spp2">报名时间：<i v-if="list.czEndDate">{{list.czStartDate | $toYMD}}-</i><i>{{list.czEndDate | $toYMD}}</i></span>
               <span class="spp3">培训费用：
                 <i v-if="Number(list.czTrainingFee)">￥{{list.czTrainingFee}}</i>
                 <i v-else>免费</i>
               </span>
            </span>
         </div>
         <div class="part2">
            <span>人数限制：{{Number(list.czMaxNum)}}人</span>
            <span>已报名：{{Number(list.czJoinupNum)}}人</span>
            <span>已缴费：{{Number(list.normalNum)}}人</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>


   </div>
  <!-- <span class="grade-list-daodi">
      <img src="../../theme-chalk/src/images/gif/gif-icon1.gif" alt="">更多班级将陆续开启哦~
   </span> -->
</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 } from "vant";

export default {
  name: "ElClassregShowListMobile1",
  mixins: [formMixin],
  model: {},
  data() {
    return {
      isEnd: "", //0 未开始，1进行中，2已结束
      page: 1,
      rows: 6,
      czName: "",
      totalCount: 0,
      audioList: [],
      totalCount1: 0,
    };
  },
  components: {
    [Toast.name]: Toast,
    fyerLoadMore
  },
  filters: {
    $toYMD(val) {
      if (val) {
        return $.date.moment(val).format("YYYY/MM/DD");
      }
    }
  },
  mounted() {
    this.init();
  },
  computed: {},
  methods: {
    noMore(){
      if (this.audioList.length < 6) {
            $._.default(".loadings").show().html("没有更多数据了");
          }else{
            $._.default(".loadings").hide()
          }
    },
    toDetail(czId){
      window.location.href="/classregdetail?czId="+czId
    },
    init() {
      this.getList();
    },
    tabList(num) {
      this.isEnd = num;
      this.audioList = [];
      this.page=1;
      this.rows = 6;
      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");
    },
    async getList(params) {
      //common/clzClazz/queryPageUse.do
      let { data, totalCount } = await $.util.ajax(
        lenye_base.base_data.getapiUrl() +
          "/schoolclass-service/common/clzClazz/queryPageUse.do",
        lenye_base.base_data.getformatting({
          isEnd: this.isEnd,
          czName: this.czName,
          page: this.page,
          rows: this.rows
        })
      );
      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>
