<template>
	<view class="hotel-list column" style="background: #F3F1EF;">
		<view class="hotel-listHeader">
			<hotelHeaders :title="pageTitle"></hotelHeaders>
			<hotelSearch 
			:msg="searchObj" 
			:daysObj="dayObj" 
			:isMap="1" 
			@change="change" @getItem="getItem">
			</hotelSearch>
		</view>
		<view style="height: 1px;flex: 1;overflow: hidden;">
			<view class="no-data" v-if="HotelList.length === 0&&!showLoading" style="margin-top: 200rpx;">
				<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>
			<view class="column hotelScrollBox" style="padding: 0 30rpx 0 30rpx;height:100%">
				<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true"
					:scroll-top="scrollTop" @scroll="scroll" v-if="HotelList.length > 0" class="hotelScroll">
					<view style="padding: 0 31rpx;">
						<view v-for="(item,index) in HotelList" :key="index">
							<hotel-good :item="item" :dayObj="dayObj" :searchObj="searchObj"></hotel-good>
						</view>
					</view>
					<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>
		</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";
	import hotelHeaders from "@/components/header/header";
	import hotelSearch from "./components/search.vue";
	export default {
		data() {
			return {
				pageTitle: '酒店',
				searchObj: {
					pageIndex: 1,
					pageSize: 15,
					KeyWords: "", //关键字
				},
				HotelList: [], //酒店数据
				tempRateAndPrice: {
					price: {},
					priceText: "不限",
					rate: [],
				},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多商品了",
				},
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				showLoading: false,
				status: "loadmore",
				page_count: 0,
				dayObj: {},
				mc: '',
			};
		},
		components: {
			rangeSlider,
			canlendar,
			hotelGood,
			Address,
			hotelHeaders,
			hotelSearch,
		},
		onLoad(options) {
			this.apimc = this.$uiConfig.mainColor;
			if (options && options.Name) {
				this.searchObj.KeyWords = options.KeyWords;
			}
		},
		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);

			let month1 = d1.getMonth() + 1;
			let day1 = d1.getDate();
			let Month1 = month1 > 9 ? month1 : '0' + month1;
			let Day1 = day1 > 9 ? day1 : '0' + day1;
			let month2 = d2.getMonth() + 1;
			let day2 = d2.getDate();
			let Month2 = month2 > 9 ? month2 : '0' + month2;
			let Day2 = day2 > 9 ? day2 : '0' + day2;
			var obj = {
				start: `${d1.getFullYear()}-${Month1}-${Day1}`,
				end: `${d1.getFullYear()}-${Month2}-${Day2}`,
				startDay: `${Month1}-${Day1}`,
				endDay: `${Month2}-${Day2}`,
				day: 1,
				startWeek: startWeek,
				endWeek: endWeek,
				startTime: `${d1.getFullYear()}-${Month1}-${Day1}`,
				endTime: `${d1.getFullYear()}-${Month2}-${Day2}`
			};
			this.dayObj = obj;
			uni.setStorage({
				key: "Time",
				data: JSON.stringify(obj),
			});
			this.getSearchCondition();
		},
		methods: {
			getItem(parameters, obj) {
				this.searchObj = {
					...this.searchObj,
					...parameters
				}
				this.dayObj = {
					...obj,
					startTime: `${obj.year}-${obj.startDay}`,
					endTime: `${obj.year}-${obj.endDay}`
				}
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			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();
			},
			change(item) {
				this.searchObj = {
					...this.searchObj,
					...item,
				}
				this.research();
			},
			//获取查询条件
			getSearchCondition() {
				this.request2({
						url: "/api/Hotel/GetHotelQuery",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							let tempObj = res.data;
							if (tempObj && tempObj.TagList) {
								this.searchObj.TagList = tempObj.TagList;
							}
						}
					},
					(err) => {}
				);
			},
			//获取列表数据
			getList(type) {
				if (this.showLoading) return
				uni.showLoading({
					title: "加载中",
				});
				this.showLoading = true;
				if (type == 1) {
					this.HotelList = [];
				}
				this.apipost('dmc_post_B2BAndB2CGetDidaHotelPage', this.searchObj,
					(res) => {
						if (res.resultCode == 1) {
							this.showLoading = false
							uni.hideLoading();
							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;
						}
					}, (err) => {
						this.showLoading = false
						uni.hideLoading();
						uni.showToast({
							title: err.message,
							icon: 'none',
						})
					}
				);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");

	.hotelScroll {
		height: 1px;
		flex: 1;
		border-radius: 18rpx 18rpx 0 0;
		overflow: hidden;
		background: #fff;
		padding-top: 34rpx;
	}

	/deep/.hotelScrollBox .u-dropdown-item scroll-view {
		height: 100vh !important;
	}

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

	.hotel-list {
		height: 100vh;
		overflow: hidden;
	}

	.hotel-list .hotel-city {
		height: 40rpx;
		padding: 0rpx 0 8rpx 0rpx;
		margin-right: 27rpx;
		text-align: center;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		align-items: center;
	}

	.hotel-list .search-box {
		height: 88rpx;
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 15rpx 0 15rpx 26rpx;
		margin: 0 30rpx;
	}

	.hotel-list .search-box .date {
		height: 50rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #111111;
		line-height: 29rpx;
		margin-top: -6px;
	}

	.hotel-list .search-box .date text {
		color: #757776;
		margin-right: 7rpx;
		font-size: 22rpx;
	}

	.hotel-list .search-box .days {
		height: 40rpx;
		padding: 0 19rpx 0 11rpx;
		color: #757776;
		border-right: 1px solid #E2E2E2;
		font-size: 22rpx;
	}

	.hotel-rate-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-left: 33rpx;
		padding-right: 15rpx;
	}

	.hotel-rateTetx {
		width: 50%;
		margin-bottom: 16rpx;
	}

	.hotel-rate {
		width: 336rpx;
		height: 70rpx;
		background: #E9E4E0;
		border: 2rpx solid #E9E4E0;
		border-radius: 6rpx;
		font-size: 26rpx;
		color: #080A09;
		line-height: 62rpx;
		margin-right: 15rpx;
		text-align: center;
	}

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

	.hotel-rate.active {
		color: #B99846;
		border: 2rpx solid #B99846;
	}

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

	.hotel-listHeader {
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotelBj.png') no-repeat;
		background-size: 100% auto;
	}

	.ComprehensiveSortings {}

	.ComprehensiveSortings view {
		background: #E9E4E0;
		white-space: nowrap;
		border-radius: 6rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #080A09;
		margin-right: 17rpx;
		padding: 8rpx 13rpx;
		border: 1rpx solid #E9E4E0;
	}

	.ComprehensiveSortings view.active {
		color: #B99846;
		border: 1rpx solid #B99846;
	}

	/deep/.search-box .u-input {
		font-size: 24rpx;
	}

	/deep/.hotel-listHeader .u-dropdown__menu {
		justify-content: space-between;
	}

	/deep/.hotel-listHeader .u-dropdown__menu__item {
		flex: inherit !important;
	}

	/deep/.hotel-listHeader .u-flex {
		justify-content: flex-start;
	}

	/deep/.u-dropdown__menu__item:first-child {
		padding-left: 40rpx;
	}

	/deep/.u-dropdown__menu__item:last-child {
		padding-right: 40rpx;
	}
</style>