<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="dataList.HotelImg" :effect3d="false" :height="545" :interval="5000" :border-radius="0" @click="previewImage"
				 name="Path" 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="dataList.HotelImg.length>0" class="type-img-box" @click="openPicture">
								<image :src="dataList.HotelImg[0].Path" mode="aspectFill"></image>
								<view class="content">
									<!-- <u-icon name="photo" size="26" color="#FFF"></u-icon> -->
									<text>{{dataList.HotelImg.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">{{dataList.StarName}}</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;">{{dataList.HotelName}}</view>
			</view>
			<view class="hotel-content">
				<view class="hotel-base">
					<view class="head">
						<view style="flex:1;">
							<view class="hotel-name">{{dataList.HotelName}}</view>
							<view class="hotel-tag">
								<text v-for="(subItem,subIndex) in dataList.TagList" :key="subIndex">{{subItem}}
									<text style="margin:0 10rpx;" v-if="subIndex!=dataList.TagList.length-1">|</text>
								</text>
							</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" v-for="(subItem,sIndex) in dataList.PublicFacilities">{{subItem}}</view>
						</view>
						<view class="sb-right" @click="openDescription">
							<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;">{{dataList.Address}}</text>
							</view>
							<view class="loc-remark">
								<view>{{dataList.AddressDes}}</view>
							</view>
						</view>
						<view class="loc-right" @click="goMap(dataList.Address,dataList.Lng,dataList.Lat)">
							<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>{{startDay}}</text>
							<text class="date-week">{{getWeek(roomMsg.StartDate)}}</text>
						</view>
						<view class="hr-line"></view>
						<view class="date">
							<text>{{endDay}}</text>
							<text class="date-week">{{getWeek(roomMsg.EndDate)}}</text>
						</view>
						<view class="ver-line"></view>
						<view class="date">
							共 · {{day}}晚
						</view>
					</view>
					<view class="hotel-room">
						<view class="room-type">
							<view class="item" :class="{'active':isShowAll}" @click="getAllRoom()">全部</view>
							<view v-for="(x,i) in threeLevelList" class="item" @click="changeRoomType(x)" :class="{'active':x.isCheck==1}">{{x.name}}</view>
						</view>
						<view class="room-list">
							<room-good :RoomList="RoomList" :dayObj="dayObj" :hotelData="hotelData"></room-good>
						</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 v-for="(sItem,sIndex) in dataList.Booking" :key="sIndex" v-if="sItem.Name!='入离时间'">
							<view class="item-title">{{sItem.Name}}</view>
							<view class="item-content">
								{{sItem.Content}}
							</view>
						</li>
					</ul>
					<template v-for="(sItem,sIndex) in dataList.Booking" v-if="sItem.Name=='入离时间'">
						<view class="big-title" :key="sIndex">
							<text>入离规则</text>
						</view>
						<ul class="title-style-one">
							<li>
								<view class="item-title king regular">{{sItem.Content[0]}}</view>
								<view class="item-title king regular">{{sItem.Content[1]}}</view>
							</li>
						</ul>
					</template>
					<view class="big-title">
						<text>设施服务</text>
					</view>
					<ul class="title-style-one hr">
						<li v-for="(vItem,vIndex) in dataList.ServiceItems" :key="vIndex">
							<view class="item-title regular">{{vItem}}</view>
						</li>
					</ul>
					<view class="hotel-more-info" @click="openDescription">酒店详情</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;">
						<template v-if="nearbyType==0">
							<template v-if="dataList.TicketList" v-for="subItem in dataList.TicketList">
								<near-good :goodItem="subItem" :goodType="3"></near-good>
							</template>
						</template>
						<template v-if="nearbyType==1">
							<template v-if="dataList.DinnerList" v-for="subItem in dataList.DinnerList">
								<near-good :goodItem="subItem" :goodType="2"></near-good>
							</template>
						</template>
					</view>
					<view class="flex">
						<view class="big-title">
							<text>精选推荐</text>
						</view>
						<view class="flex" style="margin-left: 64rpx;">
							<view class="nearby-type active">附近满足条件酒店({{HotelArr.length}})</view>
						</view>
					</view>
					<view>
						<recommed-hotel :HotelArr="HotelArr" :dayObj="dayObj" :searchObj="searchObj"></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 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: [],
				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,
				nearbyType: 0,
				searchObj: {
					date: {}
				},
				roomMsg: {
					HotelId: 0,
					StartDate: '',
					EndDate: ''
				},
				day: 0,
				threeLevelList: [{
						name: "单人床",
						id: 1,
						isCheck: 0
					},
					{
						name: "大床房",
						id: 2,
						isCheck: 0
					},
					{
						name: "双床房",
						id: 3,
						isCheck: 0
					},
					{
						name: "含早餐",
						id: 4,
						isCheck: 0
					},
					{
						name: "可取消",
						id: 5,
						isCheck: 0
					}
				],
				RoomList: [], //可过滤房间
				dataList: {}, //数据
				isShowAll: false, //显示全部
				HotelArr:[] ,//推荐酒店
				searchObj:{},
				dayObj:{},
				hotelData:{} ,//传递到房间预订组件
				startDay:'',
				endDay:''
			}
		},
		components: {
			roomGood,
			nearGood,
			recommedHotel,
			canlendar
		},
		created() {

		},
		onLoad(options) {
			this.id = options.id;
			this.roomMsg.HotelId = options.id;
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0%"
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
			if (options.dayObj) {
				console.log(options.dayObj,'options.dayObj');
				var tempDay = JSON.parse(options.dayObj);
				this.roomMsg.StartDate = tempDay.start;
				this.roomMsg.EndDate = tempDay.end;
				this.startDay = tempDay.startDay;
				this.endDay = tempDay.endDay;
				this.day = tempDay.day;
				this.dayObj = tempDay;
			}
			if (this.id > 0) {
				this.getHotelDetail(this.id);
			}
			if(options.searchObj){
				this.searchObj = JSON.parse(options.searchObj);
			}
			this.getRecomHotel();
		},
		methods: {
			//获取推荐酒店
			getRecomHotel() {
				this.searchObj.HotelId = this.id
				this.request2({
						url: '/api/Hotel/AppGetHotelPage',
						data: this.searchObj
					},
					res => {
						if (res.resultCode == 1) {
							console.log(res, '推荐酒店');
							this.HotelArr = [];
							let tempHotel = res.data.pageData;
							tempHotel.forEach(x => {
								if (this.HotelArr.length < 2) {
									this.HotelArr.push(x);
								}
							})
						}
					}
				);
			},
			goMap(name, lon, lat) {
				let newLon=parseFloat(lon)
				let newLat=parseFloat(lat)
				wx.openLocation({
				  latitude:newLat,
				  longitude:newLon,
				  scale: 18,
				  name,
				  success:(res)=>{
				     console.log(res)
				  },
				  fail: (err) => {
				  	 console.log(err)
				  }
				})
			},
			openPicture() {
				let imgObj = JSON.stringify(this.dataList.HotelImg);
				uni.navigateTo({
					url: "/pages/hotel/picture?imgObj=" + imgObj
				})
			},
			openDescription() {
				let hotelObj = JSON.stringify(this.dataList);
				uni.navigateTo({
					url: "/pages/hotel/description?hotelObj=" + encodeURIComponent(hotelObj)
				})
			},
			chosenDateResult(obj) {
				this.roomMsg.StartDate = obj.start;
				this.roomMsg.EndDate = obj.end;
				this.startDay = obj.startDay;
				this.endDay = obj.endDay;
				this.day = obj.day;
				this.getRoomType();
				this.dayObj = obj;
				this.showTimePopup = false
			},
			//切换日期获取房型
			getRoomType() {
				this.request2({
						url: '/api/Hotel/GetHotelRoom',
						data: this.roomMsg
					},
					res => {
						if (res.resultCode == 1) {
							console.log(res, '房间数据');
							this.RoomList = res.data.RoomList;
						}
					}
				);
			},
			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) {
				 var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				 var week = weekArray[new Date(date).getDay()];//注意此处必须是先new一个Date
				 return '周'+week;
			},
			changeNearbyType(t) {
				this.nearbyType = t
			},
			//显示全部
			getAllRoom() {
				this.isShowAll = !this.isShowAll;
				if (this.isShowAll) {
					this.threeLevelList.forEach(x => {
						x.isCheck = 1;
					})
					this.RoomList = this.dataList.RoomList;
				} else {
					this.threeLevelList.forEach(x => {
						x.isCheck = 0;
					})
				}
			},
			//点击过滤房间
			changeRoomType(obj) {
				if (obj.isCheck == 0) {
					obj.isCheck = 1
				} else {
					obj.isCheck = 0;
				}
				this.RoomList = [];
				let num = 0;
				this.threeLevelList.forEach(x => {
					if (x.isCheck == 1) {
						num++;
						this.dataList.RoomList.forEach(y => {
							if (x.id == 1 && y.BedType == 1) {
								this.RoomList.push(y)
							}
							if (x.id == 2 && y.BedType == 2) {
								this.RoomList.push(y)
							}
							if (x.id == 3 && y.BedType == 3) {
								this.RoomList.push(y)
							}
							if (x.id == 4 && y.BreakfastType != 4) {
								this.RoomList.push(y)
							}
							if (x.id == 5 && y.IsCancel == 2) {
								this.RoomList.push(y)
							}
						})
					}
				})
				if (num == this.threeLevelList.length) {
					this.isShowAll = true;
				} else {
					this.isShowAll = false;
				}
				if (num == 0) {
					this.RoomList = this.dataList.RoomList;
				}
			},
			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;
			},
			//获取酒店详情
			getHotelDetail(id) {
				let msg = {
					HotelId: id,
					StartDate: this.dayObj.start,
					EndDate: this.dayObj.end
				}
				this.request2({
						url: '/api/Hotel/GetHotelInfo',
						data: msg
					},
					res => {
						if (res.resultCode == 1) {
							console.log(res, '详情数据');
							this.dataList = res.data;
							this.RoomList = this.dataList.RoomList;
							this.hotelData.HotelId = this.dataList.HotelId;
							this.hotelData.HotelName = this.dataList.HotelName;
							this.hotelData.Booking = this.dataList.Booking;
						}
					}
				);
			}
		},
	}
</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;
		display: -webkit-box;
		overflow: auto;
		margin-right:20rpx;
	}

	.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>
