<template>
	<view class="hotel-list-search">
        <view class="row items-center" style="padding: 12rpx 0 0 0;">
            <view class="search-box" style="width: 1px;flex: 1;">
                <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 class="row"><text>入住</text> <view>{{ startDay }}</view> <text>{{parameters.rooms}}间</text></view>
                    <view class="row"><text>离店</text> <view>{{ endDay }}</view> <text>{{parameters.peoples}}人</text></view>
                </view>
                <view class="days column justify-center">
                    
                </view>
                <view style="width: 1px; flex: 1;position: relative;">
                    <u-search placeholder="酒店" v-model="parameters.KeyWords" input-align="left"
                        :value="parameters.KeyWords" text-color="#111" bg-color="rgba(0,0,0,0)"
                        :show-action="false"
						disabled
                        style="font-size: 22rpx;"></u-search>
					<view class="clickSearch" @click="clickSearchCity()">
						<view>0</view>
					</view>
                </view>
            </view>
            <view class="hotelMapIcon column" v-if="isMap" @click="goMapHotel">
                <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638759918587378741.png"
                style="width: 45rpx;height: 36rpx;"/>
                <text>地图</text>
            </view>
        </view>
		<u-dropdown ref="uDropdown" 
		active-color="#B99846" 
		inactive-color="#080A09"
		title-size="28"
		@open="open" @close="close" 
		>
			<u-dropdown-item 
			v-model="parameters.QOrderBy" 
			:title="optionsTitle[0]" 
			:options="options1">
				<view
					class="slot-content hotelComprehensiveBox column"
					style="background-color: #F3F1EF"
				>
					<view class="hotelComprehensiv row items-center" 
					v-for="(item,index) in options1" :key="index"
					:class="[parameters.QOrderBy==item.value?'active':'']"
					@click="ComSorting(item)">
						<text>{{ item.label }}</text>
						<view v-if="parameters.QOrderBy==item.value">
							<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638760948784111958.png"/>
						</view>
					</view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item 
			:title="optionsTitle[1]" 
			:options="cityList">
			
				<view
					class="slot-content hotelRegionBox column"
					style="background-color: #E9E4E0"
				>
					<view class="internationalSearch">
						<u-search placeholder="搜索区域中文或拼音" 
						input-align="left"
						v-model="regionKeyWords"
						:value="regionKeyWords"
						text-color="#111" 
						bg-color="rgba(0,0,0,0)"
						:show-action="false"
						style="font-size: 22rpx;"
						@change="FilterArea"></u-search>
					</view>
					<view class="row" style="height: 1px;flex: 1;">
						<view class="hotelRegionR">
							<scroll-view :scroll-y="true" style="height: 100%;">
								<template v-if="regionList.length>0">
									<view class="hotelRegionRText row items-center"
									v-for="(item,index) in regionList" :key="index"
									@click="changeDistrict(item)">
										<text>{{ item.CityName_CN }}</text>
										<view v-if="parameters.regionCode==item.CityCode">
											<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638760948784111958.png"/>
										</view>
									</view>
								</template>
								<u-empty v-else text="暂无区域相关数据" mode="data" padding-top="30" color="#000"></u-empty>
							</scroll-view>
						</view>
					</view>
						
					<view style="padding: 0 30rpx;box-shadow: 0rpx 1rpx 8rpx 0rpx rgba(185,152,70,0.25);background: #F3F1EF;">
						
						<view
							style="
								box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);
								margin-top: 40rpx;
								margin-bottom: 40rpx;
								display: flex;
							"
							>
							<view style="flex: 1; margin-right: 30rpx">
								<u-button :custom-style="btnStyle" @click="resetRegion"
								>清空</u-button
								>
							</view>
							<view style="flex: 1">
								<u-button :custom-style="btnStyle2" @click="sureRegion"
								>完成</u-button
								>
							</view>
						</view>
					</view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item :title="optionsTitle[2]" >
				<view
					class="slot-content"
					style="padding: 30rpx 0; background-color: #F3F1EF"
				>
				<view style="padding: 0 30rpx;">
					<view style="font-size: 28rpx;color: #080A09;font-weight: bold;">
					<text
						style="
						margin-right: 10rpx;
						"
						>价格</text
					>
					<text>
						<!--({{tempRateAndPrice.priceText?tempRateAndPrice.priceText:'单选'}})-->
						(单选)
					</text>
					</view>
					<view
					style="
						display: flex;
						align-items: center;
						color: #757776;
						margin-top: 34rpx;
					"
					>
					<view style="font-size: 24rpx; flex: 1">￥{{ parameters.StartPrice }}</view>
					<view
						style="
						font-size: 24rpx;
						flex: 1;
						color: #757776;
						text-align: right;
						"
						>{{ tempRateAndPrice.priceText }}</view
					>
					</view>
					<range-slider
					ref="rangeslider"
					:width="690"
					:height="80"
					:step="10"
					:liveMode="true"
					background-color="#E2E2E2"
					:block-size="40"
					bar-height="12"
					active-color="#E2C27A"
					min="100"
					:max="MaximumDatas.maxPrice"
					@rangechange="rangechange"
					:values="tempRateAndPrice.price"
					></range-slider>
				</view>
					<view class="hotelPriceRangeBox row">
						<view class="hotelPriceRange" 
						v-for="(item,index) in PriceRange"
						:key="index"
						:class="[tempRateAndPrice.priceId==index+1?'active':'']"
						@click="changePrice(item)">
							<view>
								{{ item.Name }}
							</view>
						</view>
					</view>
					<view style="padding: 0 30rpx;">
						<view style="margin: 36rpx 0 29rpx 0">
							<text style="font-size: 28rpx; color: #111; font-weight: 800"
								>星级</text
							>
						</view>
					</view>
					
					<view class="hotel-rate-box">
						<view class="hotel-rateTetx" v-for="(x, i) in rates"
						:key="i">
							<view
							class="hotel-rate"
							:class="{ active: tempRateAndPrice.rate.indexOf(x.Id) != -1 }"
							@click="setHotelRate(x.Id)">
							{{ x.Name }}</view>
						</view>
					</view>
				<view style="padding: 0 30rpx;">
						
						<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>
				</view>
			</u-dropdown-item>
		</u-dropdown>

       
		<u-popup v-model="showCityList" mode="bottom" :border-radius="40" length="75%"
		:mask-close-able="false">
			<destination :msg="parameters" 
			@sure="sureAddress"
			@searchCity="clickSearchCity"
			@close="closeAddress"
			:PopularCities="PopularCities"></destination>
        </u-popup>
		
		<u-popup v-model="showTimePopup" 
		mode="bottom" border-radius="20" length="75%" :safe-area-inset-bottom="true">
            <CheckDate :msg="parameters" @chosenDateResult="chosenDateResult"></CheckDate>
        </u-popup>

		<u-popup v-model="showSearchCity" mode="Right" length="100%">
			<searchCity :type="SearchCityType" @searchKey="searchKey"
			@searchClose="searchClose"></searchCity>
		</u-popup>
	</view>
</template>

<script>
	import rangeSlider from "./range-slider.vue";
	import canlendar from "./time/index";
	import hotelGood from "./hotel-good.vue";
	import destination from "./address/index.vue";
	import searchCity from "./address/searchCity.vue";
	import CheckDate from "./time/date.vue";
	export default {
		components: {
			rangeSlider,
			canlendar,
			hotelGood,
			destination,
			searchCity,
			CheckDate
		},
        props:['isMap','msg','daysObj'],
		data() {
			return {
				city: "成都",
				cityList: [],
				PopularCities: [],
				showCityList: false,
				showTimePopup: false,
				parameters: {
					KeyWords: "", //关键字
					StartPrice: 100,
					EndPrice: 0,
					QOrderBy: "1", //排序类型
					QStarRating: [], //星级
					GName: '', //热门
					CityCode: '',//目的地代码
					CityName: '',//目的地
					CityCode2: '',//目的地代码
					regionCode: '',//区域
					CityName_CN: '',

					// QStartDate: "",//开始日期
					// QEndDate: "",//结束日期
					
					// District: 0, //区
					rooms: 1,
					adultsNumber:2,
					childrenNumberZC:0,
					childrenNumberBZC:0,
					peoples: 2,
					interCurrent: 0,
					searchroomGroup: [
						{
							roomNum: 1,
							numberOfAdults: 2,
							numberOfChildren: 0,
							ChildAgeDetails: ''
						}
					],
				},
				day: 0,
				startDay: "",
				endDay: "",
				HotelList: [], //酒店数据
				tempRateAndPrice: {
					price: [],
					priceText: "",
					rate: [],
					priceId: 0,
				},
				MaximumDatas: null,
				optionsTitle: ["综合排序", "位置区域", "价格/星级"],
				rates: [],
				options1: [], //推荐排序数据
				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",
				},
				dayObj: {},
				showDialog: false,
				PriceRange:[],
				mc: '',
				showSearchCity: false,
				SearchCityType: '',// city地区查询  酒店查询
				regionListAll: [],//区域
				regionList: [],//区域
				regionKeyWords: '',
			};
		},
		watch:{
			msg: {
				handler (val, oldval) {
					if(val){
						// this.parameters.KeyWords = val.KeyWords
						this.parameters = {
							...val
						}
						console.log(val,'----val')
						if(val.QOrderBy){
							let list = this.options1.filter(x=>{
								return x.value==val.QOrderBy
							})
							if(list&&list.length>0) this.optionsTitle[0] = list[0].label
						}
						if(val.CityName_CN){
							this.optionsTitle[1] = val.CityName_CN
						}
						if(val.QStarRating.length>0){
							let num = 0
							if(val.QStarRating.length>0) num++
							if(val.priceId) num++
							this.optionsTitle[2] = `价格/星级 ${num}`;
						}
						if(val.CityName){
							this.city = val.CityName
							this.parameters.CityCode = val.CityCode
							this.parameters.CityCode2 = val.CityCode2
						}
					}
				},
				deep: true,
			},
			daysObj: {
				handler (val, oldval) {
						this.startDay = val.startDay;
						this.endDay = val.endDay;
						this.day = val.day;
						this.dayObj = val
				},
				deep: true,
			}
		},
		onLoad(options) {
			
		},
		created() {
			uni.setNavigationBarTitle({
				title: "酒店",
			});
			// if(!this.day){
			// 	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: `${d2.getFullYear()}-${Month2}-${Day2}`,
			// 		startDay: `${Month1}-${Day1}`,
			// 		endDay: `${Month2}-${Day2}`,
			// 		day: 1,
			// 		startWeek: startWeek,
			// 		endWeek: endWeek,
			// 	};
			// 	this.startDay = obj.startDay;
			// 	this.endDay = obj.endDay;
			// 	this.day = obj.day;
			// 	this.dayObj = obj
			// }
			this.getCity()
            this.getSearchCondition()
			// this.getLocation()
		},
		methods: {
			open(index) {
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				this.$refs.uDropdown.highlight(index);
			},
			FilterArea(){
				if(this.regionKeyWords!=''){
					this.regionList = this.regionListAll.filter((item)=>{
						return item.CityName_CN.toLowerCase().includes(this.regionKeyWords.toLowerCase())
					})
				}else{
					this.regionList = this.regionListAll
				}
			},
			searchClose(){
				this.showSearchCity = false
				this.showCityList = false
			},
			searchKey(type,key,City){
				if(type==1){
					this.parameters.hotelId = null
					if(this.parameters.KeyWords!=key) {
						this.parameters.KeyWords = key
					}
					// this.parameters.GName = this.PopularCities[0].GName
					// this.parameters.CityCode = this.PopularCities[0].CityList[0].CityCode
					// this.city = this.parameters.CityName = this.PopularCities[0].CityList[0].CityName
				}else if(type==2){
					this.parameters.KeyWords = null
					if(this.parameters.hotelId!=key) {
						this.parameters.hotelId = key
					}
					// this.parameters.GName = this.PopularCities[0].GName
					// this.parameters.CityCode = this.PopularCities[0].CityList[0].CityCode
					// this.city = this.parameters.CityName = this.PopularCities[0].CityList[0].CityName
					
				}else if(type==3){
					this.parameters.KeyWords = null
					this.parameters.hotelId = null
					if(this.parameters.CityCode!=key) {
						this.city = this.parameters.CityName = City
						this.parameters.CityCode2 = key
						this.parameters.CityCode = key
					}
				}
				this.searchClose()
				this.getRegion()
				this.research()
				
			},
			// 关键字搜索弹出层
			clickSearchCity(type){
				this.SearchCityType = type?type:null
				this.showSearchCity = true
			},
			getLocation(){
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(res);
						console.log('经纬度:', res.latitude, res.longitude);
					},
					fail(err) {
						console.log(err,'err');
					}
				});
			},
			closeAddress(){
				this.showCityList = false
			},
			sureAddress(msg){
				this.showCityList = false;
				if(this.parameters.CityCode2!=msg.CityCode2){
					this.parameters.GName = msg.GName
					this.parameters.CityCode = this.parameters.CityCode2 = msg.CityCode2
					this.getRegion()
					this.city = this.parameters.CityName = msg.CityName
					this.research()
				}
			},
			// 筛选排序
			sureFilter(){
				this.$forceUpdate();
				this.closeDropdown();
				this.research();
			},
			resetFilter(){
				this.closeDropdown()
				this.research();
			},
			// 位置排序
			sureRegion(){
				this.optionsTitle[1] = this.parameters.CityName_CN
				this.$forceUpdate();
				this.closeDropdown();
				this.city = this.parameters.CityName
				this.parameters.CityCode = this.parameters.regionCode?this.parameters.regionCode:this.parameters.CityCode2
				this.research();
			},
			resetRegion(){
				this.cityList = this.cityListAll
				this.optionsTitle[1] = '位置区域'
				this.closeDropdown()
				this.parameters.regionCode = ''
				this.regionKeyWords = ''
				if(this.parameters.CityCode!=this.parameters.CityCode2){
					this.parameters.CityCode = this.parameters.CityCode2
					this.research();
				}
			},
			showCity() {
				this.showCityList = true;
			},
			changeDistrict(item) {
				this.parameters.regionCode = item.CityCode
				this.parameters.CityName_CN = item.CityName_CN
			},
			// 价格排序
			surePrice() {
				this.parameters.QStarRating = this.tempRateAndPrice.rate
				let num = 0
				console.log(this.parameters.QStarRating.length>0,this.tempRateAndPrice.price)
				if(this.parameters.QStarRating.length>0) num++
				if(this.tempRateAndPrice.priceId>0) num++
				if(num) this.optionsTitle[2] = `价格/星级 ${num}`;
				this.closeDropdown();
				this.research();
			},
			resetPrice() {
				this.optionsTitle[2] = "价格/星级";
				var obj = this.$refs.rangeslider;
				obj.progressBarLeft = 0;
				obj.progressBarWidth = obj._getMaxLength();
				obj.minBlockLeft = 0;
				obj.maxBlockLeft = obj._getMaxLength();
				this.parameters.priceId = 0
				this.tempRateAndPrice.priceId = 0
				this.tempRateAndPrice = {
					price: {
						minValue: 0,
						maxValue: this.MaximumDatas.maxPrice,
					},
					priceText: `￥${this.PriceRange[0].minPrice}~${this.MaximumDatas.maxPrice}`,
					rate: [],
				};
				
				this.parameters.StartPrice = this.PriceRange[0].minPrice;
				this.parameters.EndPrice = this.MaximumDatas.maxPrice;
				this.parameters.QStarRating = []
				this.closeDropdown();
				this.research();
			},
			rangechange(e) {
				this.parameters.StartPrice = e.minValue
				this.parameters.EndPrice = e.maxValue
				this.tempRateAndPrice.priceText = `￥${e.minValue}~${e.maxValue}`;
				this.tempRateAndPrice.price = [this.parameters.StartPrice,this.parameters.EndPrice]
			},
			changePrice(item) {
				this.parameters.StartPrice = item.minPrice?item.minPrice:100;
				this.parameters.EndPrice = item.maxPrice;
				this.parameters.priceId = item.priceId
				this.tempRateAndPrice.priceText = item.Name;
				this.tempRateAndPrice.price = [item.minPrice?item.minPrice:100,item.maxPrice]
				this.tempRateAndPrice.priceId = item.priceId
			},
			ComSorting(item) {
				this.parameters.QOrderBy = item.value
                this.optionsTitle[0] = item.label;
                setTimeout(() => {
                    this.closeDropdown()
                }, 300);
				this.research();
			},
			// 星际级
			setHotelRate(rateId) {
				let temp = this.tempRateAndPrice.rate.indexOf(rateId);
				if (temp == -1) {
					this.tempRateAndPrice.rate.push(rateId);
				} else {
					this.tempRateAndPrice.rate.splice(temp, 1);
				}
			},
			// 日期
			chosenDate() {
				this.showTimePopup = true;
			},
            chosenDateResult(parameters,obj) {
				this.parameters = parameters
				this.startDay = obj.startDay;
				this.endDay = obj.endDay;
				this.day = obj.day;
				this.dayObj = obj;
				this.showTimePopup = false;
				this.$emit('getItem',this.parameters,this.dayObj)
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			research() {
				this.$emit('change',this.parameters);
			},
			//获取查询条件
			getSearchCondition() {
				this.apipost('dmc_post_B2BAndB2CDiDaHotelQueryCondition',{},(res)=>{
					if(res.resultCode==1){
						this.options1 = [];
						this.PriceRange = []
						let tempObj = res.data;
						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.StarRatingList) {
							this.rates = tempObj.StarRatingList;
						}
						if (tempObj && tempObj.PriceList) {
							tempObj.PriceList.forEach((x,i) => {
								let obj = {
									Name: `￥${x.Name}`,
									minPrice: x.MinPrice,
									maxPrice: x.MaxPrice,
									priceId: i+1,
								};
								this.PriceRange.push(obj);
							});
							this.parameters.StartPrice = this.PriceRange[0].minPrice?this.PriceRange[0].minPrice:100;
							this.MaximumDatas = this.PriceRange[this.PriceRange.length-1]
							let temp = tempObj.PriceList[tempObj.PriceList.length-1]
							this.parameters.EndPrice = temp.MaxPrice
							this.tempRateAndPrice.priceText = `￥${temp.MaxPrice}`;
						}
					}
				},(err)=>{
					
				})
			},
			// 城市
			getCity() {
				this.apipost('dmc_post_B2BAndB2CGetHotCity',{},
					(res) => {
						if (res.resultCode == 1) {
							if(res.data.length>0){
								this.PopularCities = res.data
								this.cityList = this.PopularCities[0].CityList
								if(!this.parameters.CityCode2){
									this.parameters.GName = this.PopularCities[0].GName
									this.parameters.CityCode = this.PopularCities[0].CityList[0].CityCode
									this.parameters.CityCode2 = this.PopularCities[0].CityList[0].CityCode
									this.city = this.parameters.CityName = this.PopularCities[0].CityList[0].CityName
								}
								this.getRegion()
							}
							this.research()
						}
					},
					(err) => {
					}
				);
			},
			// 区域
			getRegion() {
				this.parameters.regionCode = ''
				this.apipost('dmc_post_GetDestinationByCityCode',{
					CityCode: this.parameters.CityCode2
				},
					(res) => {
						if (res.resultCode == 1) {
							this.regionListAll = res.data
							this.regionList = res.data
						}
					},
					(err) => {}
				);
			},
			goMapHotel(){
				this.closeDropdown()
				uni.navigateTo({
					url: `/pages/hotel/mapList?msg=${encodeURIComponent(JSON.stringify(this.parameters))}&dayObj=${encodeURIComponent(JSON.stringify(this.dayObj))}`
				});
			}
		},
	};
</script>

<style lang="scss">
	@import url("@/asset/css/flex.css");
	.hotel-list-search .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 .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 .search-box .date {
		height: 50rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #111111;
		line-height: 29rpx;
		margin-top: -6px;
	}

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

	.hotel-list-search .search-box .date view{
		margin-right: 10rpx;
	}

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

	.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;
	}
	/deep/.search-box .u-input{
		font-size: 24rpx;
	}
	.hotelMapIcon{
		padding: 0 32rpx 0 20rpx;
		font-size: 24rpx;
	}
	.hotelMapIcon text{
		margin-top: 12rpx;
	}
	.hotelPriceRangeBox{
		flex-wrap: wrap;
		padding-left: 33rpx;
		padding-right: 15rpx;
	}
	.hotelPriceRange{
		width: 33.33%;
		margin-bottom: 14rpx;
	}
	.hotelPriceRange view{
		width: 218rpx;
		height: 60rpx;
		line-height: 52rpx;
		background: #E9E4E0;
		border-radius: 6rpx;
		border: 2rpx solid #E9E4E0;
		text-align: center;
		color: #080A09;
		font-size: 24rpx;
		font-weight: 500;
	}
	.hotelPriceRange.active view{
		border: 2rpx solid #B99846;
		color: #B99846;
	}
	.hotelRegionBox{
		height: 888rpx;
	}
	.hotelRegionL{
		width: 183rpx;
	}
	.hotelRegionLText{
		height: 78rpx;
		line-height: 70rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #080A09 ;
	}
	.hotelRegionLText.active{
		background: #F3F1EF;
		color: #B99846;
	}
	.hotelPopular{
		width: 8rpx;
		height: 8rpx;
		background: #FF3166;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	.hotelRegionR{
		width: 1px;
		flex: 1;
		background: #F3F1EF;
		padding: 0 46rpx;
	}
	.hotelRegionRText{
		height: 78rpx;
		line-height: 70rpx;
		justify-content: space-between;
	}
	.hotelRegionRText text{
		font-size: 28rpx;
		color: #080A09;
		font-weight: 500;
	}
	.hotelRegionRText.active{
		color: #B99846;
		font-weight: bold;
	}
	.hotelRegionRText img{
		width: 28rpx;
		height: 28rpx;
		display: block;
	}
	.hotelRegionRTBox{
		flex-wrap: wrap;
	}
	.hotelRegionRTBox .hotelRegionRText{
		width: 50%;
		overflow: hidden;
		padding-right: 32rpx;
	}
	.hotelRegionRTBox .hotelRegionRText text{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.hotelRegionRTBox .hotelRegionRText:nth-child(2n){
		padding-left: 32rpx;
		padding-right: 0;
	}
    .hotelComprehensiveBox{
        padding: 0 30rpx;
    }
    .hotelComprehensiv{
        height: 78rpx;
        line-height: 70rpx;
        font-size: 28rpx;
		color: #080A09;
        justify-content: space-between;
    }
    .hotelComprehensiv.active{
        color: #B99846;
		font-weight: bold;
    }
    .hotelComprehensiv img{
		width: 28rpx;
		height: 28rpx;
		display: block;
	}
	.clickSearch{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 3;
	}
	.clickSearch view{
		opacity: 0;
	}
	.internationalSearch{
		padding: 0 30rpx;
	}
</style>
