<template>
	<view style="height: 100vh;">
		<view style="padding:0 45rpx;">
			<u-tabs :is-scroll="false" name="Name" :list="navs" active-color="#DFBE6E" :current="active" @change="changeHandler"
			 :show-bar="true" :activeFontSize="32" inactive-color="#111111" :bold="true" height="100" duration="0" font-size="28"></u-tabs>
		</view>
		<scroll-view scroll-y="true" class="hotel-descr" @scroll="scroll" :scroll-top="scrollTop">
			<view class="content">
				<view class="flex">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622085515000_731.png" mode="widthFix"
					 style="width: 32rpx;"></image>
					<view class="h-name">{{hotelObj.HotelName}}</view>
				</view>
				<view class="base-box flex flex-wrap">
					<view class="item">
						<view class="val">{{hotelObj.HotelInfo.OpenTime}}</view>
						<view class="label">开业时间</view>
					</view>
					<view class="item">
						<view class="val">{{hotelObj.HotelInfo.DecorationTime}}</view>
						<view class="label">装修时间</view>
					</view>
					<view class="item">
						<view class="val">{{hotelObj.RoomNumber}}间</view>
						<view class="label">房间数量</view>
					</view>
					<view class="item">
						<view class="val">{{hotelObj.Tel}}</view>
						<view class="label">联系电话</view>
					</view>
					<view class="item" style="width:100%">
						<view class="val">{{hotelObj.Address}}</view>
						<view class="label">酒店地址</view>
					</view>
				</view>
				<view class="desc">
					<view>{{hotelObj.HotelInfo.Into}}</view>
				</view>
				<view class="empty-block"></view>
				<view class="flex" style="margin-top: 50rpx;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622086795000_201.png" mode="widthFix"
					 style="width: 32rpx;"></image>
					<view class="h-name">店内设施</view>
				</view>
				<view class="sheshi">
					<view class="she-title">公共服务设施</view>
					<view class="she-content">
						<text v-for="subItem in hotelObj.PublicFacilities">
							{{subItem}}
						</text>
					</view>
				</view>
				<view class="sheshi">
					<view class="she-title">房间设施</view>
					<view class="she-content">
						<text v-for="subItem in hotelObj.RoomFacilities">
							{{subItem}}
						</text>
					</view>
				</view>
				<view class="sheshi" style="margin-bottom: 50rpx;">
					<view class="she-title">酒店服务</view>
					<view class="she-content">
						<text v-for="subItem in hotelObj.ServiceItems">
							{{subItem}}
						</text>
					</view>
				</view>
				<view class="empty-block"></view>
				<view class="flex" style="margin-top: 50rpx;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622094594000_166.png" mode="widthFix"
					 style="width: 32rpx;"></image>
					<view class="h-name">订房须知</view>
				</view>
				<ul class="title-style-one">
					<li v-for="subItem in hotelObj.Booking" v-if="subItem.Name=='入离时间'">
						<view class="item-title king regular">{{subItem.Content[0]}}</view>
						<view class="item-title king regular">{{subItem.Content[1]}}</view>
					</li>
					<li v-for="subItem in hotelObj.Booking" v-if="subItem.Name!='入离时间'">
						<view class="item-title">{{subItem.Name}}</view>
						<view class="item-content">{{subItem.Content}}</view>
					</li>
				</ul>
				<view class="empty-block"></view>
				<view class="flex" style="margin-top: 50rpx;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622094594000_166.png" mode="widthFix"
					 style="width: 32rpx;"></image>
					<view class="h-name">周边交通</view>
				</view>
				<view class="sheshi" v-for="subItem in hotelObj.TrafficList">
					<view class="she-title">{{subItem.TTitle}}</view>
					<view class="she-content">
						<text>{{subItem.TSubTitle}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navs: [{
					Id: 0,
					Name: "酒店信息",
					position: 0
				}, {
					Id: 1,
					Name: "规则设施",
					position: 691
				}, {
					Id: 2,
					Name: "周边交通",
					position: 1038
				}],
				active: 0,
				scrollTop: 0,
				oldScrollTop: 0,
				hotelObj: {}, //酒店信息
			}
		},
		onLoad(options) {
			if (options.hotelObj) {
				this.hotelObj = JSON.parse(decodeURIComponent(options.hotelObj));
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: "酒店详细信息",
			});
		},
		methods: {
			scroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
				this.changeActive()
			},
			goToPosition(posi) {
				this.scrollTop = posi;
				this.$nextTick(function() {
					this.scrollTop = posi;
				});				
			},
			changeActive() {
				let t = 0
				this.navs.forEach((x, i) => {
					if (x.position <= this.oldScrollTop) {
						t = i
					}
				})
				this.active = t
			},
			changeHandler(i) {
				this.active = i;
				this.goToPosition(this.navs[i].position)
				// this.clickItem={};
				// this.$nextTick(function(){
				// 	this.clickItem = this.navs.navs[i];
				// })
			},
		},
	}
</script>

<style>
	.hotel-descr {
		height: calc(100% - 50px);
		width: 100vw;
		color: #111;
	}

	.hotel-descr .king {
		color: #DFBE6E !important;
	}

	.hotel-descr .regular {
		font-weight: 500 !important;
	}

	.hotel-descr .flex {
		display: flex;
		align-items: center;
	}

	.hotel-descr .empty-block {
		height: 20rpx;
		background: #ECF1F4;
		margin: 0 -45rpx;
	}

	.hotel-descr .flex-wrap {
		flex-wrap: wrap;
	}

	.hotel-descr .content {
		padding: 45rpx;
	}

	.hotel-descr .content .h-name {
		font-size: 36rpx;
		font-weight: 800;
		margin-left: 13rpx;
	}

	.hotel-descr .content .base-box {
		margin: 26rpx 0 56rpx 0;
	}

	.hotel-descr .content .base-box .item {
		width: 50%;
		margin-top: 30rpx;
		flex-shrink: 0;
	}

	.hotel-descr .content .base-box .item .val {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.hotel-descr .content .base-box .item .label {
		font-size: 20rpx;
		color: #878787;
	}

	.hotel-descr .content .desc {
		font-size: 24rpx;
		font-weight: 500;
		color: #4B4949;
		line-height: 48rpx;
		padding-bottom: 50rpx;
	}

	.hotel-descr .content .sheshi {
		margin-top: 50rpx;
	}

	.hotel-descr .content .sheshi .she-title {
		font-size: 28rpx;
		font-weight: 800;
	}

	.hotel-descr .content .sheshi .she-content {
		margin-top: 24rpx;
	}

	.hotel-descr .content .sheshi .she-content text {

		font-size: 24rpx;
		font-weight: 500;
		color: #4A4A4A;
		line-height: 40rpx;
		margin-right: 24rpx;
	}

	.hotel-descr .content .title-style-one {
		padding: 0;
		margin: 50rpx 0;
		display: block;
	}

	.hotel-descr .content .title-style-one li {
		list-style: none;
		margin-bottom: 40rpx;
		padding-left: 33rpx;
		position: relative;
	}

	.hotel-descr .content .title-style-one li::before {
		content: ' ';
		display: block;
		width: 10rpx;
		height: 10rpx;
		background: #111111;
		border-radius: 50%;

		position: absolute;
		left: 0;
		top: 15rpx;
	}

	.hotel-descr .content .title-style-one li:last-child {
		margin-bottom: 0px;
	}

	.hotel-descr .content .title-style-one li .item-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #1F1F1F;
		margin-bottom: 20rpx;
	}

	.hotel-descr .content .title-style-one li .item-content {
		font-size: 24rpx;
		font-weight: 500;
		color: #6E6E6E;
	}
</style>
