<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="orderChange">
				</u-dropdown-item>

				<u-dropdown-item :title="optionsTitle[1]">
					<view class="slot-content">
						<restaurant-type @sure-type="sureType" :current="currentTypeObj" :d="foodType">
						</restaurant-type>
					</view>
				</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)">
								{{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>
		</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
				},
				foodType: [],
			}
		},
		components: {
			rangeSlider,
			restaurantGood,
			restaurantType
		},
		onLoad(options) {
			console.log(options)
			if(options && options.Name){
				this.msg.Name = options.Name
			}
			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();
			
		},
		created() {
			uni.setNavigationBarTitle({
				title: "美食",
			});
		},
		methods: {
			orderChange(val){
				this.getFoodList();
			 	let res= this.options1.filter(i=>{return i.value==val})
				this.optionsTitle[0]=res[0].label
			},
			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,name) {
				this.msg.DiningPriceType = rateId
				this.optionsTitle[2]=name
				// 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.msg.FoodTypeIds = item.ID;
				this.optionsTitle[1]=item.Name
				if(!this.optionsTitle[1]){
					this.optionsTitle[1]="分类"
					this.msg.FoodTypeIds=0
				}
				this.getFoodList();
				this.closeDropdown();
			},
			// 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);
			},
			// 获取餐食类型
			getFoodType() {
				this.request2({
						url: '/api/AppletDining/GetFoodType',
						data: {
							ClassType: 0
						}
					},
					res => {
						if (res.resultCode === 1) {
							this.foodType = res.data
						}

					}
				);
			},
			// 获取餐食价格枚举
			getPriceEnum() {
				this.request2({
						url: '/api/AppletDining/GetDiningPriceType',
						data: {}
					},
					res => {
						if (res.resultCode === 1) {
							this.rates = res.data
						}
					}
				);
			},
			// 获取餐食列表
			getFoodList() {
				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>
