<template>
	<div>
		<menu-modal @goVe="goVe"></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" style="background: #f1f1f1;">
				<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>
						<div class="total-div">
							共{{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="dataDetail == ''"
							style="background-color: #fff;padding:20px;width:882px;height:100px;"
						>暂无信息</h3>
						<ul v-else class="campsiteDetail clearfix" style="width:882px">
							<li v-for="item in dataDetail" :key="item.id" class="vehicle-item">
								<nuxt-link :to="item.link" class="flex-aic">
									<img class="v-img-cover" :src="item.coverPic" alt="房车租赁" />
									<div style="margin-left: 20px;">
										<h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2>
										<div class="vehicle-desc">
											<span>{{item.intro}}</span>
										</div>
										<div class="flex-aic">
											<span
												class="flex-aic config"
												v-for="(iitem,iindex) in item.uccnCataList"
												:key="iitem.id"
											>
												<img
													style="margin-right: 5px;"
													v-if="iindex==0"
													src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg=="
												/>
												<img
													style="margin-right: 5px;"
													v-if="iindex==1"
													src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII="
												/>
												<img
													style="margin-right: 5px;"
													v-if="iindex==2"
													src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC"
												/>
												{{iitem.name}}
											</span>
											<span class="more-set">+更多配置</span>
										</div>
									</div>
									<nuxt-link :to="item.link" class="flex-aic">
										<button class="buttonDetails">
											租车详情
											<img
												style="position: absolute;"
												src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
											/>
										</button>
									</nuxt-link>
								</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 class="right">
					<nuxt-child :key="$route.params.id" />
				</div>
			</div>
		</div>
		<go-top></go-top>
		<footer-modal></footer-modal>
	</div>
</template>

<script>
import axios from '../plugins/axios'
import GoTop from '../components/goTop'

import menuModal from '../components/menu'
import footerModal from '../components/footer'
import vehicleBanner from '../components/vehicleBanner'
import producList from '../components/productList'
export default {
	transition: 'bounce',
	components: {
		menuModal,
		footerModal,
		vehicleBanner,
		GoTop,
		producList
	},
	data() {
		return {
			// headList:{},
			typeList: '车型',
			dataType: [],
			totalCount: 0,
			dataDetail: [],
			bannerList: [], //车型banner列表
			listQuery: {
				type: '',
				page: 1,
				limit: 10
			},
			store: '',
			curId: 0,
			items1: {},
			curId1: 0,
			looptime: 4000, // 循环时间
			width: 400,
			height: 200,
			background: 'red',
			color: '#fff',
			fontSize: '70px'
		}
	},
	created() {
		this.listQuery.type = this.$route.query.types
		this.getType()
		this.getAll()
		this.getBanner()
		// this.getHead()
	},
	mounted() {
		window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
	},
	methods: {
		fatherMethod(val) {
			this.listQuery.type = val
			this.getAll()
		},
		goVe(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.page = val
			this.getAll()
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.listQuery.page = 1
			this.getAll()
		},
		// 点击下一页回调
		prev() {},
		// 点击下一页回调
		next() {},
		// 鼠标移入状态点回调
		changeBanner() {},
		bannerClick() {},
		/**
		 * 获取车型列表页banner
		 */
		async getBanner() {
			//车型banner 0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
			let tempBannerData = await axios.get(
				'/api/app/banner/app/unauth/findBannerlist?type=3&platform=1'
			)
			let banner = tempBannerData.data.data
			this.bannerList = banner
		},
		chooseSelect() {
			this.listQuery.type = this.typeList
			this.$router.push({
				path: '/vehicle',
				query: { types: this.listQuery.type }
			})
			this.getAll()
		},
		async getType() {
			const {
				data: { data }
			} = await axios.get('/vehicle/cata/app/unauth/types')
			data.unshift({ id: '', name: '全部' })
			this.dataType = data
			this.loading = false
			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/vehicleModel/app/unauth/findVehicleModelPage?page=${this.listQuery.page}&limit=${this.listQuery.limit}&vehicleType=${this.listQuery.type}`
			)
			this.totalCount = data.totalCount
			data.data.map(function(item) {
				item.link = encodeURI(
					'/vehicleList/' + item.id + '?name=' + item.name
				)
				item.link = encodeURI(item.link)
				item.pictureList = item.picture.split(',')
				item.coverPic = item.coverPic
					? item.coverPic
					: item.pictureList.length > 0
					? item.pictureList[0]
					: ''
			})
			this.dataDetail = data.data
			// this.dataDetail = this.dataDetail.push(data.data);
		},
		mounted() {
			window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
		}
	},
	async asyncData() {
		const { data } = await axios.get(
			'/api/uccn/seo/app/unauth/officialWebsite/2'
		)
		let cc = data.data
		return { headList: cc }
	},
	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>
.vehicle-desc {
	width: 358px;
	margin-right: 143px;
}
.vehicle-desc span {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.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执行，其他浏览器不执行*/
}
.more-set:hover {
	border: 1px solid #1bbb9f;
	color: #1bbb9f;
}
.more-set {
	border: 1px solid #999;
	padding: 3px 10px;
	color: #999;
	font-size: 12px;
	cursor: pointer;
}
.banner {
	/* background-color: #fff; */
	text-align: center;
}
.v-img-cover {
	width: 190px;
	height: 122px;
}

.banner h2 {
	font-size: 20px;
	font-weight: 700;
	padding-top: 40px;
}

.banner h3 {
	font-size: 16px;
	padding-top: 20px;
	font-weight: 400;
	padding-bottom: 40px;
}

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

.campsiteDetail li {
	list-style: none;
	display: flex;
}

.toDetail {
	font-size: 16px;
}

.buttonDetails {
	width: 116px;
	height: 34px;
	border-width: 0px;
	background: #1bbb9f;
	cursor: pointer;
	outline: none;
	font-family: Microsoft YaHei;
	color: white;
	font-size: 14px;
	padding-right: 15px;
}
</style>
