<template>
	<div>
		<menu-modal></menu-modal>
		<div class="main-container">
			<!-- 面包屑 -->
			<div class="wrap">
				<div class="bread-menu" style="margin-top: 20px;">
					<nuxt-link to="/">首页></nuxt-link>
					<nuxt-link to="/news">新闻动态></nuxt-link>
					<span>{{detail.title}}</span>
				</div>
			</div>
			<!-- 主体内容 -->
			<div class="main-content">
				<div class="content" style="width:806px;display:inline-block">
					<div style="width: 100%;padding-top: 20px;">
						<h3 class="tc news-title">{{detail.title}}</h3>
						<div class="content-detail" v-html="detail.text"></div>
					</div>
				</div>

				<div id="fixContainer" style="float:left;width:300px;background-color:#fff;text-align:center">
					<div
						style="width: 300px;background:#fff;text-align:center"
						id="campsiteHotId"
						:class="barFixed?'isFixed':''"
					>
						<div class="more-container new-cc">
							<div>
								<div>推荐咨讯</div>
							</div>
						</div>
						<div class="content-news" v-for="item in hotList" :key="item.id">
							<nuxt-link :to="'/newsList/'+item.id">
								<img :src="item.coverImage" style="width:190px;height: 120px;display:block;margin:0 auto;" />
								<div class="c-title">{{item.title}}</div>
							</nuxt-link>
						</div>

						<nuxt-link to="/news" class="look-more">
							MORE
							<i class="iconfont iconsingle_arrow"></i>
						</nuxt-link>
					</div>
				</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 Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import GoTop from '../../components/goTop'
export default {
	transition: 'bounce',
	components: {
		GoTop,
		menuModal,
		footerModal
	},
	data() {
		return {
			barFixed: false,
			lengthPic: 0,
			preIndex: 0 //当前轮播选中图
		}
	},
	created() {
		if (typeof window !== 'undefined') {
			window.addEventListener('scroll', this.handleScroll)
		}
	},
	validate({ params }) {
		console.log(params.id)
		return !isNaN(+params.id)
	},
	async asyncData({ env, params, error }) {
		const { data } = await axios.get(
			'/api/uccn/article/app/unauth/one?id=' + params.id + '&urlType=1'
		)
		let detail = data.data
		let tempBannerData = await axios.get(
			'/api/uccn/article/app/unauth/three?type=1&number=2&id=' + params.id
		)
		let hot = tempBannerData.data.data
		detail.text = detail.text.replace(/<img/g, "<img style='width:100%'")
		detail.text = detail.text.replace(
			/font-size: 18px !important;/g,
			'font-size: 14px !important;color:#666;line-height: normal !important;'
		)
		return { detail: detail, hotList: hot }
	},
	methods: {
		changeImgIndex(index, length) {
			this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true)
			this.lengthPic = length
			console.log(this.lengthPic)
		},
		handleScroll: function() {
			let scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop
			this.$nextTick(function() {
				var menuTop = document.querySelector('#campsiteHotId')
				console.log(menuTop.offsetTop)

				//滑动到指定位置菜单吸顶
				if (scrollTop > menuTop.offsetTop - 120) {
					this.barFixed = true
				}
				let fixContainer = document.querySelector('#fixContainer')
				if (scrollTop < fixContainer.offsetTop - 120) {
					this.barFixed = false
				}
			})
		}
	},
	mounted() {
		let t = this
		let galleryThumbs = new Swiper('.gallery-thumbs', {
			spaceBetween: 10,
			slidesPerView: 5,
			freeMode: true,
			watchSlidesVisibility: true,
			watchSlidesProgress: true
		})
		let galleryTop = new Swiper('.gallery-top', {
			spaceBetween: 10,
			loop: true,
			on: {
				slideChangeTransitionEnd: function() {
					t.preIndex = this.activeIndex - 1
					if (t.preIndex == 5) {
						t.preIndex = 0
					}
					console.log(this.activeIndex)
				}
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
			thumbs: {
				swiper: galleryThumbs
			}
		})
	},
	head() {
		return {
			title: this.detail.tagTitle,
			meta: [
				{
					hid: 'keywords',
					name: 'keywords',
					content: this.detail.keywords
				},
				{
					hid: 'description',
					name: 'description',
					content: this.detail.description
				}
			]
		}
	}
}
</script>
<style  scoped>
.isFixed {
	position: fixed;
	top: 120px;
	width: 220px;
	background: #fff;
}
.look-more {
	border: 2px solid #bbb;
	color: #bbb;
	display: inline-block;
	padding: 8px 30px;
	transition: all 0.2s linear;
}
.look-more:hover {
	border: 2px solid #1bbb9f;
	background: #1bbb9f;
	color: #fff;
}
.main-content {
	width: 1120px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.r-content {
	margin-left: 20px;
}
.r-content p {
	padding: 5px 0;
}
.is-fixed {
	position: fixed;
	width: 1200px;
	background: #fff;
	border-bottom: 10px solid #ccc;
	margin-left: -30px;
	padding-left: 0;
	top: 90px;
}
.news-title {
	font-size: 20px;
	color: #333;
	margin-bottom: 21px;
}
.ep-hot,
.ep-time {
	font-size: 14px;
	color: #666;
	margin-top: 20px;
}
.new-cc {
	background: #fff;
	border-bottom: 1px solid rgb(242, 242, 242);
	padding: 20px;
	position: relative;
}
.content {
	display: flex;
	justify-content: space-between;
	background: #fff;
}
.content-t {
	border-bottom: 5px solid #1bbb9f;
	width: 100px;
	text-align: center;
	padding: 10px;
	font-weight: normal;
}
.swiper-container {
	height: auto;
}
.gallery-top img {
	width: 100%;
}
.content-detail {
	padding: 20px 0;
	width: 100%;
}
.c-title {
	color: #333;
	font-size: 14px;
	width: 198px;
	margin: 20px auto;
	text-align: left;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.content-news {
	text-align: center;
	margin-bottom: 50px;
}
.content-news a {
	/* display: flex; */
	color: #333;
}
.swiper-wrapper-thu {
	margin: 0 !important;
}
.swiper-wrapper-thu img {
	width: 100%;
	border: 2px solid #fff;
}
.swiper-wrapper-thu img.active {
	border: 2px solid #1bbb9f;
	padding: 5px;
}
.buttonDetails {
	width: 156px; /* 宽度 */
	padding: 10px 0;
	background: #1bbb9f; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: #fff; /* 字体颜色 */
	text-align: center;
}
.content-r-link {
	margin-left: 3%;
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* img{
  border: 1px solid red !important;
} */
</style>
