<template>
	<view class="restaurant-detail" v-if="details.Name">
		<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="407" :interval="5000" :border-radius="0" @click="openPicture"
				 name="picUrl" v-if="active == 1"></u-swiper>
				<!-- #ifdef MP-WEIXIN  -->
				<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>
				<!-- #endif -->
			</view>
			<view class="restaurant-title" :style="[titleStyle]">
				<view @click="goback">
					<!-- #ifdef MP-WEIXIN  -->
					<u-icon name="arrow-left" size="44"></u-icon>
					<!-- #endif -->
				</view>
				<view style="
            flex: 1;
            margin-left: 30rpx;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          "
				 class="name-ali">{{ details.Name }}</view>
			</view>
			<view class=""> </view>
			<view class="restaurant-content">
				<view class="restaurant-base">
					<view class="head">
						<view style="flex: 1">
							<view class="restaurant-name">{{ details.Name }}</view>
							<view class="restaurant-tag" style="display: flex; flex-wrap: wrap">
								<view v-for="(item, index) in details.FoodTag" :key="index">
									<u-tag style="margin-right: 22rpx" :text="item" mode="plain" border-color="#DFBE6E" color="#DFBE6E" size="mini"
									 v-if="item" />
								</view>
								<view v-for="(item, index) in details.GeographicTag" :key="index">
									<u-tag style="margin-right: 22rpx" :text="item" mode="plain" border-color="#DFBE6E" color="#DFBE6E" size="mini"
									 v-if="item" />
								</view>
							</view>
						</view>
						<!-- 关注 -->
						<view class="op-box">
							<image v-if="details.FollowId === 0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622453740000_840.png"
							 @click="changeLike"></image>
							<image v-if="details.FollowId > 0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622453740000_764.png"
							 @click="changeLike"></image>
						</view>
					</view>
					<view class="location" style="
              margin-bottom: 36rpx;
              padding-bottom: 36rpx;
              border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            ">
						<view class="loc-left">
							<view class="loc-name">
								<u-icon name="clock" size="28" />
								<text style="margin-left: 14rpx; width: 70%">营业时间 {{ details.OpeningHours }}</text>
								<u-tag style="margin-left: 22rpx" text="营业中" bg-color="#DFBE6E" border-color="#DFBE6E" color="#ffffff" v-if="details.BusinessState === 1" />
							</view>
							<view class="loc-remark">
								<!-- <view>无休息日，全年营业</view> -->
							</view>
						</view>
					</view>
					<view class="location" style="margin-bottom: 50rpx">
						<view class="loc-left">
							<view class="loc-name">
								<u-icon name="location" size="28" />
								<text style="margin-left: 14rpx">{{ details.Address }}</text>
							</view>
							<view class="loc-remark">
								<view>{{ details.ParkInfo }}</view>
								<!-- <view>距车站约1km，驾车约5min</view> -->
							</view>
						</view>
						<view class="loc-right">
							<text style="margin-right: 20rpx" @click="goMap(details.Address, details.Lng, details.Lat)">地图详情</text>
							<u-icon name="arrow" size="20" />
						</view>
					</view>

					<view class="empty-block" style="margin: 0 -50rpx"></view>
					<view class="big-title" style="margin-top: 50rpx">
						<text>推荐菜品</text>
					</view>
					<view class="chooseDate" @click="chooseDate">
						<text>选择日期</text>
						<text v-if="Date">:{{ Date }}</text>
					</view>

					<ul class="title-style-one hr" v-if="details.FoodRecommendList.length > 0">
						<li v-for="(item, index) in details.FoodRecommendList" :key="index">
							<view class="item-title regular">{{ item.FoodName }}</view>
						</li>
					</ul>
					<view class="big-title">
						<text>优惠套餐</text>
					</view>
					<view class="restaurant-room">
						<view class="no-data" v-if="details.resultMealList.length === 0">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/no-data.png" mode="aspectFit"
							 class="no-data-img"></image>
							<view class="zhanwu"> 暂无数据 </view>
						</view>
						<view v-for="(item, index) in details.resultMealList" :key="index" class="room-list" v-if="details.resultMealList.length >= 0">
							<package-good :packageGoods="item" @success="previewOrder(item)"></package-good>
							<!-- <package-good-test></package-good-test> -->
						</view>
					</view>
					<view class="empty-block" style="margin-bottom: 40rpx"></view>
					<view class="">
						<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="details.TicketCouponsList" v-for="subItem in details.TicketCouponsList">
									<near-good :goodItem="subItem" :goodType="2"></near-good>
								</template>
							</template>
							<template v-if="nearbyType == 1">
								<template v-if="details.HotelList" v-for="subItem in details.HotelList">
									<near-good :goodItem="subItem" :goodType="1"></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">附近满足条件美食({{ foodArr.length }})</view>
							</view>
						</view>
						<view>
							<recommed-hotel :foodArr="foodArr" :dayObj="dayObj" :searchObj="searchObj">
							</recommed-hotel>
						</view>
					</view>
				</view>
				<u-popup v-model="showTimePopup" mode="bottom" border-radius="40" :safe-area-inset-bottom="true">
					<view class="" style="margin-top: 40rpx">
						<calendar ref="calendar" :insert="true" :selected="calendar" @change="changeDate"></calendar>
						<view class="caledar-btn" @click="confirm"> 确定 </view>
					</view>
				</u-popup>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import packageGood from "./components/package-good.vue";
	import packageGoodTest from "./components/package-good2.vue";
	import nearGood from "./components/near-good.vue";
	import recommedHotel from "./components/recommed-hotel.vue";
	import recommedRestaurant from "./components/recommed-restaurant.vue";
	import calendar from "./components/uni-calendar/uni-calendar.vue";
	export default {
		data() {
			return {
				imgsList: [],
				ID: 0,
				details: {},
				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,
				nearbyType: 0,
				calendar: [{
					date: "",
					info: "",
				}, ],
				Date: "",
				Up: 0,
				nearbyType: 0,
				foodArr: [], //推荐景点
			};
		},
		components: {
			packageGood,
			packageGoodTest,
			nearGood,
			recommedRestaurant,
			calendar,
			recommedHotel,
		},
		created() {
			let d3 = new Date();
			let nextDate = new Date(d3.getTime() + 24 * 60 * 60 * 1000);
			let year = nextDate.getFullYear();
			let month = nextDate.getMonth() + 1;
			if (month < 10) {
				month = "0" + month;
			}
			let day = nextDate.getDate();
			if (day < 10) {
				day = "0" + day;
			}
			let tomorrow = year + "-" + month + "-" + day;
			this.calendar[0].date = tomorrow;

			this.Date = tomorrow;
			console.log(this.calendar, this.Date);
			this.Up = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserPageType :
				0;
		},
		onShareTimeline() {
			// setTimeout(() => {
			//   console.log("分享朋友圈调用");
			// }, 2500);
			let uid = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserId :
				0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").SmallShopId :
				0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserSmallShopId :
					0;
			}
			let title = this.details.Name ? this.details.Name : "美食";
			let imageUrl = this.details.AllPicList[0].TagPicList[0].Path ?
				this.details.AllPicList[0].TagPicList[0].Path :
				"";
			let id = this.ID;
			return {
				title: title,
				query: "id=" +
					this.id +
					"&user_id=" +
					uid +
					"&SmallShopId=" +
					SmallShopId +
					"&Up=" +
					this.Up,
				imageUrl: imageUrl,
			};
		},
		onShareAppMessage(res) {
			// setTimeout(() => {
			//   console.log("分享好友调用");
			// }, 2500);
			let u = uni.getStorageSync("mall_UserInfo");
			let uid = u.UserId ? u.UserId : 0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
			}
			console.log(
				"/pages/index/index?id=" +
				this.ID +
				"&user_id=" +
				uid +
				"&SmallShopId=" +
				SmallShopId +
				"&Up=" +
				this.Up +
				"&JumpType=16"
			);
			return {
				title: this.details.Name ? this.details.Name : "美食",
				path: "/pages/index/index?id=" +
					this.ID +
					"&user_id=" +
					uid +
					"&SmallShopId=" +
					SmallShopId +
					"&Up=" +
					this.Up +
					"&JumpType=16",
				imageUrl: this.details.AllPicList[0].TagPicList[0].Path ?
					this.details.AllPicList[0].TagPicList[0].Path : "",
			};
		},
		onLoad(options) {
			console.log(options);
			if (options && options.id) {
				this.ID = options.id;
				this.getDetail();
			}
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0",
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
			this.getRecomHotel();
		},
		methods: {
			chooseDate() {
				this.showTimePopup = true;
				// this.$refs.calendar.open();
			},
			changeDate(e) {
				this.Date = e.fulldate;
				this.calendar[0].date = e.fulldate;
			},
			confirm() {
				this.showTimePopup = false;
				this.getMealListByDate();
			},
			goMap(name, lon, lat) {
				let newLon = parseFloat(lon);
				let newLat = parseFloat(lat);
				uni.openLocation({
					latitude: newLat,
					longitude: newLon,
					scale: 18,
					name,
					address: name,
					success: (res) => {

					},
					fail: (err) => {

					},
				});
			},
			openPicture() {
				uni.navigateTo({
					url: "/pages/restaurant/picture?id=" + this.ID,
				});
			},
			openDescription() {
				uni.navigateTo({
					url: "/pages/restaurant/description",
				});
			},
			changeLike() {
				this.request2({
						url: "/api/AppletDining/GetFollowDining",
						data: {
							ID: this.details.FollowId,
							SourceId: this.details.ID,
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.getDetail();
						}
					}
				);
			},
			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) / 100 > 1 ?
					1 :
					Math.floor(e.detail.scrollTop - 100) / 100;
				this.$forceUpdate();
			},

			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			changeHandler(i) {
				this.active = i;
			},
			//获取详情
			getDetail() {
				uni.showLoading({
					title: "加载中...",
				});
				this.request2({
						url: "/api/AppletDining/GetDiningDetails",
						data: {
							ID: this.ID,
						},
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							res.data.FoodTag = res.data.FoodTag.split(",");
							res.data.GeographicTag = res.data.GeographicTag.split(",");
							this.details = res.data;

							this.imgsList = [];
							res.data.AllPicList[0].TagPicList.map((i) => {
								let obj = {
									picUrl: i.Path,
								};
								this.imgsList.push(obj);
							});
						}
					},
					(err) => {
						uni.hideLoading();
					}
				);
			},
			//根据日期获取套餐列表
			getMealListByDate() {
				this.request2({
						url: "/api/AppletDining/GetDiningMealList",
						data: {
							ID: this.ID,
							BuyDate: this.Date,
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.details.resultMealList = res.data;
						}
					}
				);
			},
			previewOrder(item) {
				let data = {
					MealName: item.MealName,
					date: this.Date,
					Unit_Price: this.$utils.getretailer() == true ? item.LPriceB : item.LPriceC,
					MealId: item.Id,
					DiningId: this.details.ID,
					MakeDay: item.MakeDay,
					IsHoliday: item.IsHoliday,
					OtherTag: item.OtherTag,
				};
				uni.navigateTo({
					url: "/pages/restaurant/order?data=" +
						encodeURIComponent(JSON.stringify(data)),
				});
			},
			changeNearbyType(t) {
				this.nearbyType = t;
			},
			//获取推餐食
			getRecomHotel() {
				this.request2({
						url: "/api/AppletDining/GetDiningPage",
						data: {
							pageIndex: 1,
							pageSize: 10,
							Name: "",
							OrderBy: 3,
							FoodTypeIds: 0,
							DiningPriceType: 0,
							ID: parseInt(this.ID),
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							console.log(res, "推荐景点");
							this.foodArr = [];
							let tempHotel = res.data.pageData;
							tempHotel.forEach((x) => {
								if (this.foodArr.length < 2) {
									this.foodArr.push(x);
								}
							});
						}
					}
				);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.no-data {
		margin: 40rpx 0;

		.no-data-img {
			width: 180rpx;
			height: 240rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.zhanwu {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-top: 20rpx;
		}
	}

	.chooseDate {
		width: 275rpx;
		margin: 20rpx 0;
		/* display: inline-block; */
		/* height: 60rpx; */
		background-color: #ecf1f4;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
		text-align: center;
		line-height: 58rpx;
		padding: 0 10rpx;
	}

	.caledar-btn {
		width: 700rpx;
		height: 80rpx;
		background-color: #111111;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		line-height: 78rpx;
		margin: 20rpx auto;
	}

	.restaurant-detail {
		height: 100vh;
		overflow: hidden;
		width: 100vw;
		font-family: "pingfang";
	}

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

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

	.restaurant-detail .king {
		color: #dfbe6e !important;
	}

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

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

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

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

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

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

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

	.restaurant-detail .restaurant-content .restaurant-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;
	}

	.restaurant-detail .empty-block {
		height: 20rpx;
		background-color: #ecf1f4;
	}

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

	.restaurant-detail .restaurant-content .nearby-type {
		padding: 0 16rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-right: 10rpx;

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

	.restaurant-detail .restaurant-content .nearby-type.active {
		color: #dfbe6e;
		background: rgba(223, 190, 110, 0.2);
	}

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

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

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

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

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

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

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

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

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

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

	.restaurant-detail .restaurant-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;
	}

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

	.restaurant-detail .restaurant-content .restaurant-base {
		width: 750rpx;
		position: absolute;
		top: -50px;
		z-index: 5;
	}

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

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

	.restaurant-detail .restaurant-content .restaurant-base .restaurant-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;
	}

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

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

	.restaurant-detail .restaurant-content .restaurant-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;
	}

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

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

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

	.restaurant-detail .restaurant-content .restaurant-base .head .op-box {
		margin-top: -160rpx;
	}

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

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

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

	.restaurant-detail .restaurant-content .restaurant-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;
	}

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

	.restaurant-detail .restaurant-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;
	}

	.restaurant-detail .media {
		height: 407rpx;
		position: relative;
		z-index: 1;
	}

	.restaurant-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, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
	}

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

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

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

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

	.restaurant-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;
	}

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

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

	.restaurant-detail .media .media-info .mi-left {
		flex: 1;
	}

	.name-ali {
		// #ifdef MP-ALIPAY
		box-sizing: border-box;
		padding-left: 30rpx;
		// #endif
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
