<template>
	<div>
		<menu-modal @goCam="goCam"></menu-modal>
		<div class="main-container">
			<vehicle-banner
				:list="bannerList"
				:looptime="looptime"
				:width="width"
				:height="height"
				:background="background"
				:color="color"
				:fontSize="fontSize"
				@prev="prev"
				@next="next"
				@change="changeBanner"
				@click="bannerClick"
				class="mb-50"
			></vehicle-banner>

			<div class="wrap">
				<div class="bread-menu" style="margin-top: 20px;padding: 0">
					<nuxt-link to="/">首页></nuxt-link>
					<span>房车营地</span>
				</div>

				<div class="main-content">

          <div class="produc-list">
						<producList productType="1" @fatherMethod="fatherMethod"  ref="producFex"/>
					</div>
					<div style="width:882px">
						<div
							class="clearfix total-div"
							style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px"
						>
							共{{totalCount}}个房车营地
							<!-- <el-select
								style="width:150px;height:30px;float:right;margin:-8px 10px 10px 0"
								value-key="id"
								v-model="typeList"
								placeholder="营地类型"
								@change="chooseSelect()"
							>
								<el-option v-for="item in dataType" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select> -->
						</div>

						<h3 v-if="dataNull" style="margin:20px 0;background-color: #fff;padding:20px">暂无信息</h3>
						<ul class="campsiteDetail clearfix" v-if="!dataNull">
							<li v-for="(item,idx) in dataDetail" :key="idx">
								<nuxt-link :to="item.link" class="vehicle-item">
									<img :src="item.logo" alt style="width:256px;height:190px" />
									<h2 class="campsite-title"
									>{{ item.name }}</h2>
									<button class="buttonDetails">
										营地详情
										<img
											style="position: absolute;"
											src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
										/>
									</button>
								</nuxt-link>
							</li>
						</ul>
					</div>
				</div>

				<div class="pagination-container" style="text-align:right">
					<el-pagination
						@current-change="handleCurrentChange"
						:current-page.sync="listQuery.page"
						@size-change="handleSizeChange"
						:page-sizes="[9,18,24, 45]"
						:page-size="listQuery.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalCount"
					></el-pagination>
				</div>
			</div>
		</div>
		<go-top></go-top>
		<footer-modal></footer-modal>
	</div>
</template>

<script>
import axios from '../plugins/axios'
import menuModal from '../components/menu'
import footerModal from '../components/footer'
import vehicleBanner from '../components/vehicleBanner'
import GoTop from '../components/goTop'
import producList from '../components/productList'
export default {
	transition: 'bounce',
	components: {
		GoTop,
		menuModal,
		footerModal,
    vehicleBanner,
    producList
	},
	data() {
		return {
			typeList: '营地类型',
			showBanner: !0,
			looptime: 4000, // 循环时间
			typeId: '营地类型',
			dataType: [],
			totalCount: 0,
			dataDetail: [],
			width: 400,
			height: 200,
			background: 'red',
			color: '#fff',
			fontSize: '70px',
			listQuery: {
				type: '',
				pageNo: 1,
				pageSize: 9
			},
			store: '',
			dataNull: false
		}
	},
	created() {
		this.listQuery.type = this.$route.query.types
		this.getType()
		this.getAll()
	},
	mounted() {
		window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
	},
	methods: {
    fatherMethod(val) {
      this.listQuery.type = val
      console.log(val);
      
			this.getAll()
		},
		chooseSelect() {
			this.listQuery.type = this.typeList
			this.$router.push({
				path: '/campsite',
				query: { types: this.listQuery.type }
			})
			this.getAll()
		},
		goCam(e) {
			this.listQuery.type = e
			for (var i = 0; i < this.dataType.length; i++) {
				if (e == this.dataType[i].id) {
					this.typeList = this.dataType[i].name
				}
			}

			this.getAll()
			// this.typeList="营地类型";
		},
		handleCurrentChange(val) {
			this.listQuery.pageNo = val
			this.getAll()
		},
		handleSizeChange(val) {
			this.listQuery.pageSize = val
			this.listQuery.pageNo = 1
			this.getAll()
		},
		async getType() {
			const {
				data: { data }
			} = await axios.get('/api/campsite/campsiteTag/app/unauth/tags')
			data.unshift({ id: '', name: '全部' })
			this.dataType = data
			for (var i = 0; i < this.dataType.length; i++) {
				if (this.$route.query.types == this.dataType[i].id) {
					this.typeList = this.dataType[i].name
				}
			}
		},
		async getAll() {
			let {
				data: { data }
			} = await axios.get(
				`/api/uccn/app/unauth/campsite/shops?type=${this.listQuery.type}&pageNo=${this.listQuery.pageNo}&pageSize=${this.listQuery.pageSize}`
			)
			data.data.map(function(item) {
				item.link = encodeURI('/campsiteDetails/' + item.id)
				item.link = encodeURI(item.link)
			})
			if (!data.data.length == 0) {
				this.totalCount = data.totalCount
				this.dataDetail = data.data
				this.dataNull = false
			} else {
				this.totalCount = 0
				this.dataDetail = data.data
				this.dataNull = true
			}
		},
		// 点击下一页回调
		prev() {},
		// 点击下一页回调
		next() {},
		// 鼠标移入状态点回调
		changeBanner() {},
		bannerClick() {},
		mounted() {
			window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
		},
		scrollHandle: function(e) {
			//变量scrollTop是滚动条滚动时，距离顶部的距离
			var scrollTop =
				document.documentElement.scrollTop || document.body.scrollTop //变量windowHeight是可视区的高度
			var windowHeight =
				document.documentElement.clientHeight ||
				document.body.clientHeight //变量scrollHeight是滚动条的总高度
			var scrollHeight =
				document.documentElement.scrollHeight ||
				document.body.scrollHeight //滚动条到底部的条件
			if (scrollTop + windowHeight + 0.7 > scrollHeight) {
				//写后台加载数据的函数
				//          	      console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
				// this.listQuery.pageNo++;
				// this.getAll();
			}
		}
	},
	async asyncData() {
		const { data } = await axios.get(
			'/api/app/banner/app/unauth/findBannerlist?type=2&platform=1'
		)
		let cc = data.data
		let headData = await axios.get(
			'/api/uccn/seo/app/unauth/officialWebsite/4'
		)
		let head = headData.data.data
		return { bannerList: cc, headList: head }
	},
	head() {
		return {
			title: this.headList.title,
			meta: [
				{
					hid: 'keywords',
					name: 'keywords',
					content: this.headList.keywords
				},
				{
					hid: 'description',
					name: 'description',
					content: this.headList.description
				}
			]
		}
	}
}
</script>
<style scoped>
.campsite-title{
  font-size:20px;margin-top:22px;
   text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 52px;
}
.campsiteDetail li{
  width: 283px;
  margin-right: 17px;
}
.produc-list {
	background: #fff;
	width: 219px;
	text-align: center;
}
.main-content {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}
.clearfix:after {
	/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.wrap {
	padding: 0 0;
}
.campsiteDetail {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	/*justify-content: space-between;*/
	width: 1120px;
	flex-wrap: wrap;
}

.campsiteDetail li a {
	padding: 14px;
	margin-bottom: 20px;
	list-style: none;
	width: 100%;
	height: 372px;
	float: left;
	margin-right: 20px;
	background-color: #fff;
}
.campsiteDetail li:nth-child(3n) a {
	margin-right: 0;
}
.campsiteDetail li:nth-child(3n + 0) {
	margin-right: 0px;
}
.toDetail {
	font-size: 16px;
}

.buttonDetails {
	width: 130px; /* 宽度 */
	height: 35px; /* 高度 */
	border-width: 0px; /* 边框宽度 */
	background: #1bbb9f; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
  margin: 27px 14px 0px 126px;
}
</style>
