<template>
	<div class="scroll_content">
		<menu-modal></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="journalism">
						<h3>新闻资讯</h3>
						<ul>
							<li>
								<nuxt-link to="/news" style="color:#1bbb9f">欣新活动</nuxt-link>
							</li>
							<li>
								<nuxt-link to="/activity">新闻动态</nuxt-link>
							</li>
						</ul>
					</div>
					<div style="width:917px">
						<!-- <div class="total-div">共{{totalCount}}个活动</div> -->
						<div class="total-div">
							<news />
						</div>
						<ul class="campsiteDetail clearfix">
							<li v-for="item in dataDetail" :key="item.id" class="activity-item">
								<nuxt-link :to="'/activityList/'+item.id">
									<img :src="item.banner" alt style="width:438px;height: 243px;" />
									<div style="margin-left:20px" class="active-r">
										<h2 class="ellipsis2">{{item.title }}</h2>
										<div
											class="activity-time"
										>{{item.startTime | formatDate('yyyy-MM-dd hh:mm')}}~{{item.endTime | formatDate('yyyy-MM-dd hh:mm')}}</div>
										<div class="ellipsis2 activity-addr">
											<img
												src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY3NjhDRTNDQTA4MTFFOUJDNEZGREQ4NkYzODA4MTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY3NjhDRTJDQTA4MTFFOUJDNEZGREQ4NkYzODA4MTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmVjOTJkZGFkLWZlMWUtODE0Zi05NDNmLTQwNjFjZTI4MjZhMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7vvm3YAAABgklEQVR42qyUsUvDQBSHTdEapSBS0YJLBnURp4CTiwgKEhQKRbq4iosoTi62mZ0cqiBODiqCTjEgRdwcgn+AqLub0EXEivE7yHAeuTNCDz4eL/fe7+5e7p0Vx3FXJ0e37/upE57njWK2YBkc+IZnuIT9IAje0vJyGrEq5gm2YUwsDHmYhF14IWY+kyCBK5hT6DecbBCuiZ01ChIwhDnOWi44I6dg2uEmFJRvRzANM3ClzI3AurqKPJYU/4Tir0knuMc0YU6KKcOeTnBC8c9lB/EY0QtFcKpWq9k6wR7FL6XUbljx+7h6H7oavir+DjsqSUcWJ9gw5ag7vIVVyR+HR4RCbC8sgq3kNE1/uZFyxAGoJsW3U+YbWkGKHmEO/9G6B+Q8/NV64i6GGcTCpNfNrceKn5gK3BnExFwliTULcqfyrut+FYvFskZUfPMQe8/62rQFjuO0RCJE0lxkEhPD4oH9dZm5pG3lwRB/+SZxFxBrmQpr1ev1jr7YObkPOzF+BBgAae5of8BDmoUAAAAASUVORK5CYII="
												alt="欣新房车，让生活更美好"
											/>
											{{item.province}}{{item.city}}{{item.town}}{{item.address}}
										</div>
									</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 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 menuModal from '../components/menu'
import footerModal from '../components/footer'
import vehicleBanner from '../components/vehicleBanner'
import GoTop from '../components/goTop'
import news from '../components/news'
export default {
	transition: 'bounce',
	components: {
		GoTop,
		menuModal,
		footerModal,
		vehicleBanner,
		news
	},
	data() {
		return {
			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.getAll()
		this.getBanner()
	},
	mounted() {
		window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
	},
	methods: {
		// 点击下一页回调
		prev() {},
		// 点击下一页回调
		next() {},
		// 鼠标移入状态点回调
		changeBanner() {},
		bannerClick() {},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getAll()
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.listQuery.page = 1
			this.getAll()
		},
		/**
		 * 获取车型列表页banner
		 */
		async getBanner() {
			//活动banner 0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
			let tempBannerData = await axios.get(
				'/api/app/banner/app/unauth/findBannerlist?type=4&platform=1'
			)
			let banner = tempBannerData.data.data
			this.bannerList = banner
		},
		chooseSelect(e) {
			this.listQuery.type = e.target.value
			this.getAll()
		},
		async getAll() {
			let {
				data: { data }
			} = await axios.get(
				`/api/uccn/summitActivity/app/unauth/list?page=${this.listQuery.page}&limit=${this.listQuery.limit}`
			)
			// console.log(data);
			this.totalCount = data.totalCount
			this.dataDetail = data.data
		}
	},
	async asyncData() {
		let headData = await axios.get(
			'/api/uccn/seo/app/unauth/officialWebsite/5'
		)
		let head = headData.data.data
		return { 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>
.main-content {
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	margin-top: 30px;
}
.journalism {
	width: 190px;
	background: #fff;
	padding: 15px 0;
	text-align: center;
	height: 225px;
}
.journalism h3 {
	font-size: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eee;
	color: #333;
	font-weight: normal;
}
.journalism ul {
	margin: 40px 0;
	padding: 0;
}
.journalism ul li {
	margin-bottom: 40px;
}
.journalism ul li a:hover {
	color: #1bbb9f;
}
.active-r {
	color: #333;
}
.clearfix:after {
	/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.activity-time,
.activity-addr {
	color: #666;
	font-size: 14px;
	margin: 20px 0;
	display: flex;
	align-items: center;
}
.clearfix {
	*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.banner {
	text-align: center;
}

.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 a {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	text-decoration: none;
}

.toDetail {
	font-size: 16px;
}

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