<template>
  <div class="order-page">
    <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: 0;"
      class="main-padding">
      <router-link
        v-for="item in dataDetail"
        :to="{ path: 'vehicleDetail', query:{id: item.id, name:item.name }}"
        :key="item.id"
        class="vehicle-item flex">
        <img
          :src="item.coverPic"
          :alt = "item.name"
          class="vehicle-img-list">
        <div class="vehicle-list flex-jcb-fdc">
          <div class="ellipsis2 vehicle-img-list-name">{{ item.name }}</div>
          <div class="flex-aic-jcb">
            <span
              v-for="(iitem,iindex) in item.uccnCataList"
              :key="iitem.id"
              class="flex-aic config">
              <img
                v-if="iindex==0"
                style="margin-right: 5px;width: 20px;"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABHNCSVQICAgIfAhkiAAABCJJREFUaIHt2k9sFGUABfD3vtnddnf7T1IOhSoSJCQokVLaRvSg8VAT8X+ywUsVI/FA4sGLHjw0IfHghXjgUEOsAUnMEkTTg6FqiBcOFCwaU1N6QVKshtJQ2O22uzPf81C7bdHQaTvbte38brM7s/Pe/P1md4FQKBQKhUKhUCi0FGzqPbE3InxCskHQlyNVo0eG972XK3ewUolEwTMkHgIAiIc3ZepvDwMflzlXyRgADxaniAqAu8sXp/QiBFicEijILLRQc1dXNPeAW5GvqjW1Xta9nPt+CqnTXkmTBiSymJmfSKfjbiLTQMd5POlwV1KqRjTxV3N0/2Xb++pg/4XBP9HZaUsVNgi+C+8+211XSEw+ZxA5RGIfwUoQgAAaThD5b1rathztky6B1MxyzZe6os6teKMUSZSkwTx5eI6x1vVyuWp7a/DJtzJzswA+Czf3dCWcmHmJxAcCd2DuaQCAYMIBX7cG25q+PXWwHxgovjmaqAfxPumuwLXBIGKRh2NGotlIX0vvFxemzp34+Zf2juzMHP72cCy+C0CHwB28p+xcpGmJGn24M51+cyCVygOAJ7fCgfMoDduWW8c/gsRrIn6qFD9t7un6+vIL74wC01fp+9qZTsdIsxfknvuVnV4NCIMXozUT24OKvgwOhRYCnaxMHGju6UoAPgrbDblqwm4FUONnLQSSUZg9ywwbpM1GeJfRqsfQ2WkWLJx0TQxinD42zgxRdcvLGLhtpPfKI60boguW8HJuDtA4AF/3WQEyhjeWHTFABAzJZ52aZGzBwlcKybsgrkq66efDBY3mrNu3/JjBErCZk5GFCyOV8mBtH4kLWGAvC7AkP/91vOqPoIIGRorG857xdVvK3rk2lKjdetwADSRbATj/+jzACjxjPR1FKlXcMJSyIr6DdD3A+ItG4s5EQZO+Cg+kOvMPn+8+X1/gHcq8QfJlAPUEqOmx1rCV95nnFrr7n397ZO6y/ZmqsdYNuWOea2IlaeLT1OSkHey/kWVb78ni0EtCXtDZvvaOA/+5VDrt7N6YrbZZr7EyVrkdQg2JEckOZWJ3bw48czizYg2WaFEPD0ilvCvAbQDjSKd/w8YB4mlY8P/9wDDX4grP0tzzdDXxPZhYK+bv4emrULLph1NbypSnZCxcNxGPj80rTCAGcn/Ms/vLFawUBEgyI4XMxEdLPYdXFQIksUlyjqyvc5ioW1eFCfDeQ9oTcJ3Qj2VJFCgDSE8B2ArODoXnFZbgCbp4sb3j4IrnCx5bzp3sNlQjwGLhdXVIA2HhtS8svNatv8LT31j8gxAI3Wf+1USEPGH2tyUBMoJGZ14gUABwtSzxSkDQEKTivxkkjRlZ95CVrgmYkPTVlHCsnCGDZGOTxwGdljQm4HdAh8udKRQKhUKhUCgUWq3+BswKetL4/mVRAAAAAElFTkSuQmCC">
              <img
                v-if="iindex==1"
                style="margin-right: 5px;width: 20px;"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAABHNCSVQICAgIfAhkiAAABU5JREFUaIHtmWtsFFUUx///e3e32y2lRSIaSrAIEhItFHdboo1GEgMWeSiGgjyKJDRrfMWY6Bdi0kRB/WKMr7BiKH2ApiI1YgqUGtJgVOw2GERCQqkQHwkE0JQ2dLe7c/xQdvucZdpZoG32l2yy994z557/nJn7GiBFihQpUqRIMW5h/F/tKu3LWvG0hnHfbYzHHkoJDLQe+6l1H8rLDQBwxNoKJy5fB8ougDT3MMoRgRDie/jejUGgGgBUvJGSz74ZHaMQIAQFsXI8g1AApNdQRMK3MjC7kHTFCyLxRDmGtAbQFQ3NjHSE/7vJcSWFzAlZ2XDIn0O1mQoUo7vzVMmLHTcvrOSRd3S303NNhmxTQ9aOI5IlcNQOTqaP6I0obKxciijXgCwAcBeBToH8FgW+ueyM7jq3cFNXEuMcMcMWmF9Xke3K0J/B4DNkvycgi+BUB7B4SlhvubOxZmXz4+ubkxjriBiWwNwjFW5XWDcRnJvIjuQ0GHLMe6Dy0ZbijT8MMhBhweE987RE04YZbz86ukLnTq4ou5DIZlgCp4TUR1Q94qRn3fBupDscCGtc9aRpF7udDwGyg8BkAtRKfe4NBPJa/P7uvn4KD1d/CtAvtLdq8qS7I94DFWvDQKOZjWWB876vzEGEa2NlIyplweLSnei3PEBdfkPFSRccxwlkgJitc91rAVT29SWCHEX7AxMBh6LOTmRjWaArghUkPQAAkdNBd1sl+osDAPy6aNOZgsaqrTC4lQANqGUYIDASCb/scDqvKcBttf+hMIRtne1Xv9AZ2U4zm2E8our+eIDkdiwsj5hZdoTCeyY60t4CoQmZOrD9+JObzwNYbb3vxOQd3T3JrM36PKh613cQw0hkSldUhkjubcG6QAOney9Sz6G2VpuZZhjpTwkZ851wlLvZWH5EQwjtT4f7PQBuRTxYmB1e/gtQN9Bubv2OaQTeJkABBIJDg5yVlyvvI7kzGNYjXmgAQFjJvycWl15MZGO5gxOLy/4obKiuI/BsT43s9R2sXBlsT/8OJSVRiNB7qOZuraSBYGaPCf7uaG/bOdCXb8HMzSqK7dT2RtJ0MOI7WFkUAs6Y2QzrDnYaoZc8yj1fQeYQUFqprwqzuy7yYNUFOVwzEUqmEj0jrQAiGmWnSsoH7SupUZqkzbVDUYqQFIG1q7RHu16gIVl9QnMSzIFCTk9VbwMFhkRlvXd/INiyzH+pn6+IbBEHPhGxN02QPBtV/DqRjWWBhdlLt0L4Bq1O0IRW4DqmeWZ7A4GivquZ5iWlTQAesNr3jUg0TVgSOKu+Pg245CdAETEAXAQQFGDwhphwEcwnMP26fx/vcb8OYNvIwreHJYF3qMurAWYBAAS7/2m/5P+r5LVrZvbeQMDJ6Z5irbGPgFbkq7lHKt6/HVsoS/OgaCMvNihEnfwgkTgAaPH7u4PFG74V4AoAgMyY3BGeYDvaEWApgxQVvxE6ir0LDlWFLPqfBFw/ypuQGa/0NdQUKcjHFLE1yAjQJog83zXUq3KdYU+0BGbYPRtWlHcoyLfrh8AcgXMlgCrTvqw5ot2FZb/rpVveFEgngIidnwCtkO59iTq2lMEOo2uby1CDViRWUVEaLT+evRIrNy8pbZpV/+HkSHqmrRSee+x8GCw3bE8Tvz+x+QpiA0aSaF3yitX32Bapc9GxzrgXaPoOuhzanXukwtY8datwdRpus1SZCtRMb50yVj6gKYHZ7stUYPwEbYwTT6yAP4+akyIbCCCgboqV++aVvobqNUownzBG7deiRAiUGMTx4KINX2IcJCtFihQpUqRIcQP+B7jnvcfwUWbhAAAAAElFTkSuQmCC">
              <img
                v-if="iindex==2"
                style="margin-right: 5px;width: 18px;"
                src="data:image/png;base64,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">
              {{ iitem.name }}
            </span>
          </div>
        </div>
      </router-link>
    </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=3&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/vehicleModel/app/unauth/findVehicleModelPage?page='+this.listQuery.page+'&limit='+this.listQuery.limit)
          .then(function(response) {
            t.totalCount = response.data.data.totalCount;
            let list = response.data.data.data;
            list.map(function(item){
              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]:'';
            });
            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";
  .vehicle-item{
    margin-top: 10px;
  }
  .tour-home-r, .news-home-r{
    width: 58%;
  }
  .vehicle-img-list-name{
    font-size:15px;
  }
  .vehicle-img-list{
    width: 139px;
    height: 107px;
    padding: 14px;
    padding-bottom: 0;
    border-radius: 3px;
  }
  .vehicle-list{
    border-bottom: 1px solid #eee;
    width: 100%;
    padding: px2rem(20px) 0;
    .config{
      color: #666;
    }
  }

  .order-page {
    .no-data {
      text-align: center;

      .nodata {
        width: px2rem(400px);
        height: px2rem(400px);
        margin: 15vh auto px2rem(10px) auto;
      }

      p {
        color: #6a6a6a;
        font-size: px2rem(32px);
        margin-bottom: px2rem(15px);
      }

      .login {
        width: px2rem(240px);
        height: px2rem(80px);
        background: #56d176;
        border: none;
        color: #fff;
        font-size: px2rem(28px);
        border-radius: 2px;
      }
    }
  }

</style>
