<template>
	<view class="hotel-list">
		<view class="search-box">
			<view class="date" @click="chosenDate">
				<view>住 {{searchObj.date.startDay}}</view>
				<view>离 {{searchObj.date.endDay}}</view>
			</view>
			<view class="days">{{searchObj.date.day}}晚</view>
			<view style="width: 1px; flex: 1;">
				<u-search placeholder="关键字/位置/品牌/酒店名" v-model="searchObj.searchKey" input-align="left" :value="searchObj.searchKey"
					text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false"></u-search>
			</view>
		</view>
		<view>
			<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
				<u-dropdown-item v-model="searchObj.sort" :title="optionsTitle[0]" :options="options1" @change="change">
				</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 :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.value)!=-1}" @click="setHotelRate(x.value)">{{x.label}}</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 v-model="value2" :title="optionsTitle[3]" :options="options2"></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 threeLevelList" class="item" @click="chosenMorewhere(x.id)" :class="{'active':searchObj.moreSearch.indexOf(x.id)!=-1}">{{x.name}}</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;">
		 <hotel-good></hotel-good>
		 <hotel-good></hotel-good>
		 <hotel-good :hotelType="1"></hotel-good>
		 <hotel-good></hotel-good>
		 <hotel-good :hotelType="1"></hotel-good>
		 <hotel-good></hotel-good>
		 <hotel-good></hotel-good>
		 <hotel-good></hotel-good>
		 <hotel-good :hotelType="2"></hotel-good>
		 <hotel-good></hotel-good>
		 <hotel-good></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.vue"
	import hotelGood from './components/hotel-good.vue';
	export default {
		data() {
			return {
				showTimePopup:false,
				
				value1: 1,
				value2: 2,
				searchObj:{
					searchKey:"",
					sort:1,
					enclosure:-1,
					rateAndPrice:{
						price:{},
						priceText:"不限",
						rate:[]
					},
					date:{},
					moreSearch:[]
				},
				tempRateAndPrice:{
					price:{},
					priceText:"不限",
					rate:[]
				},
				optionsTitle: [
					"推荐排序",
					"附近",
					"价格/星级",
					"筛选"
				],
				rates: [
					{
						label:"二星/经济",
						value:1
					},
					{
						label:"三星/舒适",
						value:2
					},
					{
						label:"四星/高档",
						value:3
					},
					{
						label:"五星/豪华",
						value:4
					}
				],
				options1: [
					{
						label: '推荐排序',
						value: 1,
					},
					{
						label: '好评优先',
						value: 2,
					},
					{
						label: '低价优先',
						value: 3,
					},
					{
						label: '高价优先',
						value: 4,
					}
				],
				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"
				},
				threeLevelList:[
					{
						name:"民宿",
						id:0
					},
					{
						name:"大床房",
						id:1
					},
					{
						name:"双床房",
						id:2
					},
					{
						name:"含早餐",
						id:3
					},
					{
						name:"免费取消",
						id:4
					},
					{
						name:"优惠活动",
						id:5
					}
				],
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多商品了",
				},
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				showLoading:false,
				status: "loadmore",
			}
		},
		components: {
			rangeSlider,
			canlendar,
			hotelGood
		},
		created() {
			uni.navigateTo({
				url:"/pages/hotel/detail"
			})
			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
		},
		methods: {
			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) {
				// TODO: 滚动到了底部，实现翻页加载
				// if (this.msg.pageIndex < this.page_count) {
				// 	this.status = "loading";
				// 	this.msg.pageIndex++;
				// 	this.init();
				// } else {
				// 	this.isover = true;
				// 	this.status = "nomore";
				// }
			},
			chosenMorewhere(id){
				let i=this.searchObj.moreSearch.indexOf(id)
				if(i==-1){
					this.searchObj.moreSearch.push(id)
				}else{
					this.searchObj.moreSearch.splice(i,1)
				}
			},
			chosenDateResult(obj){
				this.searchObj.date=obj
				this.showTimePopup=false
			},
			chosenDate(){
				// uni.navigateTo({
				// 	url:"/pages/hotel/components/time/index"
				// })
				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]="价格/星级"
				this.searchObj.rateAndPrice={
					price:{
						minValue:0,
						maxValue:1000
					},
					priceText:"不限",
					rate:[]
				}
				this.closeDropdown();
			},
			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
				console.log(result)
				this.optionsTitle[2]=result
				this.$forceUpdate() 
				this.searchObj.rateAndPrice=this.tempRateAndPrice
				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
				}
			},
			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
			},
			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] = "附近"
				}
			}
		},
	}
</script>

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