<template>
  <div>
    <menu-modal v-on:goTour = "goTour"></menu-modal>
    <div class="main-container">
      <div>
        <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>
      <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" v-if="!dataNull">
          <li class="clearfix vehicle-item" v-for="(item,index) in dataDetail" :key="index" >
            <div style="float:left"><img :src="item.cover" alt style="width:225px;height:172px"/></div>
            <nuxt-link :to="item.link" class="flex-aic">
            <div style="float:left;padding-top:10px;width:850px;color:#333">
              <h2 style="font-size: 20px;font-weight:400;margin:0 0 18px 6px">{{item.name}}</h2>
              <h6 style="font-size: 14px;font-weight:400;margin:0 0 54px 14px">{{item.describe}}</h6>
              <button class="buttonDetails">旅行详情<img style="position: absolute;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></button>
            </div>
            </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>
    </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
    },
     created() {
       this.listQuery.tagId = this.$route.query.tagIds;
       
    this.getType();
    this.getAll();
    
    
     
  },
    data(){
      return{
        typeList:"旅行类型",
        showBanner: !0,
       looptime: 4000, // 循环时间
      typeId: "营地类型",
      dataType: [],
      totalCount: 0,
      dataDetail: [],
      width: 400,
      height:200,
      background: 'red',
      color: '#fff',
      fontSize: '70px',
      listQuery: {
        tagId: "",
        page: 1,
        limit: 10
      },
      store: "",
      dataNull:false
    };
    },
    methods:{
      goTour(e){
      this.listQuery.tagId = e;
      for(var i = 0;i<this.dataType.length;i++){
        if(e == this.dataType[i].id){
          this.typeList = this.dataType[i].name
        }
      }
      // console.log(this.dataType);
      
      // this.typeList="旅行类型"
      this.getAll();
    },
      chooseSelect() {
          this.listQuery.tagId = this.typeList;
           this.$router.push({ path: "/tour", query: { tagIds: this.listQuery.tagId } });
           this.getAll();
    },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getAll();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.listQuery.page = 1;
        this.getAll();
      },
    choose(e) {
      this.listQuery.tagId = e.target.value;
      this.getAll();
    },
      async getType() {
      const {
        data: { data }
      } = await axios.get("/api/uccn/app/unauth/tour/tagList" );
      data.unshift({id:"",name:'全部'})
      this.dataType = data;
      this.loading = false
       for(var i = 0;i<this.dataType.length;i++){
        if(this.$route.query.tagIds == this.dataType[i].id){
          this.typeList = this.dataType[i].name
        }
      }
    },
     async getAll() {
      let {
        data: { data }
      } = await axios.get(`/api/uccn/app/unauth/tour/getGoodList?tagId=${this.listQuery.tagId}&page=${this.listQuery.page}&limit=${this.listQuery.limit}`);

      data.data.map(function(item){
          item.link = encodeURI('/tourDetails/' + 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 () {},
    },
    head () {
    return {
      title: this.headList.title,
       meta: [
        { hid: 'keywords', name: 'keywords', content: this.headList.keywords },
        { hid: 'description', name: 'description', content: this.headList.description }
      ],
    }
  },
    async asyncData() {
     const { data } = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=1&platform=1');
     let cc = data.data;
     let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/3');
     let head = headData.data.data;
     return { bannerList: cc , headList : head}
    },
  }
</script>

<style scoped>
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.selectDiv{
  float: right;
  width: 145px;
  height: 35px;
  border-radius: 5px;
  margin: 8px 0;
  box-shadow: 0 0 5px #ccc;
}
.selectDiv select{
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  line-height: 35px;
  padding-left: 30px;
  /* appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; */

}

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

.campsiteDetail li {
  padding: 14px;
  margin-bottom: 20px;
  list-style: none;
  height: 200px;
  width: 1121px;
  background-color: #fff;
}

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


</style>
