<template>
  <div>
    <menu-modal @goVe="goVe"></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" style="background: #f1f1f1;">
        <div class="bread-menu" style="margin-top: 20px;padding: 0">
          <nuxt-link to="/">首页></nuxt-link>
          <span>房车租赁</span>
        </div>
        <div class="total-div">
          共{{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>
        <ul class="campsiteDetail clearfix">
          <li v-for="item in dataDetail" :key="item.id" class="vehicle-item">
            <nuxt-link :to="item.link" class="flex-aic">
              <img class="v-img-cover" :src="item.coverPic" alt="房车租赁" />
              <div style="margin-left: 20px;width: 750px;">
                <h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2>
                <div class="vehicle-desc">{{item.intro}}</div>
                <div class="flex-aic">
                  <span class="flex-aic config" v-for="(iitem,iindex) in item.uccnCataList" :key="iitem.id">
                    <img style="margin-right: 5px;" v-if="iindex==0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg=="/>
                    <img style="margin-right: 5px;" v-if="iindex==1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII="/>
                    <img style="margin-right: 5px;" v-if="iindex==2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC"/>
                    {{iitem.name}}
                  </span>
                  <span class="more-set">+更多配置</span>
                </div>
              </div>
              <nuxt-link :to="item.link" class="flex-aic">
                <button class="buttonDetails">租车详情<img style="position: absolute;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></button>
              </nuxt-link>
            </nuxt-link>
          </li>
        </ul>
        <div class="pagination-container">
          <el-pagination @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.page"
                         @size-change="handleSizeChange"
                         :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                         layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
        </div>
        <div class="right">
          <nuxt-child :key="$route.params.id" />
        </div>
      </div>
    </div>
    <go-top></go-top>
    <footer-modal></footer-modal>
  </div>
</template>

<script>
  import axios from '../plugins/axios'
  import GoTop from "../components/goTop";

  import menuModal from "../components/menu";
  import footerModal from "../components/footer";
  import vehicleBanner from "../components/vehicleBanner"
  export default {
    transition: "bounce",
    components: {
      menuModal,
      footerModal,
      vehicleBanner,
      GoTop
    },
    data() {
      return {
        // headList:{},
        typeList:"车型",
        dataType:[],
        totalCount: 0,
        dataDetail: [],
        bannerList: [],//车型banner列表
        listQuery: {
          type: "",
          page: 1,
          limit: 10
        },
        store: "",
        curId: 0,
        items1: {},
        curId1: 0,
        looptime: 4000, // 循环时间
        width: 400,
        height:200,
        background: 'red',
        color: '#fff',
        fontSize: '70px',
      };
    },
    created() {
      this.listQuery.type = this.$route.query.types;
      this.getType();
      this.getAll();
      this.getBanner();
      // this.getHead()

    },
    mounted() {
      window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
    },
    methods: {
      goVe(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.page = val;
        this.getAll();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.listQuery.page = 1;
        this.getAll();
      },
      // 点击下一页回调
      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=3&platform=1');
        let banner = tempBannerData.data.data;
        this.bannerList = banner;
      },
       chooseSelect() {
      console.log(this.typeList);
          this.listQuery.type = this.typeList;
           this.$router.push({ path: "/vehicle", query: { types: this.listQuery.type } });
           this.getAll();
    },
       async getType() {
      const {
        data: { data }
      } = await axios.get("/vehicle/cata/app/unauth/types" );
      data.unshift({id:"",name:'全部'})
      this.dataType = data;
      console.log(data);
      this.loading = false
      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/vehicleModel/app/unauth/findVehicleModelPage?page=${this.listQuery.page}&limit=${this.listQuery.limit}&vehicleType=${this.listQuery.type}`);
        this.totalCount = data.totalCount;
        data.data.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]:'';
        });
        this.dataDetail = data.data;
        // this.dataDetail = this.dataDetail.push(data.data);
      },
      mounted() {
        window.addEventListener('scroll', this.scrollHandle);  // 绑定页面的滚动事件
      },

    },
    async asyncData() {
     const { data } = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/2');
     let cc = data.data;
     return { headList: cc}
    },
    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执行，其他浏览器不执行*/
  }
 .more-set:hover{
   border:1px solid #1bbb9f;
   color: #1bbb9f;
 }
  .more-set{
    border: 1px solid #999;
    padding: 3px 10px;
    color: #999;
    font-size: 12px;
    cursor: pointer;
  }
  .banner {
    /* background-color: #fff; */
    text-align: center;
  }
  .v-img-cover{
    width: 190px;
    height:122px;
  }

  .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: 116px;
    height: 34px;
    border-width: 0px;
    background: #1bbb9f;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    color: white;
    font-size: 14px;
    padding-right: 15px;
  }
</style>
