<template>
	<view class="hotel-list">
		<view class="search-box">
			<view class="hotel-city" @click="showCity">
				<u-icon name="location" :size="24" color="#000000" style="margin-right: 8rpx"></u-icon>
				{{ city }}
			</view>

			<view class="date" @click="chosenDate">
				<view>住 {{ startDay }}</view>
				<view>离 {{ endDay }}</view>
			</view>
			<view class="days">{{ day }}晚</view>
			<view style="width: 1px; flex: 1">
				<u-search placeholder="关键字/位置/品牌/酒店名" v-model="searchObj.Name" input-align="left"
					:value="searchObj.Name" text-color="#111" bg-color="rgba(0,0,0,0)" @change="research()"
					:show-action="false"></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="searchObj.OrderByType" :title="optionsTitle[0]" :options="options1"
					@change="change">
				</u-dropdown-item>
				<u-dropdown-item v-model="searchObj.District" :title="optionsTitle[1]" :options="DistrictOptions"
					@change="changeDistrict">
				</u-dropdown-item>
				<!-- <u-dropdown-item v-model="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></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
              >
              <text style="font-size: 24rpx; color: #111">{{
                tempRateAndPrice.priceText
              }}</text>
            </view>
            <view
              style="
                display: flex;
                align-items: center;
                color: #999999;
                margin-top: 15rpx;
              "
            >
              <view style="font-size: 24rpx; flex: 1">￥0</view>
              <view
                style="
                  font-size: 24rpx;
                  flex: 1;
                  color: #333;
                  text-align: right;
                "
                >￥1000以上</view
              >
            </view>
            <range-slider
              ref="rangeslider"
              :width="690"
              :height="80"
              :step="10"
              :liveMode="true"
              background-color="#E2E2E2"
              :block-size="40"
              active-color="#111111"
              min="0"
              max="1000"
              @rangechange="rangechange4"
              :values="tempRateAndPrice.price"
            ></range-slider>
            <view style="margin: 20rpx 0 29rpx 0">
              <text style="font-size: 28rpx; color: #111; font-weight: 800"
                >星级</text
              >
            </view>
            <view class="hotel-rate-box">
              <view
                v-for="(x, i) in rates"
                :key="i"
                class="hotel-rate"
                :class="{ active: tempRateAndPrice.rate.indexOf(x.Id) != -1 }"
                @click="setHotelRate(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>
		</view>
		<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="95%" :safe-area-inset-bottom="true">
			<canlendar @finish="chosenDateResult"></canlendar>
		</u-popup>
		<!-- <view class="morewhere">
      <view
        v-for="(x, i) in searchObj.TagList"
        class="item"
        @click="chosenMorewhere(x)"
        :class="{ active: x.IsCheck == 1 }"
        >{{ x.Name }}</view
      >
    </view> -->
		<view class="no-data" v-if="HotelList.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% - 224rpx); padding-bottom: 0px"
			v-if="HotelList.length > 0">
			<hotel-good :HotelList="HotelList" :dayObj="dayObj" :searchObj="searchObj"></hotel-good>
			<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
				:margin-bottom="20" bg-color="#F5F5F5" color="#111" />
		</scroll-view>
	</view>
</template>

<script>
	import rangeSlider from "./components/range-slider.vue";
	import canlendar from "./components/time/index";
	import hotelGood from "./components/hotel-good.vue";
	import Address from "./components/address/smh-address-indexed.vue";
	export default {
		data() {
			return {
				city: "成都",
				cityList: [],
				showCityList: false,
				showTimePopup: false,
				searchObj: {
					pageIndex: 1,
					pageSize: 15,
					Name: "", //关键字
					StartPrice: 0,
					EndPrice: 1000,
					QStartDate: "",
					QEndDate: "",
					OrderByType: "1", //排序类型
					QStars: "", //星级
					TagList: [], //查询标签
					City: 262, //市
					District: 0, //区
				},
				day: 0,
				startDay: "",
				endDay: "",
				HotelList: [], //酒店数据
				tempRateAndPrice: {
					price: {},
					priceText: "不限",
					rate: [],
				},
				optionsTitle: ["推荐排序", "区域", "价格/星级", "筛选"],
				rates: [],
				options1: [], //推荐排序数据
				options2: [{
						label: "不限",
						value: -1,
					},
					{
						label: "宝镜岩",
						value: 1,
					},
					{
						label: "盆景滩",
						value: 2,
					},
					{
						label: "芦苇海",
						value: 3,
					},
					{
						label: "五彩池",
						value: 4,
					},
					{
						label: "镜海",
						value: 5,
					},
					{
						label: "犀牛海",
						value: 6,
					},
					{
						label: "诺日朗瀑布",
						value: 7,
					},
					{
						label: "火花海",
						value: 8,
					},
				],
				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",
				page_count: 0,
				dayObj: {},
				DistrictOptions: [{
					label: "不限",
					value: 0
				}],
			};
		},
		components: {
			rangeSlider,
			canlendar,
			hotelGood,
			Address,
		},
		onLoad(options) {
			if (options && options.Name) {
				this.searchObj.Name = options.Name;
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: "酒店",
			});
			let d1 = new Date();
			let d = new Date();
			let d2 = new Date(d.setDate(d.getDate() + 1));
			let startWeek = "周" + "日一二三四五六".charAt(new Date().getDay());
			let endWeek = "周" + "日一二三四五六".charAt(new Date().getDay() + 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,
				startWeek: startWeek,
				endWeek: endWeek,
			};
			this.dayObj = obj;
			uni.setStorage({
				key: "Time",
				data: JSON.stringify(obj),
			});
			this.searchObj.QStartDate = obj.start;
			this.searchObj.QEndDate = obj.end;
			this.startDay = obj.startDay;
			this.endDay = obj.endDay;
			this.day = obj.day;
			this.getSearchCondition();
			this.getList();
			this.getCity();
			this.getDistrict();
		},
		methods: {
			showCity() {
				this.showCityList = true;
			},
			confirmCity(val) {
				this.searchObj.City = val.ID;
				this.showCityList = false;
				this.city = val.Name;
				//this.getDistrict(val.ID);
				this.getDistrict();
				this.searchObj.District = 0;
				this.searchObj.pageIndex = 1;
				this.optionsTitle[1] = "区域";
				this.getList();
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
			},
			research() {
				this.searchObj.pageIndex = 1;
				this.getList(1);
			},
			lower(e) {
				// TODO: 滚动到了底部，实现翻页加载
				if (this.searchObj.pageIndex < this.page_count) {
					this.status = "loading";
					this.searchObj.pageIndex++;
					this.getList();
				} else {
					this.status = "nomore";
				}
			},
			chosenMorewhere(obj) {
				if (obj.IsCheck == 0) {
					obj.IsCheck = 1;
				} else {
					obj.IsCheck = 0;
				}
				this.research();
			},
			chosenDateResult(obj) {
				this.searchObj.QStartDate = obj.start;
				this.searchObj.QEndDate = obj.end;
				this.startDay = obj.startDay;
				this.endDay = obj.endDay;
				this.day = obj.day;
				this.dayObj = obj;
				this.research();
				this.showTimePopup = false;
			},
			chosenDate() {
				this.showTimePopup = true;
			},
			setHotelRate(rateId) {
				let temp = this.tempRateAndPrice.rate.indexOf(rateId);
				if (temp == -1) {
					this.tempRateAndPrice.rate.push(rateId);
				} else {
					this.tempRateAndPrice.rate.splice(temp, 1);
				}
			},
			resetPrice() {
				this.optionsTitle[2] = "价格/星级";
				var obj = this.$refs.rangeslider;
				obj.progressBarLeft = 0;
				obj.progressBarWidth = obj._getMaxLength();
				obj.minBlockLeft = 0;
				obj.maxBlockLeft = obj._getMaxLength();
				this.tempRateAndPrice = {
					price: {
						minValue: 0,
						maxValue: 1000,
					},
					priceText: "不限",
					rate: [],
				};
				this.closeDropdown();
				this.searchObj.StartPrice = 0;
				this.searchObj.EndPrice = 1000;
				this.research();
			},
			surePrice() {
				let result = "";
				if (this.tempRateAndPrice.rate.length > 0) {
					this.rates.forEach((x) => {
						if (this.tempRateAndPrice.rate.indexOf(x.value) != -1) {
							result += x.label + ",";
						}
					});
				}
				if (this.tempRateAndPrice.priceText != "不限") {
					result += this.tempRateAndPrice.priceText;
				}
				result = result == "" ? "价格/星级" : result;
				this.optionsTitle[2] = result;
				this.$forceUpdate();
				this.closeDropdown();
				this.research();
			},
			rangechange4(e) {
				this.searchObj.StartPrice = e.minValue;
				this.searchObj.EndPrice = e.maxValue;
				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
				}
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change(index) {
				let temp = this.options1.find((x) => {
					if (x.value == index) {
						return x;
					} else {
						return false;
					}
				});
				this.optionsTitle[0] = temp.label;
				this.research();
			},
			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] = "附近";
				}
			},
			//获取查询条件
			getSearchCondition() {
				this.request2({
						url: "/api/Hotel/GetHotelQuery",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							let tempObj = res.data;
							this.options1 = [];
							this.rates = [];
							if (tempObj && tempObj.OrderByList.length > 0) {
								tempObj.OrderByList.forEach((x) => {
									let obj = {
										label: x.Name,
										value: x.Id,
									};
									this.options1.push(obj);
								});
							}
							if (tempObj && tempObj.TagList) {
								this.searchObj.TagList = tempObj.TagList;
							}
							if (tempObj && tempObj.StarList) {
								this.rates = tempObj.StarList;
							}
						}
					},
					(err) => {}
				);
			},
			//获取列表数据
			getList(type) {
				this.searchObj.QStars = this.tempRateAndPrice.rate.toString();
				if (type == 1) {
					this.HotelList = [];
				}
				this.request2({
						url: "/api/Hotel/AppGetHotelPage",
						data: this.searchObj,
					},
					(res) => {
						if (res.resultCode == 1) {
							if (this.searchObj.pageIndex === 1) {
								this.HotelList = res.data.pageData;
							} else {
								this.HotelList = this.HotelList.concat(res.data.pageData);
							}
							this.page_count = res.data.pageCount;
						}
					}
				);
			},
			getCity() {
				this.request2({
						url: "/api/Hotel/GetHotelDestination",
						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],
									};
									// obj.citylist[0]=i
									this.cityList.push(obj);
								}
							});
						}
					},
					(err) => {}
				);
			},
			getDistrict(id) {
				this.request2({
						url: "/api/Hotel/GetHotelDestination",
						// data: {
						// 	ID: id
						// },
						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.searchObj.pageIndex = 1;
				this.getList();
				let res = this.DistrictOptions.filter((i) => {
					return i.value == val;
				});
				this.optionsTitle[1] = res[0].label;
			},
		},
	};
</script>

<style lang="scss" scoped>
	/deep/.u-dropdown-item scroll-view{
		height: 100vh !important;
	}
	/deep/.u-flex {
		justify-content: center;
	}

	.hotel-list {
		height: 100vh;
	}

	.hotel-list .hotel-city {
		width: 105rpx;
		height: 40rpx;
		padding: 0rpx 10rpx 8rpx 0rpx;
		margin-right: 20rpx;
		text-align: center;
		/* color: #DFBE6E; */
		border-right: 1px solid #e2e2e2;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		align-items: center;
	}

	.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: 82rpx;
		height: 50rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #111111;
		line-height: 29rpx;
		margin-top: -6px;
	}

	.hotel-list .search-box .days {
		height: 40rpx;
		padding: 8rpx 20rpx 8rpx 10rpx;
		color: #dfbe6e;
		border-right: 1px solid #e2e2e2;
		font-size: 24rpx;
	}

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

	.hotel-rate {
		width: 160rpx;
		height: 60rpx;
		background: #ecf1f4;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #999999;
		line-height: 60rpx;
		margin-right: 15rpx;
		text-align: center;
	}

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

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

	.hotel-list .morewhere {
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.hotel-list .morewhere .item {
		padding: 0 20rpx;
		height: 36rpx;
		line-height: 36rpx;
		background: #ecf1f4;
		border-radius: 8rpx;
		margin-right: 26rpx;
		font-size: 22rpx;
		color: #999999;
		font-weight: 400;
		flex-shrink: 0;
	}

	.hotel-list .morewhere .item.active {
		background: #111111;
		color: #ffffff;
	}

	.hotel-list .morewhere .item:last-child {
		margin-right: 0;
	}

	.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>
