<template>
  <div class="activity-container">
    <Head/>
    <second-banner
      :list = "bannerList"
      :looptime="looptime"
      :width="width"
      :height="height"
      :background="background"
      :color="color"
      class="mb-50"
      @prev="prev"
      @next="next"
      @change="changeBanner"
      @click="bannerClick"/>
    <ul
      v-if="dataDetail.length"
      id="scroll-area"
      type="1"
      style="padding-top: 5px;"
      class="main-padding">
      <li
        v-for="item in dataDetail"
        :key="item.id">
        <router-link
          :to="{ path: 'activityDetail', query:{id: item.id }}"
          class="activity-item">
          <img
            :src="item.banner"
            :alt = "item.title"
            style="border-radius: 3px 3px 0 0;">
          <div class="activity-item-d">
            <div
              class="flex-aic-jcb"
              style="margin-bottom: 10px;">
              <div class="ellipsis activity-item-title">{{ item.title }}</div>
              <div class="activity-time">{{ item.startTime | formatDate('yyyy-MM-dd hh:mm') }}</div>
            </div>

            <div class="activity-addr flex-aic">
              <img
                :alt = "item.title"
                src="data:image/png;base64,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"
                style="height: 13px;margin-right: 5px;">
              {{ item.province }}{{ item.city }}{{ item.town }}{{ item.address }} </div>
          </div>
        </router-link>
      </li>

    </ul>
    <p
      v-if="preventRepeatReuqest"
      class="loading">加载中……</p>
    <div
      v-if="touchend"
      class="empty_data">——共{{ totalCount?totalCount:0 }}个活动——</div>
    <go-top/>
    <Footer v-if="touchend"/>
  </div>
</template>

<script>
  import config from "~/config";
  import Footer from "~/components/footer";
  import Head from "~/components/head";
  import axios from '../plugins/axios'
  import SecondBanner from '~/components/secondBanner'
  import {
    mapGetters
  } from "vuex";
  import GoTop from "~/components/goTop";
  export default {
    components: {
      Footer,
      Head,
      SecondBanner,
      GoTop
    },
    data(){
      return{
        showBanner: !0,
        looptime: 4000, // 循环时间
        touchend: false,////没有更多数据
        nodata: `${config.IMG_URL}nodata.png`,
        dataType: [],
        totalCount: "",
        dataDetail: [],
        width: 400,
        height:200,
        background: 'red',
        color: '#fff',
        fontSize: '70px',
        listQuery: {
          page: 1,
          limit: 10
        },
        store: "",
        dataNull:false,
        tourList: [],
        currentPage: 1,//当前加载页
        preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
      };
    },
    computed: {
      ...mapGetters(["userInfo"])
    },
    created() {
      // handleScroll为页面滚动的监听回调
      window.addEventListener('scroll', this.handleScroll);
      this.preventRepeatReuqest = true;
      this.getAll();
    },
    async asyncData() {
      //车型banner 0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
      let tempBannerData = await axios.get( '/api/app/banner/app/unauth/findBannerlist?type=4&platform=1');
      let banner = tempBannerData.data.data;
      return { bannerList: banner}
    },
    methods: {
      handleScroll: function () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        // 设备/屏幕高度
        let scrollObj = document.getElementById("scroll-area"); // 滚动区域
        if(scrollObj){
          let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
          //滚动条到底部的条件
          if (this.totalCount>(this.listQuery.page-1)*this.listQuery.limit) {
            if (this.touchend) {
              return;
            }
            //防止重复请求
            if (this.preventRepeatReuqest) {
              return;
            }
            this.preventRepeatReuqest = true;
            this.listQuery.page = this.currentPage+1;
            this.getAll();
          }
        }
      },
      getAll() {
        let t = this;
        axios.get('/api/uccn/summitActivity/app/unauth/list?page='+this.listQuery.page+'&limit='+this.listQuery.limit)
          .then(function(response) {
            t.totalCount = response.data.data.totalCount;
            let list = response.data.data.data;
            t.dataDetail = [...t.dataDetail, ...list];
            t.currentPage = response.data.data.pageNum;
            if (response.data.data.totalCount < t.listQuery.page*t.listQuery.limit) {
              t.touchend = true;
            }
            t.preventRepeatReuqest = false;
          });
      },
      // 点击下一页回调
      prev () {},
      // 点击下一页回调
      next () {},
      // 鼠标移入状态点回调
      changeBanner () {},
      bannerClick () {},
    },
    head () {
      return {
        title: "欣新活动|欣新沙龙|欣新高峰论坛|欣新论坛|欣新俱乐部|欣新展会|欣新活动直播链接|欣新活动APP"
      }
    },
  };

</script>

<style lang="scss">
  @import "../assets/styles/mixin";
  .activity-container{
    .activity-item{
      margin: 10px 0;
    }
    #scroll-area li{
      box-shadow: 2px 3px 13px rgba(153,153,153,0.2);
      margin: 15px 0 15px 0;
      border-radius: 3px;
    }
    .activity-item-d{
      padding: 14px 10px;
    }
    .activity-item-title{
      font-size: 15px;
      width: 220px;
      font-weight: bold;
    }
    .activity-time{
      font-size: 13px;
      color: #666;
      min-width: 115px;
      text-align: right;
    }
    .activity-addr{
      font-size: 12px;
      color: #666;
    }
  }
</style>
