<template>
	<view class="bg" v-if="detail">
		<swiper class="top-banner" :circular="true" :interval="6000" :duration="800" :indicator-dots="true"
			:autoplay="true" indicator-active-color="#fff">
			<swiper-item v-for="(item, index) in detail.listimg" :key="index">
				<image class="top-banner" :src="showImg(item)" mode="aspectFill" lazy-load="true"></image>
			</swiper-item>
		</swiper>

		<view class="top-box">
			<view class="price">{{detail.price / 100}}</view>
			<view class="title">{{detail.title}}</view>
			<view class="subtitle">{{detail.subtitle}}</view>
			<view class="tags" v-if="detail.display_tags">
				<view class="tag" v-for="(item,index) in detail.display_tags.split(',').slice(0,3)" :key="index">
					{{item}}
				</view>
			</view>
		</view>

		<view class="scroll-all-box" id="menus">
			<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 :class="'scroll-menu-item' + (type == 3 ? ' active' : '')" @click="changeMenu(3)">退改说明</view>
				<view :class="'scroll-menu-item' + (type == 4 ? ' active' : '')" @click="changeMenu(4)">费用说明</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(detail.content)"></view>
			</view>
			<view class="info-box" id="box2">
				<view class="info-title">预定须知</view>
				<view class="info-content" v-html="formateRichText(detail.book_info)"></view>
			</view>
			<view class="info-box" id="box3">
				<view class="info-title">退改说明</view>
				<view class="info-content" v-html="formateRichText(detail.cancel_info)"></view>
			</view>
			<view class="info-box" id="box4">
				<view class="info-title">费用说明</view>
				<view class="info-content" v-html="formateRichText(detail.expense_info)"></view>
			</view>
		</view>
		
		<view class="btn-box flex-center">
			<view @click="order">立即购买</view>
		</view>
	</view>
</template>

<script>
	const device = uni.getSystemInfoSync();
	const ratio = device.windowWidth / 750;
	export default {
		data() {
			return {
				id: '',
				detail: {},
				top: 0,
				fixed: false,
				type: 0,
				down: false,
			}
		},
		onLoad(option) {
			if (option && option.id) this.id = option.id
			this.getDetail()
			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 < 4; i++) {
						query.select("#box" + i).boundingClientRect(res => {
							if(res.top < 0) {
								this.type = i
							}
						}).exec()
					}
					this.down = false
				}
		},
		methods: {
			getDetail() {
				this.Post({
					id: this.id
				}, '/api/product/get_product_detail').then(res => {
					this.detail = 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)
			    });
			},
			// 去下单
			order() {
				uni.navigateTo({
					url: "/subPackages/line/order?id=" + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #F7F7F7;
		padding-bottom: 200rpx;
	}

	.top-banner {
		width: 750rpx;
		height: 413rpx;
	}

	.top-box {
		background: #FFFFFF;
		padding: 26rpx;

		.price {
			font-weight: bold;
			font-size: 36rpx;
			color: #DC2525;
		}

		.price::before {
			content: '￥';
			font-size: 23rpx;
		}

		.price::after {
			content: '/人';
			font-size: 23rpx;
		}

		.title {
			margin-top: 20rpx;
			font-weight: bold;
			font-size: 31rpx;
			color: #333333;
		}

		.subtitle {
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #888888;
		}

		.tags {
			margin-top: 26rpx;
			display: flex;

			.tag {
				margin-right: 13rpx;
				line-height: 37rpx;
				border-radius: 7rpx;
				border: 1px solid #6A8A27;
				padding: 0 10rpx;
				font-size: 24rpx;
				color: #6A8A27;
			}
		}
	}
	
	.scroll-all-box {
		margin: 20rpx 0;
		background-color: #fff;
	
		.scroll-menus {
		    padding: 0 40rpx;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    font-size: 29rpx;
		    color: #333;
		    height: 84rpx;
		    border-bottom: 1rpx solid #d9d9d9;
			
			.scroll-menu-item {
			    position: relative;
			    line-height: 84rpx;
			}
			
			.scroll-menu-item.active::after {
			    content: '1';
			    font-size: 0;
			    display: block;
			    position: absolute;
			    width: 46rpx;
			    height: 6rpx;
			    border-radius: 3rpx;
			    background: #6A8A27;
			    left: 50%;
			    margin-left: -23rpx;
			    bottom: 0rpx;
			}
		}
		
		.fixed-menus {
		    position: fixed;
			top: 0;
		    left: 0;
		    right: 0;
		    background: white;
		    z-index: 1;
		}
		
		.info-box {
		    padding: 20rpx 40rpx;
			
			.info-title {
			    font-size: 35rpx;
			    font-weight: bold;
			    color: #000;
			}
			
			.info-content {
				width: 697rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 22rpx 14rpx;
				margin-top: 20rpx;
			}
		}
	}
	
	.btn-box {
		width: 750rpx;
		height: 153rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25);
		position: fixed;
		left: 0;
		bottom: 0;
		
		view {
			width: 697rpx;
			line-height: 73rpx;
			text-align: center;
			background: #6A8A27;
			border-radius: 11rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>