<template>
  <div>
    <div class="menu-container">
      <div style="width: 100%;position: fixed;top: 0;z-index: 1000;border-bottom: 1px solid #eee;">
        <div
          class="flex-aic-jcb"
          style="width: 1120px; margin: 0 auto;font-size:12px;height: 40px;color: #666;position: relative"
        >
          <div>您好！欢迎进入欣新房车集团官方网站</div>
          <div class="ft-14" style="position: relative;right:20px;">
            <span style="margin-right:30px" class="help">
              <nuxt-link to="/company">服务热线： 4000-369-369</nuxt-link>
            </span>
            <nuxt-link to="/indexWeb">
              <span style="color:#666" @mouseenter="enter()" @mouseleave="leave()">网站地图</span>
            </nuxt-link>

            <span class="triangle-down"></span>
          </div>
          <!--v-if="visibleMap"-->
          <div class="webMap" v-if="visibleMap" @mouseenter="enter()" @mouseleave="leave()">
            <div style="border-bottom: 1px solid rgb(242, 242, 242);">
              <ul class="v-ul clearfix" style="margin-bottom: 15px;">
                <li>
                  <nuxt-link to="/aboutXx">欣新介绍</nuxt-link>
                </li>
              </ul>
            </div>
            <div>
              <!--<div style="margin-top:23px">产品展示</div>-->
              <ul class="v-ul clearfix flex-aic">
                <li style="margin-right:12px;min-width: 60px;" @click="chooseVe()">房车租赁</li>
                <div class="secoud-li">
                  <li
                    v-for="item in vehicleType"
                    :key="item.id"
                    style
                    @click="chooseVe(item.id)"
                  >{{item.name}}</li>
                </div>
              </ul>
              <ul class="v-ul clearfix flex-aic" style="margin-top:9px;">
                <li style="margin-right:12px;min-width: 60px;" @click="chooseSelect()">房车旅行</li>
                <div class="secoud-li">
                  <li
                    v-for="item in tourType"
                    :key="item.id"
                    @click="chooseSelect(item.id)"
                  >{{item.name}}</li>
                </div>
              </ul>
              <ul
                class="v-ul clearfix flex-aic"
                style="margin-top:9px;padding-bottom:9px;border-bottom:1px solid #F2F2F2"
              >
                <li style="margin-right:12px;min-width: 60px;" @click="chooseType()">房车营地</li>
                <div class="secoud-li">
                  <li
                    v-for="item in campsiteType"
                    :key="item.id"
                    @click="chooseType(item.id)"
                  >{{item.name}}</li>
                </div>
              </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">
              <ul class="v-ul clearfix">
                <li style>
                  <nuxt-link to="/activity">欣新活动</nuxt-link>
                </li>
                <li style="padding: 0 10px;">
                  <nuxt-link to="/news">新闻动态</nuxt-link>
                </li>
              </ul>
            </div>
            <div>
              <ul class="v-ul clearfix">
                <li>
                  <nuxt-link to="/company">联系我们</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="menu">
              <!-- src="https://mgmt.dfangche.com/xxfccn/image/home/logo.png" -->
        <nuxt-link to="/">
          <div class="flex-aic menu-logo-l">
            <img
              src="../assets/images/logos.png"
              style="width:175px;"
              alt="欣新房车，让生活更美好"
            />
          </div>
        </nuxt-link>
        <el-input
          placeholder="车型/旅游路线/营地/活动/新闻/子公司"
          v-model="listQuery.keyword"
          class="input-with-select menu-select"
        >
          <el-select v-model="select" slot="prepend" placeholder="综合" style="width:90px">
            <el-option
              v-for="menu in findList"
              :key="menu.id"
              :label="menu.name"
              :value="menu.link"
              style="width:90px"
            >{{menu.name}}</el-option>
          </el-select>
          <el-button slot="append" style="width:88px;height:44px" @click="findTo()">搜索</el-button>
          <!-- <el-button slot="append" style="width:88px;height:44px" @click="findTo()">搜索</el-button> -->
        </el-input>
        <!-- <ul class="users">
          <li v-for="menu in menuList" :key="menu.id">
            <nuxt-link
              v-if="menu.link=='/'"
              :to="menu.link"
              :class="router== menu.link?'active':''"
            >{{ menu.name }}</nuxt-link>
            <nuxt-link
              v-else
              :to="menu.link"
              :class="router.indexOf(menu.link) != -1?'active':''"
            >{{ menu.name }}</nuxt-link>
          </li>
        </ul>-->
      </div>
      <div class="menu-new">
        <ul class="users">
          <li>
            <nuxt-link to="/" :class="router== '/'?'active':''">网站首页</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/aboutXx" :class="router== '/aboutXx'?'active':''">欣新介绍</nuxt-link>
          </li>
          <li style="position: relative" class="select">
            <nuxt-link
              to="/vehicle"
              :class="router== '/vehicle' || router== '/tour'  || router== '/campsite'?'active':''"
            >
              产品展示
              <span class="arrow"></span>
            </nuxt-link>
            <ul class="select-product">
              <li>
                <nuxt-link to="/vehicle?types=">房车租赁</nuxt-link>
              </li>
              <li>
                <nuxt-link to="/tour?tagIds=">房车旅游</nuxt-link>
              </li>
              <li>
                <nuxt-link to="/campsite?types=">房车营地</nuxt-link>
              </li>
            </ul>
          </li>
          <!-- <li>
            <nuxt-link to="/" :class="router== '/aboutXx'?'active':''">招商加盟</nuxt-link>
          </!-->
          <li style="position: relative" class="news-msg">
            <nuxt-link
              to="/activity"
              :class="router== '/activity' || router== '/news' ?'active':''"
            >
              新闻资讯
              <span class="arrow"></span>
            </nuxt-link>
            <ul class="select-news">
              <li>
                <nuxt-link to="/activity">房车活动</nuxt-link>
              </li>
              <li>
                <nuxt-link to="/news">新闻动态</nuxt-link>
              </li>
            </ul>
          </li>
          <li>
            <nuxt-link to="/company" :class="router== '/company'?'active':''">联系我们</nuxt-link>
          </li>
          <!-- <el-menu class="el-menu-demo" mode="horizontal">
            <el-submenu index="2">
              <template slot="title">我的工作台</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
              <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>-->

          <!-- <li v-for="menu in menuList" :key="menu.id">
            <nuxt-link
              v-if="menu.link=='/'"
              :to="menu.link"
              :class="router== menu.link?'active':''"
            >{{ menu.name }}</nuxt-link>
            <nuxt-link
              v-else
              :to="menu.link"
              :class="menu.link.indexOf(router) != -1 && router!='/' ?'active':''"
            >{{ menu.name }}</nuxt-link>
          </li>-->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../plugins/axios";
export default {
  transition: "bounce",
  name: "menuModal",
  props: [],
  data() {
    return {
      router: "/",
      activeLink: "true",
      menuList: [
        { id: 1, name: "网站首页", link: "/" },
        { id: 7, name: "欣新介绍", link: "/aboutXx" },
        { id: 2, name: "产品展示", link: "/vehicle?types=" },
        { id: 3, name: "招商加盟", link: "/tour?tagIds=" },
        { id: 4, name: "新闻资讯", link: "/campsite?types=" },
        { id: 8, name: "联系我们", link: "/company" }
      ],
      tourType: [],
      vehicleType: [],
      childType: [],
      visibleMap: false,
      select: "/findList/all",
      findList: [
        { id: 1, value: "", name: "综合", link: "/findList/all" },
        {
          id: 2,
          value: "vehicle",
          name: "车型",
          link: "/findList/findVehicle"
        },
        { id: 3, value: "tour", name: "旅游", link: "/findList/findTour" },
        {
          id: 4,
          value: "campsite",
          name: "营地",
          link: "/findList/findCampsite"
        },
        {
          id: 5,
          value: "activity",
          name: "活动",
          link: "/findList/findActivity"
        },
        { id: 6, value: "news", name: "新闻", link: "/findList/findNew" },
        {
          id: 7,
          value: "company",
          name: "子公司",
          link: "/findList/findCompany"
        }
      ],
      listQuery: {
        type: "",
        keyword: "",
        page: "",
        limit: ""
      }
    };
  },
  created() {
    // console.log(this);
    this.getType();

    if (
      this.$route.path == "/findList/all" ||
      this.$route.path == "/findList/findVehicle" ||
      this.$route.path == "/findList/findTour" ||
      this.$route.path == "/findList/findCampsite" ||
      this.$route.path == "/findList/findActivity" ||
      this.$route.path == "/findList/findNew" ||
      this.$route.path == "/findList/findCompany"
    ) {
      this.select = this.$route.path;
    } else {
      this.select = "/findList/all";
    }

    this.listQuery.keyword = this.$route.query.keywords;
    let router = this.$route.path;
    this.router = router;
  },
  methods: {
    chooseSelect(e) {
      if (e == undefined) {
        (e = ""), console.log(2);
      }
      this.$router.push({ path: "/tour", query: { tagIds: e } });
      console.log(e);
      this.$emit("goTour", e);
      this.visibleMap = false;
    },
    chooseType(e) {
      if (e == undefined) {
        (e = ""), console.log(3);
      }
      this.$router.push({ path: "/campsite", query: { types: e } });
      console.log(e);
      this.$emit("goCam", e);
      this.visibleMap = false;
    },
    chooseVe(e) {
      if (e == undefined) {
        (e = ""), console.log(3);
      }
      this.$router.push({ path: "/vehicle", query: { types: e } });
      console.log(e);
      this.$emit("goVe", e);
      this.visibleMap = false;
    },
    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);
    },
    enter() {
      var test = window.location.pathname;
      if (test == "/indexWeb") {
        this.visibleMap = false;
      } else {
        this.visibleMap = true;
      }
    },
    leave() {
      this.visibleMap = false;
    },
    findTo() {
      if (this.listQuery.keyword == undefined) {
        (this.listQuery.keyword = ""), console.log(2);
      }
      this.$router.push({
        path: this.select,
        query: { keywords: this.listQuery.keyword }
      });
      console.log(this.select);
      console.log(this.listQuery.keyword);

      this.$emit("childByValue", this.listQuery.keyword);
    }
  }
};
</script>
<style>
.secoud-li li {
  padding: 0 10px !important;
}
.arrow {
  width: 0;
  height: 0;
  border-top: 5px solid #e5e5e5;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: absolute;
  top: 20px;
  right: 15px;
}
.select .arrow,
.news-msg .arrow {
  transition: all 0.2s linear;
}
.select:hover .arrow {
  transition: all 0.2s linear;
  transform: rotate(180deg);
}
.news-msg:hover .arrow {
  transition: all 0.2s linear;
  transform: rotate(180deg);
}
.select:hover .select-product {
  display: block;
}
.news-msg:hover .select-news {
  display: block;
}
.select-product,
.select-news {
  position: absolute;
  top: 42px;
  left: 10px;
  background: #fff;
  padding: 10px 24px;
  display: none;
  border-radius: 5px;
  border: 1px solid #e5e5e5
}
.select-product li,
.select-news li {
  list-style: none;
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  width: 80px;
  text-align: center;
}
.select-product li a,
.select-news li a {
  color: #333;
  margin: 0;
  padding: 0;
  display: block;
  border: none;
}
.select-product li a:hover {
  border: none !important;
}
.select-news li a:hover {
  border: none !important;
}
.select-product li:last-child,
.select-news li:last-child {
  border: none;
}
</style>