<template>
	<view class="hotel-detail">
		<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scroll="scroll">
			<view class="media" :style="{'opacity':(100-boxOption)+'%'}">
				<u-swiper :list="imgsList" :effect3d="false" :height="545" :interval="5000" :border-radius="0"
					@click="previewImage" name="picUrl" v-if="active==1"></u-swiper>
				<view class="video-box" v-if="active==0">
					<video id="myVideo" :src="detailData.VideoUrl" style="width: 100%;height: 100%;"
						:controls='controls' :show-center-play-btn='false' :show-fullscreen-btn='false'
						@fullscreenchange='videoControl' object-fit='fill'></video>
					<view @click="enlarge" class="play-btn">
						<!-- 播放按钮 -->
						<image
							src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
							style="width: 37rpx;height: 44rpx;" mode=""></image>
					</view>
				</view>
				<!-- <view class="type-box" v-if="videoUrl!=''">
					<u-tabs bg-color="rgba(0,0,0,0)" :is-scroll="false" name="Name" :list="typeList"
						:active-color="mainColor" :current="active" @change="changeHandler" :show-bar="true"
						:bold="false" height="50" duration="0" font-size="24" :activeFontSize="24" :typeStyle="2">
					</u-tabs>
				</view> -->
				<view class="media-info">
					<view class="flex">
						<view class="mi-left">
							<view v-if="imgsList.length>0" class="type-img-box">
								<image :src="imgsList[0].picUrl" mode="aspectFill"></image>
								<view class="content">
									<!-- <u-icon name="photo" size="26" color="#FFF"></u-icon> -->
									<text>{{imgsList.length}}</text>
								</view>
							</view>
						</view>
						<view class="mi-right">
							<view style="font-size: 40rpx;font-weight: 600;text-align: right;margin-bottom: 6rpx;" class="king">5星</view>
							<view style="font-weight: 500;color:#dfbe6e99;text-align: right;" class="f12">658人下单入住</view>
							<!-- <view class="flex">
								<text style="color:white;margin-right: 14rpx;" class="f12">星级</text>
								<u-rate active-color="#DFBE6E" inactive-color="#f1f1f1" current="4" active-icon="star" inactive-icon="star" disabled></u-rate>
							</view> -->
						</view>
					</view>
				</view>
				
				<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]"
					style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
					<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx;"></u-icon>
				</view>
			</view>
			<view class="hotel-title" :style="[titleStyle]">
				<view @click="goback">
					<u-icon name="arrow-left" size="44"></u-icon>
				</view>
				<view style="flex: 1;margin-left: 30rpx; text-align: left;">眉山黑龙滩长岛天堂洲际酒店</view>
			</view>
			<view class="hotel-content">
				<view class="hotel-base">
					<view class="head">
						<view style="flex:1;">
							<view class="hotel-name">九寨沟星宇国际大酒店</view>
							<view class="hotel-tag">亲子设施 | 江河景房 | 环境安静 | 全家出游</view>
						</view>
						<!-- 关注 -->
						<view class="op-box">
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1621940804000_709.png"
								style="margin-right: 17rpx;"></image>
							<image v-if="!islike"
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1621940804000_61.png"
								@click="changeLike"></image>
							<image v-if="islike"
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1621940804000_953.png"
								@click="changeLike"></image>
						</view>
					</view>
					<view class="shebei">
						<view class="sb-left">
							<view class="sb-item">2014年开业</view>
							<view class="sb-item">2017年装修</view>
							<view class="sb-item">免费停车场</view>
						</view>
						<view class="sb-right">
							<text style="margin-right: 20rpx;">设施/详情</text>
							<u-icon name="arrow" size="20" />
						</view>
					</view>
					<view class="location">
						<view class="loc-left">
							<view class="loc-name">
								<u-icon name="location" size="28" />
								<text style="margin-left: 14rpx;">沟口 | 九寨沟风景区沟口</text>
							</view>
							<view class="loc-remark">
								<view>距浦东国际机场14.5km，驾车约19min</view>
								<view>距车站约1km，驾车约5min</view>
							</view>
						</view>
						<view class="loc-right">
							<text style="margin-right: 20rpx;">地图详情</text>
							<u-icon name="arrow" size="20" />
						</view>
					</view>
					<view class="date-box flex" @click="showTimePopup=true">
						<view class="date">
							<text>{{searchObj.date.startDay}}</text>
							<text class="date-week">{{searchObj.date.startWeek}}</text>
						</view>
						<view class="hr-line"></view>
						<view class="date">
							<text>{{searchObj.date.endDay}}</text>
							<text class="date-week">{{searchObj.date.endWeek}}</text>
						</view>
						<view class="ver-line"></view>
						<view class="date">
							共 · {{searchObj.date.day}}晚
						</view>
					</view>
					<view class="hotel-room">
						<view class="room-type">
							<view v-for="(x,i) in threeLevelList" class="item" @click="changeRoomType(i)"
								:class="{'active':currentRoomType==i}">{{x.name}}</view>
						</view>
						<view class="room-list">
							<room-good></room-good>
							<room-good-test></room-good-test>
						</view>
					</view>
				</view>
				<view class="empty-block"></view>
				<view class="detail-box">
					<view class="big-title">
						<text>订房须知</text>
					</view>
					<ul class="title-style-one">
						<li>
							<view class="item-title">酒店提示</view>
							<view class="item-content">疫情期间，酒店不提供早餐，请佩戴好口罩。</view>
						</li>
						<li>
							<view class="item-title">儿童政策</view>
							<view class="item-content">不接受18岁以下客人单独入住。不含儿童早餐。
								加床政策、儿童人数请参见您所选定的客房政策，若超过房型限定人数，可能需收取额外费用。提出的任何要求均需获得酒店的确认，所有服务详情以酒店告知为准。</view>
						</li>
						<li>
							<view class="item-title">宠物政策</view>
							<view class="item-content">不可携带宠物。</view>
						</li>
					</ul>
					<view class="big-title">
						<text>入离规则</text>
					</view>
					<ul class="title-style-one">
						<li>
							<view class="item-title king regular">入住时间：14:00以后</view>
							<view class="item-title king regular">退房时间：13:00以前</view>
						</li>
					</ul>
					<view class="big-title">
						<text>设施服务</text>
					</view>
					<ul class="title-style-one hr">
						<li>
							<view class="item-title regular">接机服务</view>
						</li>
						<li>
							<view class="item-title regular">叫醒服务</view>
						</li>
						<li>
							<view class="item-title regular">洗衣服务</view>
						</li>
						<li>
							<view class="item-title regular">健身房</view>
						</li>
					</ul>
					<view class="hotel-more-info">酒店详情</view>
				</view>
				<view class="empty-block"></view>
				<view class="detail-box">
					<view class="flex">
						<view class="big-title">
							<text>发现周边</text>
						</view>
						<view class="flex" style="margin-left: 64rpx;">
							<view class="nearby-type" :class="{'active':nearbyType==0}" @click="changeNearbyType(0)">景区
							</view>
							<view class="nearby-type" :class="{'active':nearbyType==1}" @click="changeNearbyType(1)">美食
							</view>
						</view>
					</view>
					<view class="flex" style="margin: 50rpx 0;overflow-x: auto;">
						<near-good></near-good>
						<near-good></near-good>
						<near-good></near-good>
						<near-good></near-good>
						<near-good></near-good>
						<near-good></near-good>
					</view>
					<view class="flex">
						<view class="big-title">
							<text>精选推荐</text>
						</view>
						<view class="flex" style="margin-left: 64rpx;">
							<view class="nearby-type active">附近满足条件酒店(2)</view>
						</view>
					</view>
					<view>
						<recommed-hotel></recommed-hotel>
						<recommed-hotel :hotelType="1"></recommed-hotel>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="85%" :safe-area-inset-bottom="true">
			<canlendar @finish="chosenDateResult"></canlendar>
		</u-popup>
	</view>
</template>

<script>
	import roomGood from './components/room-good.vue';
	import roomGoodTest from './components/room-good2.vue';
	import nearGood from './components/near-good.vue';
	import recommedHotel from './components/recommed-hotel.vue';
	import canlendar from "./components/time/index.vue"
	export default {
		data() {
			return {
				imgsList: [{
						picUrl: "https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg"
					},
					{
						picUrl: "https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg"
					},
					{
						picUrl: "https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg"
					},
					{
						picUrl: "https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg"
					}
				],
				id: 0,
				typeList: [{
					Id: 0,
					Name: '视频'
				}, {
					Id: 1,
					Name: '图片'
				}],
				boxOption: 0,
				titleStyle: {},
				mainColor: "",
				showTimePopup: false,
				controls: false,
				videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
				active: 1,
				islike: false,
				currentRoomType: 0,
				nearbyType: 0,
				searchObj: {
					date: {}
				},
				threeLevelList: [{
						name: "全部",
						id: 0
					},
					{
						name: "大床房",
						id: 1
					},
					{
						name: "双床房",
						id: 2
					},
					{
						name: "含早餐",
						id: 3
					},
					{
						name: "可取消",
						id: 4
					},
					{
						name: "优惠活动",
						id: 5
					}
				]
			}
		},
		components: {
			roomGood,
			roomGoodTest,
			nearGood,
			recommedHotel,
			canlendar
		},
		created() {
			let d1 = new Date();
			let d = new Date();
			let d2 = new Date(d.setDate(d.getDate() + 1))
			var obj = {
				start: `${d1.getFullYear()}-${d1.getMonth()+1}-${d1.getDate()}`,
				end: `${d2.getFullYear()}-${d2.getMonth()+1}-${d2.getDate()}`,
				startDay: `${this.getMonth(d1)}月${d1.getDate()}日`,
				endDay: `${this.getMonth(d1)}月${d1.getDate()}日`,
				startWeek: this.getWeek(d1),
				endWeek: this.getWeek(d2),
				day: 1
			}
			uni.setStorage({
				key: 'Time',
				data: JSON.stringify(obj)
			})
			this.searchObj.date = obj
		},
		onLoad(options) {
			// this.id=options.id
			// this.ProjectType=options.type
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0%"
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods: {
			chosenDateResult(obj) {
				obj.startDay = this.formatMonthDay(obj.startDay)
				obj.endDay = this.formatMonthDay(obj.endDay)
				this.searchObj.date = obj
				this.showTimePopup = false
			},
			formatMonthDay(str) {
				let temp = str.split('-')
				temp[0] = temp[0] > 9 ? temp[0] : "0" + temp[0]
				temp[1] = temp[1] > 9 ? temp[1] : "0" + temp[1]
				return `${temp[0]}月${temp[1]}日`
			},
			getMonth(date) {
				let m = date.getMonth() + 1
				return m > 9 ? m : "0" + m
			},
			getDay(date) {
				let d = date.getDate()
				return d > 9 ? d : "0" + d
			},
			getWeek(date) {
				let day = date.getDay();
				if (day === 1) {
					var week = "一";
				} else if (day === 2) {
					week = "二";
				} else if (day === 3) {
					week = "三";
				} else if (day === 4) {
					week = "四";
				} else if (day === 5) {
					week = "五";
				} else if (day === 6) {
					week = "六";
				} else if (day === 7) {
					week = "日";
				}
				return "周" + week
			},
			changeNearbyType(t) {
				this.nearbyType = t
			},
			changeRoomType(i) {
				this.currentRoomType = i
			},
			changeLike() {
				this.islike = !this.islike
			},
			previewImage(i) {
				uni.previewImage({
					urls: this.imgsList,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			scroll(e) {
				this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
				this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) + "%"
				this.$forceUpdate()
			},
			enlarge(file) {
				// 全屏
				this.videoContext = uni.createVideoContext('myVideo');
				this.videoContext.requestFullScreen({
					direction: 0
				})
			},
			videoControl(e) {
				if (e.detail.fullScreen == false) {
					this.videoContext.stop()
					this.controls = false
				} else {
					this.videoContext.play()
					this.controls = true
				}
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			changeHandler(i) {
				this.active = i;
			},
		},
	}
</script>

<style>
	.hotel-detail {
		height: 100vh;
		overflow: hidden;
		width: 100vw;
		font-family: 'pingfang';
	}

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

	.hotel-detail .f12 {
		font-size: 24rpx !important;
	}

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

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

	.hotel-detail .hotel-content {
		position: relative;
		z-index: 2;
		top: -110rpx;
	}

	.hotel-detail .hotel-content .date-box {
		margin: 30rpx 0;
		background: #ECF1F4;
		border-radius: 16rpx;
		padding: 25rpx;
	}

	.hotel-detail .hotel-content .date-box .hr-line {
		width: 24rpx;
		height: 4rpx;
		background: #222;
		margin-right: 24rpx;
	}

	.hotel-detail .hotel-content .date-box .ver-line {
		width: 1px;
		height: 49rpx;
		background: #A8A8A8;
		opacity: 0.3;
		margin-right: 24rpx;
	}

	.hotel-detail .hotel-content .date-box .date {
		font-size: 24rpx;
		font-weight: bold;
		color: #111111;
		margin-right: 24rpx;
	}

	.hotel-detail .hotel-content .date-box .date .date-week {
		font-size: 24rpx;
		font-weight: 500;
		color: #6E6E6E;
		margin-left: 18rpx;
	}

	.hotel-detail .hotel-content .hotel-more-info {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #FFFFFF;
		border: 1px solid #111111;
		border-radius: 8rpx;
		margin: 0 auto;
		font-size: 24rpx;
		font-weight: 500;
		color: #1F1F1F;
		text-align: center;
	}

	.hotel-detail .empty-block {
		height: 20rpx;
		background-color: #ECF1F4;
	}

	.hotel-detail .hotel-content .detail-box {
		padding: 50rpx;
	}

	.hotel-detail .hotel-content .detail-box .nearby-type {
		padding: 0 16rpx;
		height: 40rpx;

		background: #FFF;
		border-radius: 20rpx;
		margin-right: 10rpx;

		font-size: 28rpx;
		font-weight: 500;
		color: #1F1F1F;
	}

	.hotel-detail .hotel-content .detail-box .nearby-type.active {
		color: #DFBE6E;
		background: rgba(223, 190, 110, .2);
	}

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

	.hotel-detail .hotel-content .title-style-one.hr {
		display: flex;
		flex-wrap: wrap;
	}

	.hotel-detail .hotel-content .title-style-one.hr li {
		width: 50%;
		flex-shrink: 0;
		margin: 0;
	}

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

	.hotel-detail .hotel-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-detail .hotel-content .title-style-one li:last-child {
		margin-bottom: 0px;
	}

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

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

	.hotel-detail .hotel-content .big-title {
		position: relative;
	}

	.hotel-detail .hotel-content .big-title::before {
		display: block;
		width: 71rpx;
		height: 12rpx;
		background: #DFBE6E;
		border-radius: 4rpx;
		content: ' ';

		position: absolute;
		left: 0;
		bottom: 6rpx;
		z-index: 1;
	}

	.hotel-detail .hotel-content .big-title text {
		font-size: 34rpx;
		font-weight: bold;
		color: #1F1F1F;
		position: relative;
		z-index: 2;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type {
		/* padding:10rpx 30rpx; */
		display: flex;
		align-items: center;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.hotel-detail .hotel-content .hotel-base .room-list {
		padding-top: 40rpx;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item {
		padding: 16rpx 30rpx;
		background: #ECF1F4;
		border-radius: 8rpx;
		margin-right: 26rpx;
		font-size: 22rpx;
		color: #999999;
		font-weight: 400;
		flex-shrink: 0;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item.active {
		background: #111111;
		color: #FFFFFF;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item:last-child {
		margin-right: 0;
	}

	.hotel-detail .hotel-content .hotel-base {
		/* position: relative;
		top: -140rpx; */
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		background-color: #FFF;
		padding: 50rpx;
	}

	.location {
		display: flex;
		align-items: center;
	}

	.location .loc-left {
		width: 1px;
		flex: 1;
	}

	.location .loc-left .loc-name {
		font-size: 28rpx;
		font-weight: 800;
		color: #111111;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.location .loc-left .loc-remark {
		font-size: 22rpx;
		font-weight: 500;
		color: #6E6E6E;
		line-height: 34rpx;
	}

	.location .loc-right {
		font-size: 24rpx;
		font-weight: 500;
		color: #111111;
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-content .hotel-base .head {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.hotel-detail .hotel-content .hotel-base .head .hotel-name {
		font-size: 36rpx;
		font-weight: 800;
		color: #111111;
	}

	.hotel-detail .hotel-content .hotel-base .head .hotel-tag {
		margin-top: 20rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #6E6E6E;
	}

	.hotel-detail .hotel-content .hotel-base .head .op-box image {
		width: 58rpx;
		height: 58rpx;
	}

	.hotel-detail .hotel-content .hotel-base .shebei {
		padding: 34rpx 0;
		margin-bottom: 34rpx;
		border-bottom: 1px solid rgba(0, 0, 0, .1);
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-content .hotel-base .shebei .sb-left {
		width: 1px;
		flex: 1;
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-content .hotel-base .shebei .sb-left .sb-item {
		padding: 7rpx 13rpx;
		background: #ECF1F4;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #111111;
		margin-right: 10rpx;
	}

	.hotel-detail .hotel-content .hotel-base .shebei .sb-right {
		font-size: 24rpx;
		font-weight: 500;
		color: #111111;
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-title {
		line-height: 45px !important;
		font-size: 16px;
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		color: #111;
		box-sizing: content-box;
		z-index: 5;
		display: flex;
		align-items: center;
		background-color: #f6f6f6;
		padding-left: 6rpx;
	}

	.hotel-detail .media {
		height: 545rpx;
		position: relative;
		z-index: 1;
	}

	.hotel-detail .media .play-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -49rpx;
		margin-left: -49rpx;
		width: 98rpx;
		height: 98rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, .4);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hotel-detail .media .video-box {
		background-color: #111;
		height: 545rpx;
		position: relative;
	}

	.hotel-detail .media .type-box {
		width: 100px;
		height: 50rpx;
		position: absolute;
		background-color: rgba(255, 255, 255, .6);
		border-radius: 50rpx;
		left: 50%;
		bottom: 80px;
		margin-left: -50px;
	}

	.hotel-detail .media .media-info .type-img-box {
		background-color: rgba(255, 255, 255, .5);
		color: #FFF;
		display: flex;
		align-items: center;
		height: 96rpx;
		width: 96rpx;
		padding: 8rpx;
		border-radius: 12rpx;
		position: relative;
	}

	.hotel-detail .media .media-info .type-img-box image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 12rpx;
		opacity: 0.5;
	}

	.hotel-detail .media .media-info .type-img-box .content {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		font-size: 20rpx;
		color: #FFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		justify-items: center;
	}

	.hotel-detail .media .media-info .type-img-box text {
		font-size: 22rpx;
		font-family: pingfang;
		margin-left: 6rpx;

	}

	.hotel-detail .media .media-info {
		position: absolute;
		background-color: rgba(0, 0, 0, .35);
		top: 287rpx;
		bottom: 0;
		left: 0;
		right: 0;
		padding:30rpx 50rpx;
	}

	.hotel-detail .media .media-info .mi-left {
		flex: 1;
	}
</style>
