<template>
	<view class="restaurant-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="407" :interval="5000" :border-radius="0"
					@click="openPicture" name="picUrl" v-if="active==1"></u-swiper>
				
				<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="restaurant-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;">{{details.Name}}</view>
			</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,.1);">
						<view class="loc-left">
							<view class="loc-name">
								<u-icon name="clock" size="28" />
								<text style="margin-left: 14rpx;">营业时间 {{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>
						<uni-calendar ref="calendar" :insert="true" :selected="calendar" @confirm="confirm"></uni-calendar>
					</view>
					
					
					<ul class="title-style-one hr">
						<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 v-for="(item,index) in details.resultMealList" :key="index" class="room-list">
							<package-good :data="item"></package-good>
							<!-- <package-good-test></package-good-test> -->
						</view>
					</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-restaurant></recommed-restaurant>
						<recommed-restaurant></recommed-restaurant>
					</view> -->
				</view>
				<view class="">
					
				</view>
				<!-- <u-popup v-model="showTimePopup" mode="bottom" border-radius="40" length="70%" :safe-area-inset-bottom="true" > -->
					
				<!-- </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 recommedRestaurant from './components/recommed-restaurant.vue';
	import uniCanlendar from "./components/uni-calendar/uni-calendar.vue"
	export default {
		data() {
			return {
				imgsList: [{ 
						picUrl: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622459632000_216.png"
					},
					{
						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,
				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,
				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
					}
				],
				calendar: [{
					date: "",
					info: ''
				}], 
			}
		},
		components: {
			packageGood,
			packageGoodTest,
			nearGood,
			recommedRestaurant,
			uniCanlendar
		},
		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
			// let d = new Date();
			let nextDate = new Date(d.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
		},
		onLoad(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;
		},
		methods: {
			chooseDate(){
				// this.showTimePopup=true
				// this.$refs.calendar.open();
				console.log(this.$refs,this)
			},
			confirm(e) {
				this.Date = e.fulldate
				this.calendar[0].date = e.fulldate
				// this.getDetailByDate();
				this.$forceUpdate()
			},
			// opencalendar(){
			// 	 this.$refs.calendar.open();
			// },
			goMap(name, lon, lat) {
				let newLon=parseFloat(lon)
				let newLat=parseFloat(lat)
				wx.openLocation({
				  latitude:newLat,
				  longitude:newLon,
				  scale: 18,
				  name,
				  // address:"武侯区科华中路 2 号",
				  success:(res)=>{
					  // console.log(res)
				  },
				  fail: (err) => {
				  	// console.log(err)
				  }
				})
			},
			openPicture(){
				uni.navigateTo({
					url:"/pages/restaurant/picture"
				})
			},
			openDescription(){
				uni.navigateTo({
					url:"/pages/restaurant/description"
				})
			},
			
			// 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.request2({
						url: '/api/AppletDining/GetFollowDining',
						data: {
							ID: this.details.FollowId,
							SourceId:this.details.ID
						}
					},
					res => {
						if (res.resultCode == 1) {
							this.getDetail()
						}
					}
				);
			},
			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;
			},
			//获取详情
			getDetail() {
				this.request2({
						url: '/api/AppletDining/GetDiningDetails',
						data: {
							ID: this.ID
						}
					},
					res => {
						if (res.resultCode == 1) {
							res.data.FoodTag = res.data.FoodTag.split(',')
							res.data.GeographicTag = res.data.GeographicTag.split(',')
							this.details = res.data;
						}
					}
				);
			},
		},
	}
</script>

<style scoped>
	.chooseDate{
		/* width: 150px; */
		/* display: inline-block; */
		height: 60rpx;
		background-color: #ECF1F4;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
		line-height: 58rpx;
		padding: 0 10rpx;
	}
	.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 .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;
	}

	.restaurant-detail .restaurant-content .detail-box .nearby-type.active {
		color: #DFBE6E;
		background: rgba(223, 190, 110, .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 .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: -175rpx;
	}
	.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, .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, .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, .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, .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, .35);
		top: 287rpx;
		bottom: 0;
		left: 0;
		right: 0;
		padding:30rpx 50rpx;
	}

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