<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 style="padding-bottom:23px;overflow:hidden;border-bottom:1px solid #F2F2F2" >关于欣新</div>
              <div >
                <div style="margin-top:23px">产品展示</div>
                 <ul class="v-ul clearfix">
                <li style="margin-right:12px">
                  <nuxt-link to="/vehicle" >房车租赁</nuxt-link>
                </li>
                <li
                  v-for="item in vehicleType"
                  :key="item.id"
                  style=""
                >{{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;border-bottom:1px solid #F2F2F2">
              <div style="padding-top:22px">新闻资讯</div>
              <ul class="v-ul clearfix">
                
                <li style="">
                  <nuxt-link to="/activity" >欣新活动</nuxt-link>
                </li>
                <li style="">
                  <nuxt-link to="/news" >新闻动态</nuxt-link>
                </li>
              </ul>
              </div>
              <div class="margin-Top">
                <div style="">联系我们</div>
              </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);
    },
    chooseType(e){
      if(e == undefined){
        e = "",
        console.log(3);
      }
      this.$router.push({ path: '/campsite', 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 {
  background-color: #fff;
  padding: 24px 28px 24px 31px;
  font-size: 14px;
  width: 1120px;
  height: 470px;
  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>
