<template>
    <div class="classreg_show_list_pc_1">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="learningtool-title">
                        <span class="sp1">在线报名</span>
                    </div>
                    <div class="liveshow-tab">
                        <ul v-show="!typeList">
                            <li :class="{on:allId==''}" @click="allClick()">全部</li>
                            <!-- <li>线下班级</li>
                                <li>书画雕刻</li>
                                <li>养生文化</li>
                                <li>舞蹈形体</li>
                                <li>音乐律动</li> -->
                            <li :class="{on:nameId===index}" @click="livclick(item.catId,index)"
                                v-for="(item, index) in typeList" :key="index">
                                {{item.catName}}
                            </li>
                        </ul>
                    </div>
                    <!-- <div class="showlist-screen">
                         <ul>
                             <li class="showlist-screen-title">城市：</li>
                             <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>丨
                             <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>丨
                             <li><a href="">镇江市</a></li>丨
                             <li><a href="">泰州市</a></li>丨
                             <li><a href="">宿迁市</a></li>
                         </ul>
                     </div> -->
                    <div class="showlist-searchbar clearfix">
                        <ul class="showlist-tab">
                            <li @click="isOn(1)" :class="{active:isSignEnd===1}"><a>报名进行中</a></li>
                            <li @click="noStart(0)" :class="{active:isSignEnd===0}"><a>报名未开始</a></li>
                            <li @click="isOver(2)" :class="{active:isSignEnd===2}"><a>报名已结束</a></li>
                        </ul>
                        <div class="showlist-searchbar-right clearfix">
              <span class="showlist-search clearfix">
                <input type="text" class="inp1" v-model="csName" placeholder="班级名称"/>
                <input type="button" @click="schart(csName)" class="btn1"/>
              </span>
                            <span class="sp1">共有培训班{{ totalCount }}个</span>
                            <span class="sp2">
                <a href="" class="active"
                ><span class="iconfont icon-liebiao"></span
                ></a>
                <a href=""><span class="iconfont icon-kuai"></span></a>
              </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="online-apply">
                       <div class="row">
                          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                             <div class="online-apply-pic">
                                <a href=""><img src="" alt=""></a>
                             </div>
                          </div>
                          <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                             <div class="online-apply-info">
                                <span class="sp1"><a href="">电钢琴</a></span>
                                <ul>
                                   <li><span>培训时间：</span>2020.09.20至2020.10.19</li>
                                   <li><span>报名时间：</span>2020.09.20至2020.10.19</li>
                                   <li><span>培训老师：</span>张海波</li>
                                   <li><span>培训地点：</span>南京市游府西街46号南京老年大学钢琴教室</li>
                                   <li><span>年龄限制：</span>男性50-65周岁  女性50-65周岁</li>
                                   <li><span>人数限制：</span>10人</li>
                                </ul>
                             </div>
                          </div>
                          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                             <div class="online-apply-money">
                                <span class="sp1">培训费用：<i>¥220.00</i></span>
                                <span class="sp2">已缴费人数：<i>0人</i></span>
                                <span class="sp3"><a href="">班级详情</a></span>
                             </div>
                          </div>
                       </div>
                    </div>
                 </div> -->

                <div
                        class="col-lg-6 col-md-12 col-sm-12 col-xs-12"
                        v-for="(item, index) in classList"
                        :key="index"
                >
                    <!--样式2循环-->
                    <div class="online-apply2">
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="online-apply2-pic">
                                    <a @click="clsdetail(item.czId)"><img :src="item.czPhoto" alt=""/></a>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                <div class="online-apply2-info">
                  <span class="sp1"
                  ><a @click="clsdetail(item.czId)">{{ item.czName }}</a></span
                  >
                                    <ul>
                                        <li><span>培训时间：</span><span class="font" v-if="item.czSignStartDate!=''">{{item.czSignStartDate | formatDate}}</span><span
                                                class="font" v-else>开始时间不限</span>
                                            至 <span class="font" v-if="item.czSignEndDate!=''">{{item.czSignEndDate | formatDate}}</span><span
                                                    class="font" v-else>结束时间不限</span>
                                        </li>
                                        <li>
                      <span>培训地点：</span
                      >{{item.czAdress}}
                                        </li>
                                    </ul>
                                </div>
                                <div class="online-apply2-money clearfix">
                                    <div class="online-apply2-money-left">
                                        <span class="sp1" v-if="item.czChargeMode == 1"><i >免费学习</i></span>
                                        <span class="sp1" v-else>培训费用：<i >{{item.czTrainingFee}} 元</i></span>
                                        <span class="sp2">已报名人数：<i v-if="item.normalNum==''">0 人</i><i v-else>{{item.normalNum}} 人</i></span>
                                    </div>
                                    <div class="online-apply2-money-right">
                                        <span class="sp3"><a @click="clsdetail(item.czId)">班级详情</a></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="search-result-page">
                        <div class="block">
                            <el-pagination
                                    background
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :page-sizes="[6, 12, 18, 24]"
                                    @current-change="currentChange"
                                    @prev-click="prevClick"
                                    @next-click="nextClick"
                                    @size-change="sizeChange"
                                    :total="totalCount"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {httpPost} from "../../../src/utils/utils";
    import formMixin from "../../../src/mixins/formMixin";
    import lenye_base from "lenye_base";
    import $ from 'fy-kit';

    export default {
        name: "ElClassregShowListPc1",
        data() {
            return {
                //课程分类
                typeList: [],
                //课程分类列表
                classList: [],
                //培训状态
                isSignEnd: 1,
                //分类选择
                catId: '',
                allId: '',
                nameId: '',

                totalCount: 0,//总条数
                csName: "", //课程名称
                currentPage: 1, //初始页
                rows: 6, //    每页的数据
            };
        },
        filters: {
            formatDate: function (value) {
                if (value == '' || value == 'undefined') {
                    return '';
                }
                var datavalue = value.replace(/\-/g, '/');
                let date = new Date(datavalue);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                // let h = date.getHours();
                // h = h < 10 ? ('0' + h) : h;
                // let m = date.getMinutes();
                // m = m < 10 ? ('0' + m) : m;
                // let s = date.getSeconds();
                // s = s < 10 ? ('0' + s) : s;
                return y + '年' + MM + '月' + d + '日 ';
            },
        },
        mounted() {
            this.getlist();
            this.getclass();
        },
        // filters: {
        //     format(val) {
        //         return $.date.moment(val).format('YYYY-MM-DD');
        //     }
        // },
        methods: {
            getclass() {
                const that = this;
                //项目分类
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/schoolclass-service/common/clzCategory/queryPage.do",
                    lenye_base.base_data.getformatting({}),
                    function (data) {
                        that.typeList = data.data;
                        console.log(data.data);
                    }
                );
            },
            getlist() {
                //项目分类列表
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/schoolclass-service/common/clzClazz/queryPageUse.do",
                    lenye_base.base_data.getformatting({
                        rows: that.rows,
                        czName: that.csName,
                        page: that.currentPage,
                        isEnd: that.isSignEnd,
                        catId: that.catId,
                        czTrainingType:1
                    }),
                    function (data) {
                        that.classList = data.data;
                        that.totalCount = data.totalCount;
                        console.log(data.data)
                    }
                );
            },
            //报名状态
            isOn(isSignEnd) {
                this.isSignEnd = isSignEnd;
                this.getlist();
            },
            noStart(isSignEnd) {
                this.isSignEnd = isSignEnd;
                this.getlist();
            },
            isOver(isSignEnd) {
                this.isSignEnd = isSignEnd;
                this.getlist();
            },
            // 翻页：当前页数的显示条数改变触发
            sizeChange(rows) {
                this.rows = rows;
                this.getlist()
            },
            // 翻页：选中当前页
            currentChange(page) {
                this.currentPage = page;
                this.getlist();
            },
            // 翻页：上一页
            prevClick(page) {
                this.currentPage = page;
                this.getlist();
            },
            // 翻页：下一页
            nextClick(page) {
                this.currentPage = page;
                this.getlist();
            },
            allClick() {
                this.catId = '';
                this.nameId = null;
                this.allId = '';
                this.getlist();

            },
            livclick(catId, index) {
                this.catId = catId;
                this.allId = null;
                this.nameId = index;
                this.getlist();
            },
            schart(name) {
                this.csName = name
                this.getlist();
            },
            clsdetail(id){
                window.open('/classregdetail?id=' +id)
            }
        },
    };
</script>
