<template>
  <div class="campsite-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"/>
    <div>
      <nav
        id="nav"
        :class="searchBarFixed == true ? 'isFixed' :''">
        <p
          v-for="(item, index) in dataType"
          :key="index"
          :class="listQuery.type == item.id?'active':''"
          @click="chooseSelect(item)">{{ item.name }}</p>
      </nav>
    </div>
    <div style="padding-top: 0;border-top: 1px solid #dfdfdf;height: 17px;"/>
    <ul
      v-if="dataDetail.length"
      id="scroll-area"
      type="1"
      style="padding-top: 0;"
      class="main-padding campsite-ul">
      <li
        v-for="item in dataDetail"
        :key="item.id"
        class="campsite-li">
        <router-link
          :to="{ path: 'campsiteDetail', query:{id: item.id }}"
          class="campsite-item">
          <img
            :src="item.logo"
            class="campsite-logo">
          <div class="ellipsis2 campsite-name">{{ item.name }}</div>
        </router-link>
      </li>
    </ul>
    <p
      v-if="preventRepeatReuqest"
      class="loading">加载中……</p>
    <p id="empty"/>
    <p
      v-if="touchend"
      class="empty_data">—— 共{{ totalCount?totalCount:0 }}个房车营地——</p>
    <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{
        searchBarFixed: false,
        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: {
          type: "",
          pageNo: 1,
          pageSize: 10
        },
        store: "",
        dataNull:false,
        tourList: [],
        currentPage: 1,//当前加载页
        preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
      };
    },
    computed: {
      ...mapGetters(["userInfo"])
    },
    created() {
      // handleScroll为页面滚动的监听回调
      window.addEventListener('scroll', this.handleScroll);
      this.preventRepeatReuqest = true;
      this.getType();
      this.getAll();
    },
    async asyncData() {
      const { data } = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=2&platform=1');
      let cc = data.data;
      return { bannerList: cc}
    },
    methods: {
      handleScroll: function () {
        let path = $nuxt.$route.path;
        if(path == '/campsite'){
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          let scrollObj = document.getElementById("scroll-area"); // 滚动区域
          let menuTop = document.querySelector('#nav').offsetTop;
          let empty = document.querySelector('#empty').offsetTop;
          if (scrollTop > menuTop-44 && empty > document.documentElement.clientHeight) {
            this.searchBarFixed = true;
          }
          if (scrollTop < 80) {
            this.active = 'activity';
            this.searchBarFixed = false;
          }
          if(scrollObj) {
            let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
            //滚动条到底部的条件
            if (this.totalCount>(this.listQuery.pageNo-1)*this.listQuery.pageSize) {
              if (this.touchend) {
                return;
              }
              //防止重复请求
              if (this.preventRepeatReuqest) {
                return;
              }
              this.preventRepeatReuqest = true;
              this.listQuery.pageNo = this.currentPage + 1;
              this.getAll();
            }
          }
        }
      },
      chooseSelect(e) {
        this.listQuery.type = e.id;
        this.preventRepeatReuqest = true;
        this.dataDetail = [];
        this.listQuery.pageNo = 1;
        document.documentElement.scrollTop = 0;
        this.touchend = false;
        this.getAll();
      },
      getType() {
        let t = this;
        axios.get("/api/campsite/campsiteTag/app/unauth/tags")
          .then(function(response) {
            t.dataType = response.data.data;
            t.dataType.unshift({id:"",name:'全部'})
          });
      },
      getAll() {
        let t = this;
        axios.get('/api/uccn/app/unauth/campsite/shops?type='+this.listQuery.type+'&pageNo='+this.listQuery.pageNo+'&pageSize='+this.listQuery.pageSize)
          .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;
            response.data.data.totalCount = response.data.data.totalCount?response.data.data.totalCount: 0;
            if (response.data.data.totalCount < t.listQuery.pageNo*t.listQuery.pageSize) {
              t.touchend = true;
            }
            t.preventRepeatReuqest = false;
          });
      },
      // 点击下一页回调
      prev () {},
      // 点击下一页回调
      next () {},
      // 鼠标移入状态点回调
      changeBanner () {},
      bannerClick () {},
    },
    head () {
      return {
        title: "欣新房车营地|房车营地|房车露营|房车自驾营地|房车出行景点|房车营地APP"
      }
    },
  };

</script>

<style lang="scss">
  @import "../assets/styles/mixin";
  .campsite-container{
    nav{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      overflow: auto;
    }
    nav.isFixed{
      position: fixed;
      top: 44px;
      background: #fff;
      width: 100%;
      border-bottom: 1px solid #dfdfdf;
    }
    nav::-webkit-scrollbar { width: 0 !important }
    p{
      text-align: center;
      font-size: 14px;
      color: #999;
      flex-shrink: 0;
      margin: 27px 13px 0px 13px;
      padding-bottom: 13px;
    }
    p.active{
      border-bottom: 2px solid #1bbb9f;
      font-size: 16px;
      color: #333;
    }
    .campsite-ul{
      padding-top: 0px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .campsite-li{
        box-shadow: 2px 3px 13px rgba(153,153,153,0.2);
        width: 48%;
        margin: 10px 0;
        border-radius: 3px;
      }
      .campsite-logo{
        width: 100%;
        height: 110px;
        object-fit: cover;
        border-radius: 3px 3px 0 0;
      }
      .campsite-name{
        font-size: 14px;
        font-weight: bold;
        margin: 13px;
      }
    }

  }
  .news-item{
    margin: 10px 0;
  }
  .tour-home-r, .news-home-r{
    width: 58%;
  }
  .tour-img-home, .news-home-img{
    width: px2rem(300px);
    height: px2rem(150px);
  }
</style>
