<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="/tour">房车旅行></nuxt-link>
					<span>{{detail.name}}</span>
				</div>
				<div
					class="clearfix"
					style="background-color:#fff;padding:40px 20px 40px 40px;width:1120px;height:536px"
				>
					<div style="float:left;width:544px;margin-right:10px">
						<div class="gallery-top-box" style="width:100%">
							<div class="swiper-container gallery-top" ref="mySwiper">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="(item,idx) in detail.pictureList" :key="idx">
										<img :src="item.cover" style="width:100%;height:374px" />
									</div>
								</div>
							</div>
							<div class="gallery-thumbs-box" style="width:554px">
								<div class="swiper-container gallery-thumbs" style="width:554px">
									<div class="swiper-wrapper swiper-wrapper-thu" style="width:554px">
										<div
											class="swiper-slide imgWidth"
											v-for="(item,index) in detail.pictureList"
											:key="index"
											@click="changeImgIndex(index,detail.pictureList.length)"
										>
											<img
												:src="item.cover"
												:class="preIndex==index?'active':''"
												alt
												style="width:106px;height:64px"
											/>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div style="float:left;width:495px">
						<h2 style="font-size:20px;font-weight:bold;padding-left:20px;">{{detail.name}}</h2>
						<div style="margin:21px 20px 91px 19px;padding:21px 0 21px 16px;background:#f6f6f6">
							<div style="display: flex">
								<h1 style="flex:2;font-size:14px;font-weight:400;color:#666">出发地</h1>
								<h1
									style="flex:8;font-size:14px;font-weight:400;color:#666"
								>{{detail.addressTo.provinceName}} {{detail.addressTo.cityName}} {{detail.addressTo.address}}</h1>
							</div>
							<div style="display: flex;margin:13px 0 16px 0">
								<h1 style="flex:2;font-size:14px;font-weight:400;color:#666">目的地</h1>
								<h1
									style="flex:8;font-size:14px;font-weight:400;color:#666;"
								>{{detail.addressGo.provinceName}} {{detail.addressGo.cityName}} {{detail.addressGo.address}}</h1>
							</div>
							<div style="font-size:14px;font-weight:400;color:#666;">
								最近出发日期
								<h5
									style="font-size:14px;font-weight:400;display:inline-block;color:#666;margin-left:9px"
								>{{detail.time.startTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekStart}} {{detail.addressTo.departTime | formatDate('hh:mm')}} ~ {{detail.time.endTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekEnd}}</h5>
							</div>
						</div>
						<div style class="clearfix">
							<button
								class="buttonDetails"
								@click="visiblePic()"
								style="float:left;margin:0 30px 0 20px"
							>预定出游</button>
							<div style="float:left" class="clearfix" v-if="visible">
								<div style="float:left;width:114px;margin-right:30px;text-align:center">
									<div style="background:#FFF5E6;border:2px solid #FFB74B">
										<img
											src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png"
											style="width: 90px;margin:12px 10px 8px 10px;"
										/>
										<div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">滴房车App</div>
									</div>
									<div style="margin-top:8px" class="scan-notice-c">
										<div style="font-size:12px">安卓用户微信扫码</div>
										<div style="font-size:12px">可马上下单</div>
										<!-- <h6 style="font-size:12px;font-weight:400">安卓用户微信扫码可马上下单</h6> -->
									</div>
								</div>

								<div style="float:left;width:114px;text-align:center">
									<div style="background:#FFF5E6;border:2px solid #FFB74B">
										<img src="../../assets/images/xxfczs.jpg" style="width: 90px;margin:12px 10px 8px 10px;" />
										<div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">欣新助手小程序</div>
									</div>
									<div style="margin-top:8px;" class="scan-notice-c">
										<div style="font-size:12px">微信扫码进入</div>
										<div style="font-size:12px">欣新房车助手可预订</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div
					class="clearfix"
					style="margin-top:40px;display: flex;justify-content: space-between;width: 1135px;"
				>
					<!-- 锚链接 -->
					<ul class="sidebar-list" :class="barFixed?'isSidebar':''">
						<li>
							<p></p>
							<p @click="goAnchor('1')">行程亮点</p>
						</li>
						<li :class="{isFex1:fex1}">
							<p></p>
							<p @click="goAnchor('2')">行车介绍</p>
						</li>
						<li :class="{isFex2:fex2}">
							<p></p>
							<p @click="goAnchor('3')">报名须知</p>
						</li>
					</ul>
					<div :class="barFixed?'empty':''" style="display:none"></div>
					<!-- 内容 -->
					<div style="float:left;width:682px;background-color:#fff;padding:31px 50px;" ref="fex1">
						<h3 style="font-size:16px;font-weight:bold;margin-bottom:20px">行程亮点</h3>
						<div v-html="detail.content"></div>
						<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold" ref="fex2">行程介绍</h3>
						<div v-html="detail.introduce"></div>
						<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold" ref="fex3">报名须知</h3>
						<div v-html="notice[0].value"></div>
					</div>

					<!-- 热门车型 -->
					<div
						id="fixContainer"
						class="hot-r-campsite"
						style="float:left;width:220px;background-color:#fff;text-align:center"
					>
						<div id="tourHotId" :class="barFixed?'isFixed':''">
							<h3
								style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:14px"
							>热门旅行</h3>
							<!--<div style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">-->
							<!--<h3 style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:16px">热门旅行</h3>-->
							<div
								v-for="(item,index) in hotList"
								:key="index"
								style="width:100%;padding:25px 25px 0 25px"
							>
								<img :src="item.cover" alt style="width:161px;height:116px" />
								<h5
									style="overflow: hidden;text-overflow:ellipsis;margin:21px 0 30px 0;font-weight:400;font-size:16px;white-space: nowrap;"
								>{{item.name}}</h5>
								<nuxt-link :to="item.link">
									<button class="buttonDetail" style="font-size:14px;margin-bottom:25px">旅游详情</button>
								</nuxt-link>
							</div>
						</div>
					</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'
// import { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData';
export default {
	transition: 'bounce',
	components: {
		GoTop,
		menuModal,
		footerModal
	},
	data() {
		return {
			lengthPic: 0,
			preIndex: 0, //当前轮播选中图
			visible: false,
			barFixed: false,
			fex1: false,
			fex2: false
		}
	},
	created() {
		if (typeof window !== 'undefined') {
			window.addEventListener('scroll', this.handleScroll)
			window.addEventListener('scroll', this.slideScroll)
		}
	},
	validate({ params }) {
		console.log(params.id)
		return !isNaN(+params.id)
	},
	async asyncData({ env, params, route, error }) {
		const { data } = await axios.get(
			env.host + '/api/uccn/app/unauth/tour/detail/' + params.id
		)
		let user = data.data
		// data.data.content = data.data.content.replace(/<img/g,"<img style='width:100%'");
		// data.data.modelParam =  JSON.parse(data.data.modelParam );
		let pic = data.data.bannerDTOS
		user.pictureList = pic
		user.pictureNum = pic.length
		let startAddress = data.data.tourDepartVo
		for (var i = 0; i < startAddress.length; i++) {
			if (startAddress[i].type == 0) {
				console.log(startAddress[i])
				user.addressTo = startAddress[i]
			}
			if (startAddress[i].type == 2) {
				console.log(startAddress[i])
				user.addressGo = startAddress[i]
			}
		}
		let tourTimeVo = data.data.tourDepartTimeVo
		for (var i = 0; i < tourTimeVo.length; i++) {
			if (tourTimeVo[i].overdue == 0) {
				console.log(tourTimeVo[i])
				user.time = tourTimeVo[i]
				break
			} else {
				user.time = tourTimeVo[i]
			}
		}
		var weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
		user.time.weekStart = weekday[user.time.startWeek]
		user.time.weekEnd = weekday[user.time.endWeek]
		// console.log(startAddress);

		console.log(pic)

		console.log(user)
		if (!user) {
			return error({ message: 'User not found', statusCode: 404 })
		}
		let tempBannerData = await axios.get(
			'/api/uccn/random/list/app/unauth/get?type=2'
		)
		let hot = tempBannerData.data.data
		hot.map(function(item) {
			item.link = encodeURI(
				'/tourDetails/' + item.id + '?name=' + item.name
			)
			item.link = encodeURI(item.link)
		})
		console.log(hot)

		let noticeData = await axios.get(
			'/api/app/cofig/app/unauth/types?types=14'
		)
		let notice = noticeData.data.data
		return { detail: user, hotList: hot, notice: notice }
	},
	methods: {
		goAnchor(val) {
			this.$nextTick(function() {
				let fex1 = this.$refs.fex1
				let fex2 = this.$refs.fex2
				let fex3 = this.$refs.fex3
				if (val == 1) {
					window.scrollTo(0, fex1.offsetTop-200)
				} else if (val == 2) {
					window.scrollTo(0, fex2.offsetTop-200)
				} else if (val == 3) {
					window.scrollTo(0, fex3.offsetTop-200)
				}
			})
		},
		slideScroll() {
			this.$nextTick(function() {
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop

				let fex2 = this.$refs.fex2 || ''
				let fex3 = this.$refs.fex3 || ''
				let fex1 = this.$refs.fex1 || ''

				scrollTop+210 > fex2.offsetTop
					? (this.fex1 = true)
					: (this.fex1 = false)
				scrollTop+210 > fex3.offsetTop
					? (this.fex2 = true)
					: (this.fex2 = false)
			})
		},
		changeImgIndex(index, length) {
			this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true)
			this.lengthPic = length
			console.log(this.lengthPic)
		},
		visiblePic() {
			this.visible = !this.visible
		},
		handleScroll: function() {
			let scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop
			let path = $nuxt.$route.path
			if (path.indexOf('/tourDetail') != -1) {
				var menuTop = document.querySelector('#tourHotId').offsetTop
				//滑动到指定位置菜单吸顶
				if (scrollTop > menuTop - 120) {
					this.barFixed = true
				}
				let fixContainer = document.querySelector('#fixContainer')
					.offsetTop
				if (scrollTop < fixContainer - 120) {
					this.barFixed = false
					//          this.tabIndex = 0;
				}
			}
		}
	},
	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,
			autoplay: {
				delay: 2500,
				disableOnInteraction: false
			},
			on: {
				slideChangeTransitionEnd: function() {
					t.preIndex = this.activeIndex - 1
					if (t.preIndex == t.detail.pictureNum) {
						t.preIndex = 0
					}
					// console.log(this.activeIndex);
				}
			},
			thumbs: {
				swiper: galleryThumbs
			}
		})
	},
	head() {
		return {
			title: this.detail.name,
			meta: [
				{
					hid: 'keywords',
					name: 'keywords',
					content: this.detail.keywords
				},
				{
					hid: 'description',
					name: 'description',
					content: this.detail.description
				}
			]
		}
	}
}
</script>

<style scoped>
.empty {
	width: 190px;
	display: block !important;
}
.sidebar-list {
	width: 190px;
	background: #fff;
	/* margin: 20px 0; */
	padding: 20px;
	height: 300px;
	display: inline-block;
}
.sidebar-list li {
	position: relative;
	margin-bottom: 56px;
}

.sidebar-list li p:nth-child(1) {
	width: 15px;
	height: 15px;
	background: #999;
	position: relative;
	border-radius: 50%;
	display: inline-block;
}
.sidebar-list li p:nth-child(2) {
	display: inline-block;
	margin-left: 15px;
}
.sidebar-list li p:nth-child(1)::after {
	content: '';
	position: absolute;
	width: 63px;
	height: 1px;
	background: #999;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	left: -24px;
	top: -31px;
}
.sidebar-list li:first-child p:nth-child(1)::after {
	width: 0;
}
.sidebar-list li:nth-child(1) p {
	color: #1bbb9f;
}
.sidebar-list li:nth-child(1) p:nth-child(1) {
	background: #1bbb9f;
}
.isFex1 p,
.isFex2 p {
	color: #1bbb9f;
}
.isFex1 p:nth-child(1),
.isFex2 p:nth-child(1) {
	background: #1bbb9f !important;
}
.isFex1 p:nth-child(1)::after,
.isFex2 p:nth-child(1)::after {
	background: #1bbb9f !important;
}
.isFixed {
	position: fixed;
	top: 120px;
	width: 220px;
	background: #fff;
}
.isSidebar {
	position: fixed;
	top: 172px;
	width: 190px;
	background: #fff;
}
.clearfix:after {
	/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.scan-notice-c {
	color: #666;
	font-size: 12px;
}
.clearfix {
	*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.gallery-top img {
	width: 100%;
}
.swiper-container {
	width: 100%;
}
.swiper-wrapper-thu {
	/*max-width: 293px;*/
	margin: 0 !important;
}
.swiper-wrapper-thu img {
	width: 100%;
	border: 2px solid #fff;
}
.swiper-wrapper-thu img.active {
	border: 3px solid #1bbb9f;
	padding: 0;
}
.imgWidth {
	height: 64px;
	width: 100px !important;
}
.buttonDetails {
	width: 180px;
	font-size: 20px;
	height: 60px; /* 高度 */
	border-width: 0px; /* 边框宽度 */
	background: #1bbb9f; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
}
.buttonDetail {
	width: 116px;
	height: 34px; /* 高度 */
	border: 1px solid #1bbb9f;
	background-color: #fff;
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: #1bbb9f; /* 字体颜色 */
}
.buttonDetail:hover {
	color: #fff;
	background: #1bbb9f;
}
.tabContent {
	padding: 0;
	margin: 0;
	list-style: none;
}
.tabContent li {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 32%;
	float: left;
}
.typeUl {
	padding: 0;
	margin: 0;
	list-style: none;
}
</style>



