<template>
	<div class="sidebar-list-a">
		<h2>产品展示</h2>
		<p>房车租赁</p>
		<ul>
			<li v-for="(item,index) in vehicleList" :key="index" @click="rentLink(item.id)">
				<nuxt-link :to="'/vehicle?types='+item.id" :class='{activeList:activeRouter == "/vehicle?types="+item.id}'>{{item.name}}</nuxt-link>
			</li>
		</ul>
		<p>房车旅游</p>
		<ul>
			<li v-for="(item,index) in tourList" :key="index" @click="links(item.id)">
				<nuxt-link :to="'/tour?tagIds='+item.id" :class='{activeList:activeRouter == "/tour?tagIds="+item.id}'>{{item.name}}</nuxt-link>
			</li>
		</ul>
		<p>房车营地</p>
		<ul>
			<li v-for="(item,index) in campsiteList" :key="index" @click="campsiteLink(item.id)">
				<nuxt-link :to="'/campsite?types='+item.id" :class='{activeList:activeRouter == "/campsite?types="+item.id}'>{{item.name}}</nuxt-link>
			</li>
		</ul>
	</div>
</template>
<script>
import axios from '../plugins/axios'
export default {
	created() {
		this.activeRouter = this.$route.fullPath
		this.getType()
		this.getVehicle()
		this.getCampsite()
	},
	 watch: {
      $route(val,from) {
		  console.log(val);
		  
		  console.log('新'+val.fullPath);
		  console.log('旧'+from.fullPath);
		  this.activeRouter = val.fullPath || ''
      }
    },
	props: { productType: String },
	data() {
		return {
			activeRouter:{},
			tourList: [],
			vehicleList: [],
			campsiteList: []
		}
	},
	methods: {
		//旅游列表
		async getType() {
			const {
				data: { data }
			} = await axios.get('/api/uccn/app/unauth/tour/tagList')
			data.unshift({ id: '', name: '全部' })
			this.tourList = data
		},
		//房车租赁
		async getVehicle() {
			const {
				data: { data }
			} = await axios.get('/vehicle/cata/app/unauth/types')
			data.unshift({ id: '', name: '全部' })
			this.vehicleList = data
		},
		//房车营地
		async getCampsite() {
			const {
				data: { data }
			} = await axios.get('/api/campsite/campsiteTag/app/unauth/tags')
			data.unshift({ id: '', name: '全部' })
			this.campsiteList = data
		},
		//更新页面
		links(val) {
			this.$emit('fatherMethod',val);
		},
		rentLink(val){
			this.$emit('fatherMethod',val);
		},
		campsiteLink(val){
			this.$emit('fatherMethod',val);
		}
	}
}
</script>
<style>
.sidebar-list-a {
	padding: 15px 0;
}
.sidebar-list-a h2 {
	font-size: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eee;
}
.sidebar-list-a p {
	font-size: 16px;
	color: #333;
	margin: 20px 0;
	font-weight: bold;
}
.sidebar-list-a ul {
	padding-left: 0;
}
.sidebar-list-a ul li {
	margin-top: 15px;
}
.sidebar-list-a ul li a {
	display: block;
}
.sidebar-list-a ul li a:hover {
	color: #1bbb9f;
}
.activeList{
	color: #1bbb9f
}
</style>