<template>
    <view class="waper">
        <u-navbar :autoBack="true" :bgColor="scrollTop > 10 ? '#fff' : 'transparent'" :leftIconColor="scrollTop > 10 ? '#303133' : '#fff'">
        	<view slot='center' class="navbar_title" :style="'color:' + (scrollTop > 10 ? '#303133' : '#fff')">酒店详情</view>
        </u-navbar>
        <view class="banner">
            <image src="../../static/image/hotel/hotel_banner.png" mode=""></image>
			<view class="data">
				<view class="name">{{detail.name}}</view>
				<view class="row">
                    <view>
                        <text>开业时间：{{detail.openingTime}}年</text>
                        <text>装修时间：{{detail.decorationTime}}年</text>
                    </view>
                    <view>酒店地址：{{detail.address}}</view>
                </view>
				<view class="tel_box" v-if="detail.phone">
					<u-icon name="phone-fill" color="#FFFFFF" size="28rpx"></u-icon>
					<text @click="callTel">酒店电话：{{detail.phone}}</text>
				</view>
			</view>
        </view>
        <view class="content">
            <view class="content_waper">
				<view class="facilities">
					<view class="active">
						<text>设施服务</text>
						<image src="../../static/home/title_bg.png" mode=""></image>
					</view>
					<view class="list_box">
						<view class="item" v-for="(item, index) in detail.facilitiesList" :key="index">
							<image :src="$utils.setImgUrl(item.logo)" mode=""></image>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="notice">
					<view class="active">
						<text>入住须知</text>
						<image src="../../static/home/title_bg.png" mode=""></image>
					</view>
					<view class="col">
						<view class="top">
							<image src="../../static/image/hotel/checkInTime.png" mode=""></image>
							<view>入离时间</view>
						</view>
						<view class="bottom">
							<view>入住时间：{{detail.checkInTime}}之后  离店时间：{{detail.leaveTime}}之前</view>
						</view>
					</view>
					<view class="col">
						<view class="top">
							<image src="../../static/image/hotel/minLimitedAge.png" mode=""></image>
							<view>年龄限制</view>
						</view>
						<view class="bottom">
							<view>入住办理人需满{{detail.minLimitedAge}}岁</view>
						</view>
					</view>
					<view class="col">
						<view class="top">
							<image src="../../static/image/hotel/invoice.png" mode=""></image>
							<view>发票</view>
						</view>
						<view class="bottom">
							<view>
								<text>{{detail.invoice == 'N' ? '不' : ''}}</text>
								可开具增值税普通/专用发票
							</view>
						</view>
					</view>
					<view class="col">
						<view class="top">
							<image src="../../static/image/hotel/pet.png" mode=""></image>
							<view>宠物</view>
						</view>
						<view class="bottom">
							<view>
								<text>{{detail.pet == 'N' ? '不' : ''}}</text>
								允许携带宠物。
							</view>
						</view>
					</view>
				</view>
				<view class="policy">
					<view class="active">
						<text>订房必读</text>
						<image src="../../static/home/title_bg.png" mode=""></image>
					</view>
					<view class="row">
						<view class="label">城市通知</view>
						<u-parse :content="detail.importantNotice"></u-parse>
						<view class="label">入住限制</view>
						<view class="text">{{detail.checkInWay}}</view>
					</view>
				</view>
				<view class="traffic">
					<view class="active">
						<text>周边景区</text>
						<image src="../../static/home/title_bg.png" mode=""></image>
					</view>
					<view class="list">
						<view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item.id)">
							<view class="left">
								<image :src="item.imagePage ? $utils.setImgUrl(item.imagePage.split(',')[0]) : ''" mode=""></image>
							</view>
							<view class="right">
								<view class="title">
									<view class="label" v-if="item.scenicLevelName">{{item.scenicLevelName}}</view>
									<view class="name">{{item.scenicName}}</view>
								</view>
								<view class="tags_box" v-if="item.tagList.length > 0">
									<view class="tag" v-for="(e, i) in item.tagList" :key="i" v-if="i < 3">{{e.name}}</view>
								</view>
								<view class="row mt15">
									<u-icon name="clock" color="rgba(0,0,0,0.65)" size="32rpx"></u-icon>
									<view class="text">{{item.adjust}}</view>
								</view>
								<view class="row">
									<u-icon name="map" color="rgba(0,0,0,0.65)" size="32rpx"></u-icon>
									<view class="text ads">{{item.address}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
	data () {
		return {
			scrollTop: 0,
			id: '',
			detail: {},
			list: []
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad (options) {
		this.id = options.id;
		this.getDetail();
	},
	
	methods: {
		async getDetail() {
			let res=await this.$http.homestayId(this.id);
			res.data.openingTime = res.data.openingTime.split('-')[0];
			res.data.decorationTime = res.data.decorationTime.split('-')[0];
			this.detail=res.data;
			this.getList(this.detail.longitude, this.detail.latitude)
		},
		async getList (lo, la) {
		    let obj = { pageNum: 1, pageSize: 2, longitude: lo, latitude: la };
		    let info = await this.$http.getScenicList(obj);
		    this.list = info.rows;
		},
		callTel () {// 拨打电话
		    uni.makePhoneCall({ phoneNumber: this.detail.phone, fail: () => {} });
		},
        goDetail(id) {
            uni.navigateTo({ url: '/pages/scenic/detail?id=' + id })
        }
	}
}

</script>

<style lang="scss">
.banner{
    width: 100%; height: 560rpx; position: relative;
	image { width: 100%; height: 100%; }
	.data {
		position: absolute; left: 0; top: 0; width: 100%; padding: 195rpx 32rpx 0; box-sizing: border-box;
		.name { font-weight: 500; font-size: 36rpx; color: #fff; padding-bottom: 10rpx; line-height: 52rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		.row {
			margin-top: 20rpx; width: 100%;
            view{
                width: 100%; color: #fff; font-size: 24rpx; margin-bottom: 12rpx; line-height: 34rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                &:last-child{ margin-bottom: 0; }
                text:last-child{ margin-left: 106rpx; }
            }
		}
		.tel_box {
			width: 100%; height: 90rpx; background: rgba(255,255,255,0.1); border-radius: 8rpx; display: flex; align-items: center; justify-content: center; margin-top: 34rpx;
			text { margin-left: 8rpx; font-weight: 500; font-size: 26rpx; color: #FFFFFF; }
		}
	}
}
.content{
    width: 100%; position: relative; z-index: 5; margin-top: -52rpx; background: #F6F6F6; border-radius: 40rpx 40rpx 0 0; overflow: hidden;
    .content_waper{
        width: 100%; box-sizing: border-box; padding: 32rpx 24rpx;
		.active{
			position: relative; display: inline-block; vertical-align: top; margin-bottom: 4rpx;
			text{ font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); }
			image{ width: 72rpx; height: 37rpx; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: -46rpx; display: block; }
		}
		.facilities {
			background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx; box-sizing: border-box;
			.list_box {
				display: flex; align-items: center; flex-wrap: wrap;
				.item {
					margin-top: 20rpx; text-align: center; width: 25%;
					image { width: 40rpx; height: 40rpx; }
					view { margin-top: 8rpx; font-size: 24rpx; color: rgba(0,0,0,0.85); }
				}
			}
		}
		.notice {
			margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx; box-sizing: border-box;
			.col {
				margin-top: 20rpx;
				.top {
					display: flex; align-items: center;
					image {width: 24rpx; height: 24rpx; margin-right: 12rpx;}
					view {font-size: 28rpx; color: rgba(0,0,0,0.85);}
				}
				.bottom {
					margin: 12rpx 0 0 36rpx;
					view { font-size: 26rpx; color: rgba(0,0,0,0.65); }
				}
			}
		}
		.policy {
			margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx; box-sizing: border-box;
			.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); padding-bottom: 4rpx; }
			.row {
				.label { font-size: 28rpx; color: rgba(0,0,0,0.85); margin: 20rpx 0 12rpx; }
				.text { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
				u-parse { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
			}
		}
		.traffic {
			margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx; box-sizing: border-box;
			.list {
				margin-top: 24rpx;
				.item {
					border-bottom: 1rpx solid #ECEAEA; padding: 0 0 32rpx; margin-bottom: 32rpx; display: flex; align-items: center;
					&:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
					.left {
						width: 208rpx; height: 208rpx; margin-right: 20rpx;
						image { width: 208rpx; height: 208rpx; }
					}
					.right {
						flex: 1;
						.title {
							display: flex; align-items: center;
							.label { height: 32rpx; padding: 0 12rpx; line-height: 32rpx; background: #03AE80; border-radius: 4rpx; font-weight: 500; font-size: 20rpx; color: #FFFFFF; margin-right: 10rpx; }
							.name { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); line-height: 38rpx; width: 320rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
						}
						.tags_box {
							margin-top: 10rpx; display: flex; align-items: center;
							.tag {
								height: 36rpx; padding: 0 14rpx; line-height: 36rpx; margin-right: 16rpx; font-size: 20rpx;
								&:last-child{ margin-right: 0; }
								&:nth-child(1) { background: rgba(71,175,195,0.1); color: #03AE80; }
								&:nth-child(2) { background: rgba(94,208,191,0.1); color: #5ED0BF; }
								&:nth-child(3) { background: rgba(255,180,87,0.1); color: #FFB457; }
							}
						}
						.row {
							margin-top: 7rpx; display: flex; align-items: center; font-size: 28rpx; color: rgba(0,0,0,0.65); line-height: 33rpx;
							.text { margin-left: 8rpx; }
							.ads { width: 380rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
						}
						.mt15 { margin-top: 15rpx; }
					}
				}
			}
		}
    }
}
</style>