<template>
  <div>
    <menu-modal></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}}个旅行路线
          <!-- <div class="selectDiv"> -->
             <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>
          <!-- <select
            @change="choose($event)"
            style="width:145px;text-align:center;height:30px;float:right;border:none;outline: none;color:#666;padding-left:30px"
          >
            <option value>旅行类型</option>
            <option v-for="item in dataType" :value="item.id" :key="item.id" style="outline: none;">{{ item.name }}</option>
            <option value>全部</option>
          </select> -->
          <!-- </div> -->
        </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="../assets/images/r.png"/></button>
            
            </div>
            </nuxt-link>
          </li>
        </ul>
      </div>
    </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
    },
     created() {
    this.getType();
    this.getAll();
  },
    data(){
      return{
        typeList:"旅行类型",
        showBanner: !0,
       looptime: 4000, // 循环时间
      typeId: "营地类型",
      dataType: [],
      totalCount: "",
      dataDetail: [],
      width: 400,
      height:200,
      background: 'red',
      color: '#fff',
      fontSize: '70px',
      listQuery: {
        tagId: "",
        page: 1,
        limit: 100
      },
      store: "",
      dataNull:false
    };
    },
    methods:{
      chooseSelect() {
      console.log(this.typeList);
          this.listQuery.tagId = this.typeList
           this.getAll();
    },
    choose(e) {
      console.log(e.target.value);
      this.listQuery.tagId = e.target.value;
      this.getAll();
    },
      async getType() {
      const {
        data: { data }
      } = await axios.get("/api/uccn/app/unauth/tour/tagList" );
      data.push({id:"",name:'全部'})
      this.dataType = data;
      console.log(data);
      this.loading = false
    },
     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}`);
      console.log(data);
      data.data.map(function(item){
          item.link = encodeURI('/tourDetails/' + item.id+'?name='+item.name);
          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: "欣新房车旅游|房车自驾游|房车旅行|房车一日游|房车出行|房车旅游景点|房车旅行攻略|房车旅游APP"
      }
    },
    async asyncData() {
     const { data } = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=1&platform=1');
     let cc = data.data;
     return { bannerList: cc}
    },
  }
</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>
