<template>
	<view class="topSearch">
		<uni-search-bar style="width: 700rpx;" @clear="onclear()" @confirm="getData()" clearButton="auto" cancelButton="none" v-model="queryParam.name"></uni-search-bar>
	</view>
	<view class="hotel" v-for="h in restaurantList" :key="h.id" @click="goOrder(h)">
		<swiper class="activeSwiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(pic,index) in h.photosArr" :key="index">
				<image class="cover" mode="aspectFill" :src="pic"></image>
			</swiper-item>
		</swiper>

		<view class="info">
			<view class="name">
				<view class="nn">{{h.name}}</view>
				<view class="price">¥
					<text>{{h.price || 0}}</text>
				起</view>
			</view>
			<view class="add"> 
				<uni-icons type="location" size="16"></uni-icons>
				{{h.addName}}
			</view>
		</view>
	
	</view>
	<view class="nodata" v-if="restaurantList.length==0">
		<image mode="aspectFit" src="/static/nodata.png"></image>
		<text> 还没有饭店 </text>
	</view>


		<uni-popup ref="detailPopup" background-color="#fff" class="popupMation" type="bottom">
			<view class="centertitle">{{restaurantInfo.name}}</view>
			<view class="detailbody">
				<view class="venuePics" @click="clickImg" v-show="restaurantInfo.photosArr">
					<image v-for="(p,index) in restaurantInfo.photosArr" mode="aspectFill" :key="index" :src="p">

					</image>
					<text> 门店({{restaurantInfo.photosArr?.length}}）</text>
				</view>
				
				<view v-html="restaurantInfo.introduction"></view>
			</view>
		</uni-popup>
	

</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import * as hotel from '@/common/hotel.js';
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	const data = reactive({
		form: {},
		restaurantList: [],
		detailPopup: null,
		restaurantInfo: {},
		queryParam:{
			name:''
		}
	})
	const {
		form,
		startlist,
		restaurantList,
		detailPopup,
		restaurantInfo,queryParam
	} = toRefs(data);
	let activeId = null
	onLoad((option) => {
		console.log(option)
		activeId = option.activeId
	})
	onShow(() => {
		getData()
	})

	function getData() {
		uni.showLoading({
			title: '加载中'
		});
		hotel.getActivityRestaurantList({
			activityId: activeId,name:queryParam.value.name
		}).then(res => {
			restaurantList.value = res.rows
			for (const r of restaurantList.value) {
				r.photosArr = r.photos.split(',')
			}
			uni.hideLoading();
		})
	}

	function goOrder(r) {
		var obj = encodeURIComponent(JSON.stringify(r))
		let path = `/pages_hotel/eat/menu?id=${r.id}&detail=${obj}&activeId=${activeId}`;
		uni.navigateTo({
			url: path
		});
	}
	function onclear(){
		queryParam.value.name = ''
		getData()
	}
	function showDetail(r) {
		restaurantInfo.value = r
		detailPopup.value.open()
	}

	function clickImg() {
		uni.previewImage({
			urls: restaurantInfo.value.photosArr,
			// current: 0,
			success: function(res) {
				console.log('success', res)
			},
			fail: function(res) {
				console.log('fail', res)
			},
			complete: function(res) {
				console.log('complete', res)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.pd20 {
		padding: 20rpx;
	}

	.cover {
		width: 700rpx;
		height: 393rpx;
		border-radius: 15rpx;
		margin: auto;
		display: block;
	}

	swiper {
		height: 393rpx;
	}

	.whitebg {
		background-color: #fff;
		margin-bottom: 20rpx;

		.tt {
			line-height: 1;
			border-left: 4rpx solid #1EC886;
			color: #1EC886;
			padding-left: 14rpx;
		}
	}

	.roomList {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.room {
		display: flex;
		position: relative;
		padding: 20rpx 0 20rpx;
		border-bottom: 1px solid #DCDCDC;
		&:last-child{border-bottom: none;}
		.name {
			font-size: 34rpx;
		}

		.orange {
			font-size: 24rpx;
		}

		.po {
			position: absolute;
			right: 0;height: 30rpx;
			bottom: 0;top:0;margin: auto;
			display: flex;
			align-items: flex-end;
		}

		.price {
			margin-right: 10rpx;
		}
	}

	.roomCover {
		width: 160rpx;
		margin-right: 20rpx;
		height: 170rpx;
		border-radius: 15rpx;
	}

	.greenOrderBtn {
	
		color: #FFFFFF;
		font-size: 30rpx;
		
		text-align: center;
		padding: 6rpx 16rpx;

		text {
			color: #ff8124;
			font-size: 18rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			display: block;
			margin-top: 8rpx;
		}
	}

	.tagbox {
		margin: 10rpx 0 15rpx;

		text {
			border: 1rpx solid #E96E00;
			border-radius: 4rpx;
			color: #E96E00;
			font-size: 20rpx;
			padding: 0 6rpx;
			margin-right: 12rpx;
			display: inline-block;
		}
	}

	.price {
		display: flex;
		align-items: baseline;
		color: #1EC886;

		text {
			color: #1EC886;
			font-size: 55rpx;
		}
	}

	.flexinline {
		display: flex;
		font-size: 26rpx;text-overflow: ellipsis;
		color: #5E5E5E;
		margin-top: 80rpx;
		text {
			margin-right: 15rpx;
		}
	}
	.venuePics {
		position: relative;
		width: 680rpx;
		height: 370rpx;
		border-radius: 15rpx;
		overflow: hidden;
	
		image {
			width: 680rpx;
			position: absolute;
			height: 370rpx;
		}
	
		text {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
	.centertitle{text-align: center;font-size: 30rpx;padding: 40rpx 40rpx 0;}
	.detailbody{padding: 35rpx;max-height: 50vh;overflow: auto;
		img{max-width: 100%;}
		image{max-width: 100%;}
	}
	
	.topSearch{background: #fff;}
	swiper{height: 393rpx}
	.hotel{background-color: #fff;margin-bottom: 20rpx;position: relative;padding: 30rpx 0 0;
		.cover{width: 700rpx;height: 393rpx;border-radius: 15rpx;margin: auto;    display: block;}
		.info{padding: 25rpx;
			.name{    position: relative;}
			.nn{font-size: 30rpx;}
			.price{    position: absolute; right: 0; top: 0;
			text{padding: 0 10rpx;}
			}
			.tagbox{width: 76%;
				text{border: 1rpx solid #E96E00;border-radius: 4rpx;color: #E96E00;font-size: 20rpx;
				padding:0 6rpx;margin-right: 12rpx;display: inline-block;}
			}
			.add{font-size: 24rpx;color: #4C5359;margin: 12rpx 0 0;}
		}
	}
</style>