<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:42px;background:#1bbb9f;color:#fff;border-radius: 0;"
            class="search"
						@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>
						<nuxt-link to="/vehicle?types=" :class="router== '/vehicle'?'active':''">房车租赁</nuxt-link>
					</li>
					<li>
						<nuxt-link to="/tour?tagIds=" :class="router== '/tour'?'active':''">房车旅游</nuxt-link>
					</li>
					<li>
						<nuxt-link to="/campsite?types=" :class="router== '/campsite'?'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 class="sidebar">
				<ul>
					<li>
						<a href="https://p.qiao.baidu.com/cps2/chatIndex?speedLogId=15716279636992e55_1571627963699_14930&eid=28588720&reqParam=%7B%22from%22%3A0%2C%22sid%22%3A%22-100%22%2C%22tid%22%3A%22-1%22%2C%22ttype%22%3A1%2C%22siteId%22%3A%2213772364%22%2C%22userId%22%3A%2228588720%22%2C%22pageId%22%3A0%7D" target="_blank">
							<span class="iconfont iconkefu"></span>
							<p>在线咨询</p>
						</a>
					</li>
					<li>
						<nuxt-link to="##">
							<span style="font-size: 28px;" class="iconfont iconweixin"></span>
							<div>
								<p>扫码关注公众号了解更多咨询</p>
								<img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat.jpg" alt />
							</div>
						</nuxt-link>
					</li>
					<li>
						<nuxt-link to="##">
							<span style="font-size: 28px;position: relative;left: 4px;" class="iconfont iconshouji"></span>
							<div>
								<p>扫码下载滴房车APP关注最新活动</p>
								<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" alt />
							</div>
						</nuxt-link>
					</li>
					<li>
						<nuxt-link to="##">
							<span class="iconfont iconfenxiang"></span>
							<div>
								<p>扫码进入欣新房车助手小程序</p>
								<img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat_app.jpg" alt />
							</div>
						</nuxt-link>
					</li>
					<li @click="goTop">
						<nuxt-link to="##">
							<span class="iconfont iconhuidaodingbu"></span>
              <p>回到顶部</p>
						</nuxt-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import axios from '../plugins/axios'
export default {
	transition: 'bounce',
	name: 'menuModal',
	props: [],
	data() {
		return {
			scrollTop: '',
			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: {
		goTop() {
			var currentScroll =
				document.documentElement.scrollTop || document.body.scrollTop
			if (currentScroll > 0) {
				window.requestAnimationFrame(this.goTop)
				window.scrollTo(0, currentScroll - currentScroll / 5)
			}
		},
		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>
.search:hover{
  background: rgb(18,156,132) !important;
}
.el-input--suffix:hover{
  color: #1bbb9f !important;
}
.el-input--suffix:hover.el-input__suffix{
  color: #1bbb9f !important;
}
.el-select-dropdown__item.selected{
  color: #1bbb9f;
}
.el-input-group__append,
.el-input-group__prepend {
	background: none;
	border: none !important;
}

.el-input__inner {
	border: 1px solid transparent !important;
}
.el-input__inner:hover {
	border: 1px solid transparent !important;
}
.el-input__suffix {
	right: 15px;
}
/* .el-input-group__append {
	border:1px solid red !important;
} */
.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: 1px solid #e5e5e5; */
	text-align: center;
	padding: 0;
}
.select-product li,
.select-news li {
	list-style: none;
	padding: 15px 0;
	width: 125px;
	text-align: center;
}
.select-product li a,
.select-news li a {
	color: #333;
	margin: 0;
	padding: 0;
	display: block;
	border: none;
	text-align: center;
}
.select-news li:hover {
  background: #1bbb9f !important;
}
.select-news li:hover a{
  color: #fff;
}
.select-product li a:hover {
	border: none !important;
}
.select-news li a:hover {
	border: none !important;
	color: #fff !important;
}
.select-product li:last-child,
.select-news li:last-child {
	border: none;
}
</style>