<template>
  <div>
    <menu-modal></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>
    <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"
  export default {
    transition: "bounce",
    components: {
      menuModal,
      footerModal,
      vehicleBanner
    },
    data() {
      return {
        totalCount: "",
        dataDetail: [],
        bannerList: [],//关于欣新banner列表
        listQuery: {
          type: "",
          pageNo: 1,
          pageSize: 6
        },
        store: "",
        curId: 0,
        items1: {},
        curId1: 0,
        looptime: 4000, // 循环时间
        width: 400,
        height:200,
        background: 'red',
        color: '#fff',
        fontSize: '70px',
      };
    },
    created() {
      this.getAll();
      this.getBanner();
    },
    mounted() {
      window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
    },
    methods: {
      // 点击下一页回调
      prev () {
      },
      // 点击下一页回调
      next () {
      },
      // 鼠标移入状态点回调
      changeBanner () {
      },
      bannerClick () {
      },
      /**
       * 获取车型列表页banner
       */
      async getBanner(){
        //关于欣新banner   0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
        let tempBannerData = await axios.get( '/api/app/banner/app/unauth/findBannerlist?type=6&platform=1');
        let banner = tempBannerData.data.data;
        this.bannerList = banner;
      },
      chooseSelect(e) {
        console.log(e.target.value);
        this.listQuery.type = e.target.value;
        this.getAll();
      },
      async getAll() {
        let {
          data: { data }
        } = await axios.get(
          `https://dev.dfangche.com/api/uccn/vehicleModel/app/unauth/findVehicleModelPage?page=1&limit=100`
        );
        // console.log(data);
        this.totalCount = data.totalCount;
        data.data.map(function(item){
//          item.modelParam = JSON.parse( item.modelParam);
          item.link = encodeURI('/vehicleList/' + item.id+'?name='+item.name);
          item.link = encodeURI(item.link);
          item.pictureList = item.picture.split(",");
          item.coverPic = item.coverPic?item.coverPic: item.pictureList.length>0?item.pictureList[0]:'';
        });
        this.dataDetail = data.data;
        // this.dataDetail = this.dataDetail.push(data.data);
      },
      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();

        }
      }
    },
  };
</script>

<style scoped>
  .clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {
    *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }
  .wrap {
    width: 1200px;
    margin: 0 auto;
    background: #fff;
  }
  .banner {
    /* background-color: #fff; */
    text-align: center;
  }

  .banner h2 {
    font-size: 20px;
    font-weight: 700;
    padding-top: 40px;
  }

  .banner h3 {
    font-size: 16px;
    padding-top: 20px;
    font-weight: 400;
    padding-bottom: 40px;
  }

  .campsiteDetail {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .campsiteDetail li {
    list-style: none;
    display: flex;
  }

  .toDetail {
    font-size: 16px;
  }

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