<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="clearfix total-div" style="background-color: #fff;padding:5px 10px">
          共{{totalCount}}个旅行路线
          <select
            @change="chooseSelect($event)"
            style="width:180px;text-align:center;height:30px;float:right"
          >
            <option value>旅行类型</option>
            <option v-for="item in dataType" :value="item.id" :key="item.id">{{ item.name }}</option>
            <option value>全部</option>
          </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" style="margin:20px 0;background-color: #fff;padding:20px">
            <div style="float:left;width:30%"><img :src="item.cover" alt style="width:100%;height:193px"/></div>
            <div style="float:left;width:70%;padding-left:30px">
              <h2 style="font-size: 18px">{{item.name}}</h2>
              <h6 style="font-size: 16px;font-weight:400;margin:35px 8px">{{item.describe}}</h6>

              <nuxt-link :to="item.link">
               <button class="buttonDetails">旅游详情</button>
            </nuxt-link>
            </div>
          </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{
        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(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" );
      this.dataType = data;
    },
     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: {
      title: '房车旅游'
    },
    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执行，其他浏览器不执行*/
}

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

.campsiteDetail li {
  padding: 20px;
  margin: 50px 0;
  list-style: none;
  height: 233px;
}

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