<template>
  <div>
    <menu-modal @goCam="goCam"></menu-modal>
    <div class="main-container">
      <vehicle-banner
        :list = "bannerList"
        :looptime="looptime"
        :width="width"
        :height="height"
        :background="background"
        :color="color"
        :fontSize="fontSize"
        @prev="prev"
        @next="next"
        @change="changeBanner"
        @click="bannerClick"
        class="mb-50">
      </vehicle-banner>
      <div class="wrap">
        <div class="bread-menu" style="margin-top: 20px;padding: 0">
          <nuxt-link to="/">首页></nuxt-link>
          <span>房车营地</span>
        </div>
        <div class="clearfix total-div" style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px">
          共{{totalCount}}个房车营地
          <el-select
             style="width:150px;height:30px;float:right;margin:-8px 10px 10px 0"
             value-key="id"
              v-model="typeList"
              placeholder="营地类型"
              @change="chooseSelect()">
              <el-option
                v-for="item in dataType"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
        </div>
        <h3 v-if="dataNull" style="margin:20px 0;background-color: #fff;padding:20px">暂无信息</h3>
        <ul class="campsiteDetail clearfix" v-if="!dataNull">
          <li v-for="(item,idx) in dataDetail" :key="idx">
            <nuxt-link :to="item.link"  class="vehicle-item">
              <img :src="item.logo" alt style="width:100%;height:223px" />
              <h2 style="font-size:20px;margin-top:22px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ item.name }}</h2>
              <button class="buttonDetails">营地详情<img style="position: absolute;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></button>
            </nuxt-link>
          </li>
        </ul>
        <div class="pagination-container">
          <el-pagination @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.page"
                         @size-change="handleSizeChange"
                         :page-sizes="[9,18,24, 45]" :page-size="listQuery.pageSize"
                         layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
        </div>
      </div>
    </div>
    <go-top></go-top>
    <footer-modal></footer-modal>
  </div>
</template>

<script>
import axios from '../plugins/axios';
import menuModal from "../components/menu";
import footerModal from "../components/footer";
import vehicleBanner from "../components/vehicleBanner"
import GoTop from "../components/goTop";
export default {
  transition: "bounce",
  components: {
    GoTop,
    menuModal,
    footerModal,
    vehicleBanner
  },
  data() {
    return {
      typeList:"营地类型",
      showBanner: !0,
      looptime: 4000, // 循环时间
      typeId: "营地类型",
      dataType: [],
      totalCount: 0,
      dataDetail: [],
      width: 400,
      height:200,
      background: 'red',
      color: '#fff',
      fontSize: '70px',
      listQuery: {
        type: "",
        pageNo: 1,
        pageSize: 9
      },
      store: "",
      dataNull:false
    };
  },
  created() {
     this.listQuery.type = this.$route.query.types;
    this.getType();
    this.getAll();
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
  },
  methods: {

    chooseSelect() {
      console.log(this.typeList);
          this.listQuery.type = this.typeList;
          this.$router.push({ path: "/campsite", query: { types: this.listQuery.type } });
           this.getAll();
    },
    goCam(e){
      this.listQuery.type = e;
      for(var i = 0;i<this.dataType.length;i++){
        if(e == this.dataType[i].id){
          this.typeList = this.dataType[i].name
        }
      }
      
      this.getAll();
      // this.typeList="营地类型";
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getAll();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.listQuery.pageNo = 1;
      this.getAll();
    },
    async getType() {
      const {
        data: { data }
      } = await axios.get("/api/campsite/campsiteTag/app/unauth/tags");
      data.unshift({id:"",name:'全部'})
      this.dataType = data;
      for(var i = 0;i<this.dataType.length;i++){
        if(this.$route.query.types == this.dataType[i].id){
          this.typeList = this.dataType[i].name
        }
      }
    },
    async getAll() {
      let {
        data: { data }
      } = await axios.get(`/api/uccn/app/unauth/campsite/shops?type=${this.listQuery.type}&pageNo=${this.listQuery.pageNo}&pageSize=${this.listQuery.pageSize}`);
      data.data.map(function(item){
          item.link = encodeURI('/campsiteDetails/' + item.id);
          item.link = encodeURI(item.link);
        });
      if(!data.data.length == 0){
         this.totalCount = data.totalCount;
         this.dataDetail = data.data;
         this.dataNull = false
      }else{
        this.totalCount = 0;
        this.dataDetail = data.data;
        this.dataNull = true
      }
    },
    // 点击下一页回调
    prev () {
    },
    // 点击下一页回调
    next () {
    },
    // 鼠标移入状态点回调
    changeBanner () {
    },
    bannerClick () {
    },
     mounted() {
            window.addEventListener('scroll', this.scrollHandle);  // 绑定页面的滚动事件
          },
          scrollHandle: function(e) {
           //变量scrollTop是滚动条滚动时，距离顶部的距离
   		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
   		//变量windowHeight是可视区的高度
   		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
   		//变量scrollHeight是滚动条的总高度
   		var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
               //滚动条到底部的条件
               if(scrollTop+windowHeight+0.7>scrollHeight){
                //写后台加载数据的函数
//          	      console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
                // this.listQuery.pageNo++;
                // this.getAll();

              }  
          }
  },
  async asyncData() {
   const { data } = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=2&platform=1');
   let cc = data.data;
   let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/4');
  let head = headData.data.data;
   return { bannerList: cc, headList : head}
  },
  head () {
    return {
      title: this.headList.title,
       meta: [
        { hid: 'keywords', name: 'keywords', content: this.headList.keywords },
        { hid: 'description', name: 'description', content: this.headList.description }
      ],
    }
  }
};
</script>
<style scoped>
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.wrap {
  padding: 0 0;
}
.campsiteDetail {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  /*justify-content: space-between;*/
  width: 1120px;
  flex-wrap: wrap;
}

.campsiteDetail li a{
  padding: 14px;
  margin-bottom: 20px;
  list-style: none;
  width: 360px;
  height: 372px;
  float: left;
  margin-right: 20px;
  background-color: #fff
}
.campsiteDetail li:nth-child(3n) a{
  margin-right: 0;
}
.campsiteDetail li:nth-child(3n+0) { margin-right:0px; }
.toDetail {
  font-size: 16px;
}

.buttonDetails {
  width: 130px; /* 宽度 */
  height: 35px; /* 高度 */
  border-width: 0px; /* 边框宽度 */
  background: #1bbb9f; /* 背景颜色 */
  cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
  outline: none; /* 不显示轮廓线 */
  font-family: Microsoft YaHei; /* 设置字体 */
  color: white; /* 字体颜色 */
  margin: 27px 14px 0px 202px
}
</style>
