<template>
	<view class="hotel-list">
		<view class="search-box">
			<view style="width: 1px; flex: 1;">
				<u-search placeholder="美食名称" v-model="msg.Name" input-align="left"
					text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false" clearabled  @search="searchList" @clear="searchList"></u-search>
			</view>
		</view>
		<view>
			<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
				<u-dropdown-item v-model="msg.OrderBy" :title="optionsTitle[0]" :options="options1" @change="getFoodList">
				</u-dropdown-item>
				
				<u-dropdown-item v-model="msg.FoodTypeIds" :title="optionsTitle[1]" :options="classOptions" @change="getFoodList">
				</u-dropdown-item>
				<u-dropdown-item :title="optionsTitle[2]">
					<view class="slot-content" style="padding: 30rpx;background-color: #FFF;">
					<!-- 	<view>
							<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">餐厅类型</text>
						</view>
						<view class="hotel-rate-box">
							<view v-for="(x,i) in options2" :key="i" class="hotel-rate" :class="{'active':tempRateAndPrice.types.indexOf(x.value)!=-1}" @click="setRestaurant(x.value)">{{x.label}}</view>
						</view> -->
						<view style="margin-top: 20rpx;">
							<text style="font-size: 28rpx;color:#111;font-weight: 800;">价格</text>
						</view>
						<view class="hotel-rate-box">
							<!-- <view v-for="(x,i) in rates" class="hotel-rate" :class="{'active':tempRateAndPrice.rate.indexOf(x.ID)!=-1}" @click="setRestaurantPrice(x.ID)">{{x.Name}}</view> -->
							<view v-for="(x,i) in rates" class="hotel-rate" :class="{'active':msg.DiningPriceType===x.ID}" @click="setRestaurantPrice(x.ID)">{{x.Name}}</view>
						</view>
						<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
							<view style="flex:1;margin-right: 30rpx;">
								<u-button :custom-style="btnStyle" @click="resetPrice">重置</u-button>
							</view>
							<view style="flex:1;">
								<u-button :custom-style="btnStyle2" @click="surePrice">完成</u-button>
							</view>
						</view>
					</view>
				</u-dropdown-item>
				<!-- <u-dropdown-item :title="optionsTitle[3]" @change="change2">
					<view class="slot-content">
						<restaurant-type @sure-type="sureType" :current="currentTypeObj"></restaurant-type>
					</view>
				</u-dropdown-item> -->
			</u-dropdown>
		</view>
		<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
		 @scroll="scroll" style="height: calc(100% - 168rpx); padding-bottom: 0px;">
		 <view v-for="(item,index) in restaurantList" :key="index">
		 	<restaurant-good :data="item" @confirm="confirm(item.ID)"></restaurant-good>
		 </view>
		 
		<u-loadmore
		   :status="status"
		   :load-text="loadText"
		   :font-size="24"
		   :margin-top="20"
		   :margin-bottom="20"
		   bg-color="#FFF"
		 />
		  
		</scroll-view>
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
		  <u-loading mode="flower" size="48"></u-loading>
		  <Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
		</view>
	</view>
</template>

<script>
	import rangeSlider from "./components/range-slider.vue"
	import restaurantGood from './components/restaurant-good.vue';
	import restaurantType from './components/restaurant-type.vue';
	export default {
		data() {
			return {
				msg:{
					pageIndex:1,
					pageSize:10,
					Name:"",
					OrderBy:0,
					FoodTypeIds:0,
					DiningPriceType:0,
				},
				page_count:1,
				status: "loadmore",
				restaurantList:[],//餐厅列表
				searchObj:{
					Name:"",
					OrderBy:0,
					rtype:-1,
					rateAndPrice:{
						types:[-1],
						priceText:"不限",
						rate:[-1]
					}
				},
				tempRateAndPrice:{
					rate:[-1],
					types:[-1]
				},
				optionsTitle: [
					"推荐排序",
					"分类",
					"筛选",
					"菜系"
				],
				rates: [],//价格列表
				options1: [
					{
						label: '不限',
						value: 0,
					},
					{
						label: '人均最高',
						value: 1,
					},
					{
						label: '人均最低',
						value: 2,
					},
					
				],
				options2: [
					{
						label: '不限',
						value: -1,
					},
					{
						label: '中式料理',
						value: 1,
					},
					{
						label: '日式料理',
						value: 2,
					},
					{
						label: '欧美料理',
						value: 3,
					},
					{
						label: '泰式料理',
						value: 4,
					},
					{
						label: '韩式料理',
						value: 5,
					}
				],
				classOptions:[],
				btnStyle:{
					borderRadius: '16rpx',
					color: '#111',
					fontSize: '30rpx',
					width: '100%',
					border:"1px solid #111",
					background:"#FFF"
				},
				btnStyle2:{
					borderRadius: '16rpx',
					color: '#fff',
					fontSize: '30rpx',
					width: '100%',
					background:"#111"
				},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多商品了",
				},
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				showLoading:false,
				status: "loadmore",
				currentTypeObj:{
					Id:-1,
					active:0
				}
			}
		},
		components: {
			rangeSlider,
			restaurantGood,
			restaurantType
		},
		created() {
			uni.setNavigationBarTitle({
				title: "美食",
			});
			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: `${d1.getMonth()+1}-${d1.getDate()}`,
				endDay: `${d2.getMonth()+1}-${d2.getDate()}`,
				day: 1
			}
			uni.setStorage({
				key: 'Time',
				data: JSON.stringify(obj)
			})
			this.searchObj.date=obj
			this.getFoodType();
			this.getPriceEnum();
			this.getFoodList();
		},
		methods: {
			searchList(){
				this.msg.pageIndex=1
				this.getFoodList();
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
			},
			lower(e) {
			  if (this.msg.pageIndex < this.page_count) {
				    this.msg.pageIndex++;
					this.status = "loading";
					this.getFoodList();
			  } else {
					this.status = "nomore";
			  }
			},
			setRestaurantPrice(rateId){
				this.msg.DiningPriceType=rateId
				// if(rateId==-1){
				// 	this.tempRateAndPrice.rate=[-1]
				// }else{
				// 	if(this.tempRateAndPrice.rate.indexOf(-1)!=-1){
				// 		this.tempRateAndPrice.rate.splice(this.tempRateAndPrice.rate.indexOf(-1),1)
				// 	}
				// 	let temp=this.tempRateAndPrice.rate.indexOf(rateId)
				// 	if(temp==-1){
				// 		this.tempRateAndPrice.rate.push(rateId)
				// 	}else{
				// 		this.tempRateAndPrice.rate.splice(temp,1)
				// 	}
				// }
			},
			// setRestaurant(typeId){
			// 	if(typeId==-1){
			// 		this.tempRateAndPrice.types=[-1]
			// 	}else{
			// 		if(this.tempRateAndPrice.types.indexOf(-1)!=-1){
			// 			this.tempRateAndPrice.types.splice(this.tempRateAndPrice.types.indexOf(-1),1)
			// 		}
			// 		let temp=this.tempRateAndPrice.types.indexOf(typeId)
			// 		if(temp==-1){
			// 			this.tempRateAndPrice.types.push(typeId)
			// 		}else{
			// 			this.tempRateAndPrice.types.splice(temp,1)
			// 		}
			// 	}
			// },
			resetPrice(){
				// this.optionsTitle[2]="筛选"
				// this.searchObj.rateAndPrice={
				// 	types:[-1],
				// 	priceText:"不限",
				// 	rate:[-1]
				// }
				this.msg.DiningPriceType=0
				this.getFoodList();
				this.closeDropdown();
			},
			surePrice(){
				// let result=""
				// if(this.tempRateAndPrice.types.length>0){
				// 	this.options2.forEach(x=>{
				// 		if(this.tempRateAndPrice.types.indexOf(x.value)!=-1){
				// 			result+=x.label+","
				// 		}
				// 	})
				// }
				// if(this.tempRateAndPrice.rate.length>0){
				// 	this.rates.forEach(x=>{
				// 		if(this.tempRateAndPrice.rate.indexOf(x.value)!=-1){
				// 			result+=x.label+","
				// 		}
				// 	})
				// }
				
				// result=result==""?"筛选":result
				// console.log(296,result)
				// this.optionsTitle[2]=result
				// this.$forceUpdate() 
				// this.searchObj.rateAndPrice=this.tempRateAndPrice
				// this.msg.DiningPriceType=this.tempRateAndPrice.rate.toString();
				this.getFoodList();
				this.closeDropdown();
			},
			// sureType(item){
			// 	this.searchObj.rtype=item.Id
			// 	this.optionsTitle[1]=item.Id==-1?'菜系':item.Name
			// 	this.closeDropdown();
			// 	item.newTimespan=this.rand(1000,9999)
			// 	this.currentTypeObj=item
			// },
			// rangechange4(e){
			// 	if(e.minValue==0){
			// 		if(e.maxValue==1000){
			// 			this.tempRateAndPrice.priceText="不限"
			// 		}else{
			// 			this.tempRateAndPrice.priceText=`￥${e.maxValue}以下`
			// 		}
			// 	}else if(e.maxValue==1000){
			// 		this.tempRateAndPrice.priceText=`￥${e.minValue}以上`
			// 	}else{
			// 		this.tempRateAndPrice.priceText=`￥${e.minValue} - ￥${e.maxValue}之间`
			// 	}
			// },
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
				if(index==2){
					this.tempRateAndPrice=this.searchObj.rateAndPrice
				}else if(index==1){
					
					this.currentTypeObj.newTimespan=this.rand(1000,9999)
					this.$forceUpdate() 
					console.log(this.currentTypeObj.newTimespan)
				}
			},
			rand(min,max) {
				return Math.floor(Math.random()*(max-min))+min;
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change(index) {
				// let temp = this.options1.find(x => {
				// 	if (x.ID == index) {
				// 		return x
				// 	} else {
				// 		return false
				// 	}
				// })
				// console.log(index,temp)
				// this.optionsTitle[0] = temp.Name
			},
			change2(index){
				// if(index!=-1){
				// 	let temp = this.options2.find(x => {
				// 		if (x.value == index) {
				// 			return x
				// 		} else {
				// 			return false
				// 		}
				// 	})
				// 	this.optionsTitle[1] = temp.label
				// }else{
				// 	this.optionsTitle[1] = "附近"
				// }
			},
			// 获取餐食类型
			getFoodType(){
				this.request2({
						url: '/api/AppletDining/GetFoodType',
						data: {
							ClassType:0
						}	
					},
					res => {
						if(res.resultCode===1){
							this.typeList=res.data
							this.classOptions=[{
								label: "不限",
								value: 0,
							}]
							res.data.map(i=>{
								let obj={
									label: i.Name,
									value: i.ID,
								}
								this.classOptions.push(obj)
							})
						}
						
					}
				);
			},
			// 获取餐食价格枚举
			getPriceEnum(){
				this.request2({
						url: '/api/AppletDining/GetDiningPriceType',
						data: {}	
					},
					res => {
						if(res.resultCode===1){	
							this.rates=res.data
						}
						
					}
				);
			},
			// 获取餐食列表
			getFoodList(){
				// this.msg.DiningPriceType=this.searchObj.rateAndPrice.join(",")
				this.request2({
						url: '/api/AppletDining/GetDiningPage',
						data: this.msg
					},
					res => {
						if(res.resultCode===1){	
							this.page_count = res.data.pageCount;
							res.data.pageData.forEach(item=>{
								item.FoodTag=item.FoodTag.split(',')
								item.GeographicTag=item.GeographicTag.split(',')
							})
							if(this.msg.pageIndex==1){
								this.restaurantList=res.data.pageData;
							}else if(this.msg.pageIndex>1){
								this.restaurantList=[...this.restaurantList,...res.data.pageData];
							}
							
							if (this.page_count == 1) {
							  this.status = "nomore";
							}
						}
					}
				);
			},
			confirm(id){
				uni.navigateTo({
					url:"/pages/restaurant/detail?id="+id
				})
			}
		},
	}
</script>

<style scoped>
	/deep/.u-flex{
		justify-content: center;
	}
	.hotel-list {
		height: 100vh;

	}

	.hotel-list .search-box {
		height: 88rpx;
		background: #ECF1F4;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		padding: 19rpx 30rpx;
		margin: 0 30rpx;
	}

	.hotel-list .search-box .date {
		width: 104rpx;
		height: 50rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #111111;
		line-height: 29rpx;
	}

	.hotel-list .search-box .days {
		height: 40rpx;
		padding: 8rpx 30rpx 8rpx 19rpx;
		color: #DFBE6E;
		border-right: 1px solid #E2E2E2;
		font-size: 24rpx;
	}
	.hotel-rate-box{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.hotel-rate{
		width: 215rpx;
		height: 60rpx;
		background: #ECF1F4;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #999999;
		line-height: 60rpx;
		margin-right: 15rpx;
		text-align: center;
		flex-shrink: 0;
		margin-top: 29rpx;
	}
	.hotel-rate:last-child{
		margin-right: 0;
	}
	.hotel-rate.active{
		background: #111111;
		color: #FFFFFF;
	}
</style>
