<template>
    <div class="active_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="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="clivkStatus(1)" :class="{active:actPubStatus==1}"><a>进行中的</a></li>
                            <li @click="clivkStatus(0)" :class="{active:actPubStatus==0}"><a>已结束的</a></li>
                        </ul>
                        <div class="showlist-searchbar-right clearfix">
                  <span class="showlist-search clearfix">
                     <input type="text" v-model="className" class="inp1" placeholder="活动名称">
                     <input @click="search(className)" type="button" class="btn1">
                  </span>
                            <span class="sp1">共有活动{{totalCount}}个</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="ac-showlist-part" v-for="(item,index) in resourceList" :key="index"><!--循环-->
                        <div class="row">
                            <div class="col-lg-4 col-md-5 col-sm-6 col-xs-12">
                                <span class="sp1"><img :src="item.actPhoto" alt=""></span>
                            </div>
                            <div class="col-lg-8 col-md-7 col-sm-6 col-xs-12">
                                <div class="ac-showlist-part-right">
                                    <span class="sp2"><a
                                            @click="actdetail(item.actId)">{{item.actTitle}}</a></span>
                                    <ul class="sp3">
                                        <li><span>活动时间：</span>{{item.actStartDate |format}} 至 {{item.actEndDate
                                            |format}}
                                        </li>
                                        <li><span>活动区域：</span>{{item.actAreaName}}</li>
                                        <li><span>活动类型：</span>
                                            <span v-if="item.actType==1">宣传活动</span>
                                            <span v-if="item.actType==2">评比类活动</span>
                                        </li>
                                    </ul>
                                    <div class="ac-showlist-part-cont">
                                        <span v-if="item.actSignupNum==''" class="cont1">报名人数：<i>0人</i></span>
                                        <span v-else class="cont1">报名人数：<i>{{item.actSignupNum}}人</i></span>
                                        <!--                                        <span class="cont2">浏览人次：<i>7712424人</i></span>-->
                                    </div>
                                    <span class="ac-showlist-part-btn"><a
                                           @click="actdetail(item.actId)" >活动详细</a></span>
                                </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="[5, 10, 15, 20]"
                                    @current-change="currentChange"
                                    @prev-click="prevClick"
                                    @next-click="nextClick"
                                    @size-change="sizeChange"
                                    :total="totalCount"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--活动分类列表展示组件1结束-->
</template>

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

    export default {
        name: 'ElActiveShowListPc1',
        data() {
            return {
                //列表
                resourceList: '',
                currentPage: 1, //初始页
                pagesize: 5,    //    每页的数据
                totalCount: 0, //总条数
                actPubStatus: 1, //状态
                //搜索内容
                className: '',

            };
        },
        filters: {
            format(val) {
                return $.date.moment(val).format('YYYY-MM-DD');
            }
        },
        mounted() {
            this.getlist();
        },
        methods: {
            //请求列表
            getlist() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/activity-service/common/actActivity/queryPageByCriteria.do',
                    lenye_base.base_data.getformatting({
                        sites: lenye_base.site_data.getsiteData().siteId,
                        rows: that.pagesize,
                        page: that.currentPage,
                        actPubStatus: this.actPubStatus,
                        actTitle: that.className
                    }),
                    function (data) {
                        that.resourceList = data.data;
                        that.totalCount = data.totalCount;
                        console.log(data.data);
                        // console.log()
                    }
                );
                // httpPost(
                //     lenye_base.base_data.getapiUrl() +
                //     '/base-service/api/cfgArea/querylistTree.do',
                //     lenye_base.base_data.getformatting({
                //         parentId:lenye_base.site_data.getsiteData().ptId,
                //         cascade:1,
                //     }),
                //     function (data) {
                //         that.resourceList = data.data;
                //         console.log(data.data);
                //         // console.log()
                //     }
                // );
            },
            clivkStatus(status) {
                this.actPubStatus = status;
                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();
            },
            //搜索
            search(name) {
                this.className = name
                this.getlist();
            },
            actdetail(id){
                window.open('/activedetail?id='+id)
            },
        }


    };
</script>
