<template>
	<div>
		<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'>欣新活动</nuxt-link>
							</li>
							<li>
								<nuxt-link to='/activity' style="color:#1bbb9f">新闻动态</nuxt-link>
							</li>
						</ul>
					</div>

					<div style="width:917px">
						<div class="total-div">共{{totalCount}}篇新闻资讯</div>
						<ul class="campsiteDetail">
							<li v-for="item in dataDetail" :key="item.id" class="new-item">
								<nuxt-link :to="'/newsList/'+item.id">
									<img
										:src="item.coverImage"
										:alt="item.alt"
										style="width:270px !important;height: 172px !important"
									/>
									<div style="margin-left:20px;width:802px" class="active-r">
										<h2 class="ellipsis2">{{item.title }}</h2>
										<div class="ellipsis2 epitome">导语：{{item.epitome}}</div>
										<div class="epitome">{{item.addTime}}</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'
export default {
	transition: 'bounce',
	components: {
		menuModal,
		footerModal,
		vehicleBanner,
		GoTop
	},
	data() {
		return {
			totalCount: 0,
			dataDetail: [],
			bannerList: [], //banner列表
			listQuery: {
				type: '',
				page: 1,
				limit: 10
			},
			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=5&platform=1'
			)
			let banner = tempBannerData.data.data
			this.bannerList = banner
		},
		chooseSelect(e) {
			console.log(e.target.value)
			this.listQuery.type = e.target.value
			this.getAll()
		},
		async getAll() {
			let {
				data: { data }
			} = await axios.get(
				`/api/uccn/article/app/unauth/list?type=1&page=${this.listQuery.page}&limit=${this.listQuery.limit}`
			)
			// console.log(data);
			this.totalCount = data.total
			data.list.map(function(item) {
				item.addTime = item.addTime.substring(0, 10)
			})
			this.dataDetail = data.list
		}
	},
	async asyncData() {
		let headData = await axios.get(
			'/api/uccn/seo/app/unauth/officialWebsite/6'
		)
		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;
}
.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>
