<template>
	<view class="bg">
		<view class="swipe-box">
			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots="true" indicator-color="rgba(255,255,255,.5)"
				indicator-active-color="#fff" @change="swiperChange">
				<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id">
					<view class="swiper-item">
						<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="top-box">
			<view class="top-price">
				<span>{{info.low_money / 100}}</span>
				参团价
			</view>
			<view class="top-title">{{info.title}}</view>
			<view class="top-subtitle">{{info.subtitle}}</view>
			<view class="top-tags">
				<view class="top-tag" v-for="(item,index) in info.goods_new_tag" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		
		<view class="scroll-all-box" id="menus" v-if="info">
			<view :class="'scroll-menus' + (fixed ? ' fixed-menus' : '')">
				<view :class="'scroll-menu-item' + (type == 1 ? ' active' : '')" @click="changeMenu(1)">产品详情</view>
				<view :class="'scroll-menu-item' + (type == 2 ? ' active' : '')" @click="changeMenu(2)">预定须知</view>
			</view>
			<view style="height: 85rpx" v-if="fixed"></view>
			<view class="info-box" id="box1">
				<view class="info-title">产品详情</view>
				<view class="info-content" v-html="formateRichText(info.special_content)"></view>
			</view>
			<view class="info-box" id="box2">
				<view class="info-title">预定须知</view>
				<view class="info-content" v-html="formateRichText(info.price_content)"></view>
			</view>
		</view>
		
		<footer class="flex-center">
			<view @click="order">立即购买</view>
		</footer>
	</view>
</template>

<script>
	const device = uni.getSystemInfoSync();
	const ratio = device.windowWidth / 750;
	export default {
		data() {
			return {
				id: null,
				swiperCurrent: 1,
				info: {list_images:''},
				top: 0,
				fixed: false,
				type: 0,
				down: false,
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getInfo();
			let rect = uni.getMenuButtonBoundingClientRect();
			this.top = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight;
		},
		onPageScroll(e){
			let query = uni.createSelectorQuery()
				query.select("#menus").boundingClientRect(res => {
			　　　　if(res.top < 0){
						this.fixed = true
					}else{
						this.fixed = false
					}
				}).exec()
				
				if (this.down) {
					return
				}else{
					this.down = true
					for(let i = 1; i < 3; i++) {
						query.select("#box" + i).boundingClientRect(res => {
							if(res.top < 0) {
								this.type = i
							}
						}).exec()
					}
					this.down = false
				}
		},
		methods: {
			// 去下单
			order() {
				uni.navigateTo({
					url: "/subPackages/line/order?id=" + this.info.id
				})
			},
			swiperChange (e) {
				this.swiperCurrent = e.detail.current+1
			},
			// 获取信息
			getInfo() {
				this.Post({goods_id: this.id},'/api/goods/getGoodDetail').then(res => {
					if (res.data.flag == 0) {
						uni.showToast({title: '商品不存在或已下架',icon: 'none'})
						setTimeout(() => {this.goBack()}, 2000)
					}
					res.data.goods_new_tag = (res.data.goods_new_tag ? res.data.goods_new_tag.split(',') : []).splice(0, 3);
					this.info = res.data;
				});
			},
			changeMenu(e) {
				this.down = true
			    let index = e;
				let that = this
			    const query = uni.createSelectorQuery(); //创建节点查询器
			    query.select('#box' + index).boundingClientRect(); //选择toViewid获取位置信息
			    query.selectViewport().scrollOffset(); //获取页面查询位置的
			    query.exec(function (res) {
			        let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.top;
			        uni.pageScrollTo({
			            scrollTop: scrollTop + 4,
			            duration: 0
			        });
			        that.type = index
					setTimeout(()=>{
						that.down = false
					},1000)
			    });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #FFFFFF;
		padding-bottom: 200rpx;
	}
	
	.swiper {
		height: 413rpx;
		position: relative;
	
		.swiper-item {
			width: 100%;
			height: 413rpx;
	
			.item-img {
				width: 750rpx;
				height: 413rpx;
			}
		}
	}
	
	.top-box {
		padding: 26rpx;
		border-bottom: 20rpx solid #F9F5F0;
		
		.top-price {
			font-weight: 500;
			font-size: 24rpx;
			color: #919191;
			
			span {
				font-weight: bold;
				font-size: 36rpx;
				color: #DC2525;
				margin-right: 12rpx;
			}
			span::before {
				font-size: 23rpx;
				font-weight: 500;
				content: '￥';
			}
			span::after {
				font-size: 23rpx;
				font-weight: 500;
				content: '/人';
			}
		}
		
		.top-title {
			font-weight: bold;
			font-size: 31rpx;
			color: #333333;
			margin-top: 20rpx;
		}
		
		.top-subtitle {
			font-weight: 500;
			font-size: 24rpx;
			color: #888888;
			margin-top: 20rpx;
		}
		
		.top-tags {
			display: flex;
			margin-top: 20rpx;
			
			.top-tag {
				padding: 0 10rpx;
				line-height: 35rpx;
				border-radius: 7rpx;
				border: 1rpx solid #96684F;
				font-weight: 500;
				font-size: 24rpx;
				color: #96684F;
				margin-right: 13rpx;
			}
		}
	}
	
	.scroll-all-box {
		margin: 24rpx 0;
	
		.scroll-menus {
		    padding: 0 26rpx;
		    display: flex;
		    justify-content: space-around;
		    align-items: center;
		    font-size: 29rpx;
		    color: #333;
		    height: 84rpx;
		    border-bottom: 1rpx solid #D8D8D8;
			
			.scroll-menu-item {
			    position: relative;
			    line-height: 84rpx;
			}
			
			.scroll-menu-item.active::after {
			    content: '1';
			    font-size: 0;
			    display: block;
			    position: absolute;
			    width: 53rpx;
			    height: 5rpx;
			    background: #96684F;
			    left: 50%;
			    margin-left: -26.5rpx;
			    bottom: 0rpx;
			}
		}
		
		.fixed-menus {
		    position: fixed;
			top: 80rpx;
		    left: 0;
		    right: 0;
		    background: white;
		    z-index: 1;
		}
		
		.info-box {
		    padding: 42rpx 26rpx 0;
			
			.info-title {
			    font-size: 33rpx;
			    font-weight: bold;
			    color: #333;
			}
			
			.info-content {
				width: 697rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 22rpx 14rpx;
				margin-top: 20rpx;
			}
		}
	}
	
	footer {
		position: fixed;
		width: 750rpx;
		height: 153rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25);
		left: 0;
		bottom: 0;
		
		view {
			width: 697rpx;
			line-height: 73rpx;
			text-align: center;
			background: #DC2525;
			border-radius: 11rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>