<template>
	<view class="hotel-list">
		<view class="search-box">
			<view class="city-box" @click="showCity">
				<u-icon name="location" :size="28" color="#000000" style="margin-right: 8rpx"></u-icon>
				{{ city }}
			</view>
			<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>
		<u-popup v-model="showCityList" mode="bottom" :border-radius="40" :safe-area-inset-bottom="true">
			<Address @confirm="confirmCity" :list="cityList" />
		</u-popup>
		<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 v-model="msg.District" :title="optionsTitle[2]" :options="DistrictOptions" @change="changeDistrict">
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="no-data" v-if="restaurantList.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>
		<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" v-if="restaurantList.length > 0">
			<view v-for="(item, index) in restaurantList" :key="index">
				<restaurant-good :restaurantGoodsItem="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";
	import Address from "./components/address/smh-address-indexed.vue";
	export default {
		data() {
			return {
				city: "成都",
				msg: {
					pageIndex: 1,
					pageSize: 10,
					Name: "",
					OrderBy: 0,
					FoodTypeIds: 0,
					DiningPriceType: 0,
					City: 0,
					District: 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: [],
				showCityList: false,
				cityList: [],
				DistrictOptions: [{
					label: "不限",
					value: 0
				}],
			};
		},
		components: {
			rangeSlider,
			restaurantGood,
			restaurantType,
			Address,
		},
		onLoad(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();
			this.getCity();
		},
		created() {
			uni.setNavigationBarTitle({
				title: "美食",
			});
		},
		methods: {
			orderChange(val) {
				this.msg.pageIndex = 1;
				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[3] = name;
			},
			resetPrice() {
				this.optionsTitle[3] = "筛选";
				this.msg.DiningPriceType = 0;
				this.msg.pageIndex = 1;
				this.getFoodList();
				this.closeDropdown();
			},
			surePrice() {
				this.msg.pageIndex = 1;
				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.msg.pageIndex = 1;
				this.getFoodList();
				this.closeDropdown();
			},
			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();
				}
			},
			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,
				});
			},
			showCity() {
				this.showCityList = true;
			},
			confirmCity(val) {
				this.showCityList = false;
				this.msg.City = val.ID;
				this.city = val.Name;
				this.msg.District = 0;
				this.optionsTitle[2] = "区域";
				this.msg.pageIndex = 1;
				this.getFoodList();
			},
			getCity() {
				this.request2({
						url: "/api/AppletDining/GetDiningDestination",
						data: {
							ID: 0
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.cityList = [];
							res.data.map((i) => {
								let initial = i.PinYin.slice(0, 1);

								let find = this.cityList.filter((e) => {
									return e.letter == initial;
								});
								if (find.length > 0) {
									find[0].citylist.push(i);
								} else {
									let obj = {
										letter: initial,
										citylist: [i],
									};
									this.cityList.push(obj);
								}
							});
						}
					},
					(err) => {}
				);
			},
			getDistrict(id) {
				this.request2({
						url: "/api/AppletDining/GetDiningDestination",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.DistrictOptions = [{
								label: "不限",
								value: 0
							}];
							res.data.map((i) => {
								let obj = {
									label: i.Name,
									value: i.ID,
								};
								this.DistrictOptions.push(obj);
							});
						}
					},
					(err) => {}
				);
			},
			changeDistrict(val) {
				this.msg.pageIndex = 1;
				this.getFoodList();
				let res = this.DistrictOptions.filter((i) => {
					return i.value == val;
				});
				this.optionsTitle[2] = res[0].label;
			},
		},
	};
</script>

<style scoped>
	/deep/.u-dropdown-item scroll-view {
		height: 100vh !important;
	}

	.city-box {
		width: 120rpx;
		height: 40rpx;
		padding: 0rpx 20rpx 8rpx 0rpx;
		text-align: center;
		border-right: 1px solid #e2e2e2;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		align-items: center;
	}

	/deep/.u-flex {
		justify-content: center;
	}

	.hotel-rate-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.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;
		margin-top: 29rpx;
	}

	.hotel-rate:last-child {
		margin-right: 0;
	}

	.hotel-rate.active {
		background: #111111;
		color: #ffffff;
	}

	.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;
	}
</style>
<style lang="scss" scoped>
	.no-data {
		.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;
		}
	}
</style>
