<template>
	<div>
		<menu-modal v-on:goTour="goTour"></menu-modal>
		<div class="main-container">
			<div>
				<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>
			<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" :class='{broadside:isBroadside}'> -->
					<div class="produc-list">
						<producList productType="1" @fatherMethod="fatherMethod" ref="producFex" />
					</div>
					<!-- <div v-if="isBroadside" style="width:219px;display:inline-block;height:996px;border:1px solid red"></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="background-color: #fff;padding:20px;width:882px;height:100px;">暂无信息</h3>
						<ul class="campsiteDetail" v-if="!dataNull" style="width:882px">
							<li class="clearfix vehicle-item" v-for="(item,index) in dataDetail" :key="index">
								<div style="float:left">
									<img :src="item.cover" alt style="width:225px;height:172px" />
								</div>
								<nuxt-link :to="item.link" class="flex-aic">
									<div style="float:left;padding-top:10px;width:850px;color:#333">
										<h2 style="font-size: 20px;font-weight:400;margin:0 0 18px 6px">{{item.name}}</h2>
										<h6 style="font-size: 14px;font-weight:400;margin:0 0 54px 14px">{{item.describe}}</h6>
										<button class="buttonDetails">
											旅行详情
											<img
												style="position: absolute;"
												src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
											/>
										</button>
									</div>
								</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="[10,20,30, 50]"
						:page-size="listQuery.limit"
						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
	},
	created() {
		// if (typeof window !== 'undefined') {
		// 	window.addEventListener('scroll', this.slideScroll)
		// }
		this.listQuery.tagId = this.$route.query.tagIds
		this.getType()
		this.getAll()
	},
	data() {
		return {
			isBroadside: false,
			typeList: '旅行类型',
			showBanner: !0,
			looptime: 4000, // 循环时间
			typeId: '营地类型',
			dataType: [],
			totalCount: 0,
			dataDetail: [],
			width: 400,
			height: 200,
			background: 'red',
			color: '#fff',
			fontSize: '70px',
			listQuery: {
				tagId: '',
				page: 1,
				limit: 10
			},
			store: '',
			dataNull: false
		}
	},
	methods: {
		//侧边栏悬浮吸顶
		// slideScroll() {
		// 	this.$nextTick(function() {
		// 		let producFex = this.$refs.producFex || '';
		// 		let scrollTop =
		// 			window.pageYOffset ||
		// 			document.documentElement.scrollTop ||
		// 			document.body.scrollTop
		// 		console.log(scrollTop);
		// 		scrollTop > 300 ? this.isBroadside = true : this.isBroadside = false

		// 	})
		// },
		fatherMethod(val) {
			this.listQuery.tagId = val
			this.getAll()
		},
		goTour(e) {
			this.listQuery.tagId = e
			for (var i = 0; i < this.dataType.length; i++) {
				if (e == this.dataType[i].id) {
					this.typeList = this.dataType[i].name
				}
			}
			// console.log(this.dataType);

			// this.typeList="旅行类型"
			this.getAll()
		},
		chooseSelect() {
			this.listQuery.tagId = this.typeList
			this.$router.push({
				path: '/tour',
				query: { tagIds: this.listQuery.tagId }
			})
			this.getAll()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getAll()
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.listQuery.page = 1
			this.getAll()
		},
		choose(e) {
			this.listQuery.tagId = e.target.value
			this.getAll()
		},
		async getType() {
			const {
				data: { data }
			} = await axios.get('/api/uccn/app/unauth/tour/tagList')
			data.unshift({ id: '', name: '全部' })
			this.dataType = data
			this.loading = false
			for (var i = 0; i < this.dataType.length; i++) {
				if (this.$route.query.tagIds == this.dataType[i].id) {
					this.typeList = this.dataType[i].name
				}
			}
		},
		async getAll() {
			let {
				data: { data }
			} = await axios.get(
				`/api/uccn/app/unauth/tour/getGoodList?tagId=${this.listQuery.tagId}&page=${this.listQuery.page}&limit=${this.listQuery.limit}`
			)
			data.data.map(function(item) {
				item.link = encodeURI('/tourDetails/' + 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
			}
			scrollTo(0, 0)
		},
		// 点击下一页回调
		prev() {},
		// 点击下一页回调
		next() {},
		// 鼠标移入状态点回调
		changeBanner() {},
		bannerClick() {}
	},
	head() {
		return {
			title: this.headList.title,
			meta: [
				{
					hid: 'keywords',
					name: 'keywords',
					content: this.headList.keywords
				},
				{
					hid: 'description',
					name: 'description',
					content: this.headList.description
				}
			]
		}
	},
	async asyncData() {
		const { data } = await axios.get(
			'/api/app/banner/app/unauth/findBannerlist?type=1&platform=1'
		)
		let cc = data.data
		let headData = await axios.get(
			'/api/uccn/seo/app/unauth/officialWebsite/3'
		)
		let head = headData.data.data
		return { bannerList: cc, headList: head }
	}
}
</script>

<style scoped>
.broadside {
	position: fixed;
	top: 120px;
}
.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执行，其他浏览器不执行*/
}
.selectDiv {
	float: right;
	width: 145px;
	height: 35px;
	border-radius: 5px;
	margin: 8px 0;
	box-shadow: 0 0 5px #ccc;
}
.selectDiv select {
	border: none;
	outline: none;
	width: 100%;
	height: 35px;
	line-height: 35px;
	padding-left: 30px;
	/* appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; */
}

.campsiteDetail {
	padding: 0;
	margin: 0;
	list-style: none;
}

.campsiteDetail li {
	padding: 14px;
	margin-bottom: 20px;
	list-style: none;
	height: 200px;
	/* width: 1121px; */
	background-color: #fff;
}

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