<template>
    <div class="el-active_show_list_pc_2">
        <div class="active_show_list_pc_2">
            <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="yanxueyou-screen">
               <span class="sp1" style="display:none;">
                  <span class="clearfix">
                     <span class="sp1-title">目标城市：</span>
                     <ul class="sp1-ul">
                        <li><input type="checkbox" id="city1"><label for="city1">北京</label></li>
                        <li><input type="checkbox" id="city2"><label for="city2">上海</label></li>
                        <li><input type="checkbox" id="city3"><label for="city3">广州</label></li>
                        <li><input type="checkbox" id="city4"><label for="city4">深圳</label></li>
                        <li><input type="checkbox" id="city5"><label for="city5">北京</label></li>
                        <li><input type="checkbox" id="city6"><label for="city6">上海</label></li>
                        <li><input type="checkbox" id="city7"><label for="city7">广州</label></li>
                        <li><input type="checkbox" id="city8"><label for="city8">深圳</label></li>
                     </ul>
                     <span class="sp1-choice">
                        <a href="">+多选</a>
                     </span>
                  </span>
                  <span class="sp1-sub">
                     <a href="" class="sp1-cancel">取消</a>
                     <a href="" class="sp1-ensure">确定</a>
                  </span>
               </span>


                            <span class="sp2" v-for="(list,i) in treeList" :key="i">
                  <span class="clearfix">
                     <span class="sp1-title">{{list.catName}}：</span>
                     <ul class="sp1-ul" v-if="list.children.length>0">
                        <li class="oli" v-for="(menu,j) in list.children" :key="j"><input type="checkbox"><label
                                @click="newGetList(menu,$event)">{{menu.catName}}</label></li>

                     </ul>
                     <span class="sp1-choice" style="display:none;">
                        <a href="">+多选</a>
                     </span>
                  </span>
                  <span class="sp1-sub">
                     <a href="" class="sp1-cancel">取消</a>
                     <a href="" class="sp1-ensure">确定</a>
                  </span>
               </span>


                            <span class="sp2" style="display:none;">
                  <span class="clearfix">
                     <span class="sp1-title">出发日期：</span>
                     <ul class="sp1-ul">
                        <li><input type="checkbox"><label>国庆</label></li>
                        <li><input type="checkbox"><label>元旦</label></li>
                        <li><input type="checkbox"><label>新年</label></li>
                        <li><select name="" id=""><option value="">最早出发日期</option></select></li>
                        <li><select name="" id=""><option value="">最晚出发日期</option></select></li>
                     </ul>
                     <span class="sp1-choice">
                        <a href="">+多选</a>
                     </span>
                  </span>
                  <span class="sp1-sub">
                     <a href="" class="sp1-cancel">取消</a>
                     <a href="" class="sp1-ensure">确定</a>
                  </span>
               </span>
                            <span class="sp3" style="display:none;">
                  <span class="sp3-title">您已选择：</span>
                  <ul class="sp3-ul">
                     <li>目标城市：北京;上海<a href="">X</a></li>
                     <li>游学主题：历史人文<a href="">X</a></li>
                  </ul>
               </span>
                        </div>
                    </div>
                </div>
                <div class="row" style="display:none;">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="youxueyou-filtrate">
               <span class="sp1 clearfix">
                  <ul class="sp1-ul">
                     <li class="active"><a href="">按报名人数</a></li>丨
                     <li><a href="">好评度</a></li>丨
                     <li><a href="">价格倒序</a></li>丨
                     <li><a href="">价格升序</a></li>
                  </ul>
                  <span class="sp1-price">
                     <select name="" id="">
                        <option value="">价格最低</option>
                     </select>--
                     <select name="" id="">
                        <option value="">价格最高</option>
                     </select>
                  </span>
                  <span class="sp1-info">
                     <span class="sp1-info-p">共有活动24个</span>
                     <a href="" class="sp1-prev">a</a>
                     <a href="" class="sp1-next">></a>
                  </span>
               </span>
                        </div>
                    </div>
                </div>
                <div class="ac-showlist-part" v-for="(list,i) in listData" :key="i"><!--循环-->
                    <div class="row">
                        <div class="col-lg-4 col-md-5 col-sm-3 col-xs-12">
               <span class="sp1">
                 <img v-if="list.actPhoto" :src="list.actPhoto" alt="">
                 <img v-else src="../../theme-chalk/src/images/jslndx-active-pic01.png" alt="">
              </span>
                        </div>
                        <div class="col-lg-6 col-md-5 col-sm-6 col-xs-12">
                            <div class="ac-showlist-part-right">
                                <span class="sp2"><a href="javascript:void(0)">{{list.actTitle}}</a></span>
                                <ul class="sp3">
                                    <li><span>报名时间：</span>{{list.actStartDate | $YMD}} 至 {{list.actEndDate | $YMD}}</li>


                                    <li><span>区域名称：</span>{{list.actAreaName}}</li>
                                    <li><span>分类名称：</span>{{list.catName}}</li>

                                </ul>
                                <div class="ac-showlist-part-cont">
                                    <span class="cont1">累计报名人数：<i>{{Number(list.actSignupNum)}}人</i></span>
                                    <!--<span class="cont3">好评度：<i>98%</i></span> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
                            <div class="ac-showlist-btn">
                                <span class="spp1" v-if="Number(list.actPrice)">¥<i>{{list.actPrice}}</i>元起</span>
                                <span class="spp1" v-else><i>免费</i></span>

                                <span class="spp2"><a :href="'/tourdetail?actId='+list.actId">活动详细</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="search-result-page">
                            <div style="margin-top:30px;">
                                <el-pagination
                                        background
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :page-sizes="[10, 20, 50, 100]"
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="currentPage4"
                                        :total="totalCount">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>

  import formMixin from '../../../src/mixins/formMixin';
  import lenye_base from 'lenye_base';
  import $ from 'fy-kit';

  import msg from '../../message';
  import pagination from '../../pagination';

  export default {
    name: 'ElActiveShowListPc2',
    mixins: [formMixin],
    components: {
      msg,
      pagination
    },
    props: {
      placeholder: {
        type: String,
        default: '总访问量a'
      }
    },
    data() {
      return {
        active: 0,
        menuLeft: [],
        listMenu: [],
        catName: '',
        iname: '',

        treeList: [],
        listData: [],
        totalCount: 0,
        currentPage4: 1,
        rows: 10,
        page: 1,
        catId: ''
      };
    },
    filters: {
      $YMD(date) {
        return $.date.moment(date).format('YYYY-MM-DD');
      }
    },
    mounted() {
      var params = $._.default('object').attr('data');
      if (params&&params.indexOf('userdata') != -1) {
        var index = params.indexOf('userdata=') + 9;
        var userData = params.substr(index).split('&')[0];
        lenye_base.user_data.loginSuccess(userData);
      }
      //this.getInfo(0);
      this.treeClass();

      this.gettreeList();
    },
    computed: {
      defaultAttrs() {
        return {
          placeholder: this.t('ele-form.input') + this.desc._label
        };
      }
    },
    methods: {
      handleSizeChange(val) {
        this.rows = val;
        this.gettreeList(this.catId);

      },
      handleCurrentChange(val) {
        this.page = val;
        this.gettreeList(this.catId);
      },

      newGetList(list, ev) {
        //$._.default(ev.target).parent('li').addClass('active').siblings().removeClass('active');
        $._.default('.oli').removeClass('active');
        $._.default(ev.target).parent('li').addClass('active');
        this.catId = list.catId;

        this.gettreeList(list.catId);

      },
      gettreeList(catId) {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/travel-service/common/actActivity/queryPageUse.do',
            lenye_base.base_data.getformatting({
              siteId: lenye_base.site_data.getsiteData().siteId,
              catId,
              rows: this.rows,
              page: this.page
            })
          )
          .then(res => {
            if (res.success == '1') {
              this.listData = res.data;
              this.totalCount = res.totalCount;

            } else {
              msg.error(res.message);
            }
          });


      },
      treeClass() {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/travel-service/common/actCategory/queryUsableTree.do',
            lenye_base.base_data.getformatting({
              siteId: lenye_base.site_data.getsiteData().siteId,
              cascade: 2

            })
          )
          .then(res => {
            if (res.success == '1') {
              this.treeList = res.data;
            } else {
              msg.error(res.message);
            }
          });
      },
      handleSizeChange(val) {
        this.rows = val;
        this.getList(this.active, this.catName);

      },
      handleCurrentChange(val) {
        this.page = val;
        this.getList(this.active, this.catName);
      },
      getList(num, catName) {
        this.catName = catName;
        this.iname = catName;
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/news-service/common/newsArticle/queryShowPage.do',
            lenye_base.base_data.getformatting({
              siteId: lenye_base.site_data.getsiteData().siteId,
              catName,
              rows: this.rows,
              page: this.page
              //parentName:$.util.storage('parentName').get().getValue()
            })
          )
          .then(res => {
            if (res.success == '1') {
              this.listMenu = res.data;
              this.totalCount = res.totalCount;
              this.active = num;
            } else {
              msg.error(res.message);
            }
          });
      },
      getInfo(num) {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +

            '/news-service/common/newsCategory/queryUsableTree.do',
            lenye_base.base_data.getformatting({
              siteId: lenye_base.site_data.getsiteData().siteId,
              cascade: 1,
              parentName: $.util.urlParams('name') || ''
            })
          )
          .then(res => {
            if (res.success == '1') {
              this.menuLeft = res.data;
              this.iname = res.data[0].catName;
              this.getList(num, res.data[0].catName);
            } else {
              msg.error(res.message);
            }
          });
      },
      query() {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
            '/cert-service/common/ctUserCert/queryManagePage.do',
            lenye_base.base_data.getformatting({
              sites: lenye_base.site_data.getsiteData().siteId,
              ucIdcard: this.ucIdcard,
              ucName: this.ucName,
              ucCertNo: this.ucCertNo
            })
          )
          .then(res => {
            if (res.success != '1') {
              msg.error(res.message);
            }
          });
      }

    }
  };
</script>