<template>
  <div class="container" >
    <menu-modal></menu-modal>
    <div class="main-container">
      <div class="wrap" style="">

        <div style="margin: 20px 0;padding: 0" class="shouy">
          <nuxt-link to="/" >首页></nuxt-link>
          <span>网站地图</span>
        </div>
        <div class="webMap">
          <div class="" style="padding-bottom:12px;border-bottom: 1px solid rgb(242, 242, 242);">
            <ul class="v-ul clearfix" style="margin-top:9px;">
              <li style="margin-right:12px" @click="jumpUrl('/aboutXx')">
                欣新介绍
              </li>
            </ul>
          </div>
              <div >
                <!--<div style="margin-top:23px">产品展示</div>-->
                 <ul class="v-ul clearfix">
                <li style="margin-right:12px" @click="chooseVe()">
                  房车租赁
                </li>
                <li
                  v-for="item in vehicleType"
                  :key="item.id"
                  style=""
                  @click="chooseVe(item.id)"
                >{{item.name}}</li>
              </ul>
              <ul class="v-ul clearfix" style="margin-top:9px">
                 <li style="margin-right:12px;"
                @click="chooseSelect()">
                 房车旅行
                </li>
                 <li
                  v-for="item in tourType"
                  :key="item.id"
                  @click="chooseSelect(item.id)"
                >{{item.name}}</li>
              </ul>
              <ul class="v-ul clearfix" style="margin-top:9px;padding-bottom:9px;border-bottom:1px solid #F2F2F2">
                <li style="margin-right:12px"  @click="chooseType()">
                  房车营地
                </li>
                <li
                  v-for="item in campsiteType"
                  :key="item.id"
                  @click="chooseType(item.id)"
                >{{item.name}}</li>
              </ul>
              </div>
              <!--<div class="" style="padding:26px 0 ;border-bottom:1px solid #F2F2F2" >-->
              <!--<div style="">招商加盟</div>-->
            <!--</div>-->
            <div class="" style="padding-bottom:12px;">
              <!--<div style="padding-top:22px">新闻资讯</div>-->
              <ul class="v-ul clearfix" style="margin-top:9px;padding-bottom:9px;border-bottom:1px solid #F2F2F2">
                <li style="margin-right:12px" @click="jumpUrl('/activity')">
                  欣新活动
                </li>
                <li style="margin-right:12px"  @click="jumpUrl('/news')">
                  新闻动态
                </li>
              </ul>
              </div>
          <div class="" style="padding-bottom:12px;">
            <ul class="v-ul clearfix" style="margin-top:9px;">
              <li style="margin-right:12px" @click="jumpUrl('/company')">
                联系我们
              </li>
            </ul>
          </div>
        </div>
      </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 GoTop from "../components/goTop";
export default {
  data() {
    return {
      tourType: [],
      campsiteType: [],
      vehicleType:[]
    };
  },
  components: {
    GoTop,
    menuModal,
    footerModal
  },
  created() {
    this.getType();
  },
  methods: {
    chooseSelect(e){
       if(e == undefined){
        e = "",
        console.log(2);
      }
      this.$router.push({ path: '/tour', query: { tagIds: e } });
      console.log(e);
    },
    jumpUrl(url){
      this.$router.push(url);
    },
    chooseType(e){
      if(e == undefined){
        e = "",
        console.log(3);
      }
      this.$router.push({ path: '/campsite', query: { types: e } });
      console.log(e);
    },
    chooseVe(e){
       if(e == undefined){
        e = "",
        console.log(3);
      }
      this.$router.push({ path: '/vehicle', query: { types: e } });
      console.log(e);
    },
    async getType() {
      const tour = await axios.get("/api/uccn/app/unauth/tour/tagList");
      this.tourType = tour.data.data;
      const campsite = await axios.get(
        "/api/campsite/campsiteTag/app/unauth/tags"
      );
      this.campsiteType = campsite.data.data;
      const child = await axios.get(
        "/vehicle/cata/app/unauth/types"
      );
      this.vehicleType = child.data.data;
      console.log(this.childType);
    },
    // goTo(){
    //    this.$router.push({ path: "/campaite", query: { type: 53 } });
    // }
  }
};
</script>

<style scoped>
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.webMap {
  position: relative;
  background-color: #fff;
  padding: 24px 28px 24px 31px;
  font-size: 14px;
  width: 1120px;
  margin: 0 auto 30px auto;
}

.v-ul {
  margin: 0;
  padding: 0;
  margin-top: 15px;
  list-style: none;
}
.v-ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  cursor: pointer;
  width:90px;height:30px;line-height:30px;text-align:center
}
.v-ul li:hover{
  background-color: #1BBB9F;
  color: #fff
}
a{
  text-decoration: none;
  color: #666666
}
.v-ul li:hover a{
  background-color: #1BBB9F;
  color: #fff
}
.margin-Top{
  margin-top:22px;
}
.shouy{
  color: #666666
}
.shouy a:hover{
  color: #1BBB9F
}
</style>
