<template>
	<view class="hotel-list-search">
        <view class="row items-center" style="padding: 12rpx 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">
                    <u-search placeholder="城市/地标/商圈/酒店" v-model="parameters.Name" input-align="left"
                        :value="parameters.Name" text-color="#111" bg-color="rgba(0,0,0,0)" @change="research()"
                        :show-action="false"
                        style="font-size: 22rpx;"></u-search>
                </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" 
		@open="open" @close="close" 
		active-color="#B99846" 
		inactive-color="#080A09"
		title-size="28"
		>
			<u-dropdown-item 
			v-model="parameters.OrderByType" 
			: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.OrderByType==item.value?'active':'']"
					@click="ComSorting(item)">
						<text>{{ item.label }}</text>
						<view v-if="parameters.OrderByType==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 v-model="parameters.District" 
			:title="optionsTitle[1]" 
			:options="DistrictOptions">
				<view
					class="slot-content hotelRegionBox column"
					style="background-color: #E9E4E0"
				>
					<view class="row" style="height: 1px;flex: 1;">
						<view class="hotelRegionL">
							<scroll-view :scroll-y="true" style="height: 100%;">
								<view class="hotelRegionLText row items-center justify-center"
								:class="[parameters.City==item.ID?'active':'']"
								v-for="(item,index) in cityListAll" :key="index"
								@click="confirmCity(item)">
									<!-- <view class="hotelPopular"></view> -->
									<text>{{ item.Name }}</text>
								</view>
							</scroll-view>
						</view>
						<view class="hotelRegionR">
							<scroll-view :scroll-y="true" style="height: 100%;">
								<view class="hotelRegionRText row items-center"
								v-for="(item,index) in DistrictOptions" :key="index"
								@click="changeDistrict(item)">
									<text>{{ item.Name }}</text>
									<view v-if="parameters.District==item.ID">
										<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638760948784111958.png"/>
									</view>
								</view>
							</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 v-model="parameters.enclosure" :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">￥0</view>
					<view
						style="
						font-size: 24rpx;
						flex: 1;
						color: #757776;
						text-align: right;
						"
						>￥850以上</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="0"
					max="850"
					@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.priceText==item.Name?'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-item :title="optionsTitle[3]">
				<view
					class="slot-content hotelRegionBox column"
					style="background-color: #E9E4E0"
				>
					<view class="row" style="height: 1px;flex: 1;">
						<view class="hotelRegionL">
							<scroll-view :scroll-y="true" style="height: 100%;">
								<view class="hotelRegionLText row items-center justify-center"
								:class="[index==0?'active':'']"
								v-for="(item,index) in DistrictOptions" :key="index"
								@click="changeLabel(item)">
									<!-- <view class="hotelPopular"></view> -->
									<text>{{ item.Name }}</text>
								</view>
							</scroll-view>
						</view>
						<view class="hotelRegionR">
							<scroll-view :scroll-y="true" style="height: 100%;">
								<view class="hotelRegionRTBox row">
									<view class="hotelRegionRText row items-center"
									:class="[index==0?'active':'']"
									v-for="(item,index) in options2" :key="index"
									@click="changeSubtags(item)">
										<text>{{ item.label }}</text>
										<view>
											<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638760948784111958.png"/>
										</view>
									</view>
								</view>
							</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="resetFilter"
								>清空</u-button
								>
							</view>
							<view style="flex: 1">
								<u-button :custom-style="btnStyle2" @click="sureFilter"
								>完成</u-button
								>
							</view>
						</view>
					</view>
				</view>
			</u-dropdown-item>
		</u-dropdown>

       
		<u-popup v-model="showCityList" mode="bottom" :border-radius="40" :safe-area-inset-bottom="true">
            <Address @confirm="confirmCity" :list="cityList" />
        </u-popup>	
		<u-popup v-model="showTimePopup" 
		mode="bottom" border-radius="20" length="75%" :safe-area-inset-bottom="true">
            <view style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;">
		  		<view style="flex: 1; width: 100%; height: 1rpx">
					<canlendar @finish="chosenDateResult" title="日期和人数"></canlendar>
				</view>
				<view style="background: #ecf1f4; padding: 20rpx 0;margin-bottom: 80rpx;">
					<view class="row line-flex" style="padding: 30rpx; background: #fff">
						<text style="font-size: 28rpx; color: #111; font-weight: 500">房间</text>
						<text style="
							font-size: 22rpx;
							color: #999;
							margin-left: 30rpx;
							flex: 1;
							"></text>
						<u-number-box size="28" :min="1" :max="100000" @change="crChange" v-model="parameters.rooms"></u-number-box>
					</view>
					<view class="row line-flex" style="padding: 30rpx; background: #fff">
						<text style="font-size: 28rpx; color: #111; font-weight: 500">成人</text>
						<text style="
							font-size: 22rpx;
							color: #999;
							margin-left: 30rpx;
							flex: 1;
							">18周岁以上</text>
						<u-number-box size="28" :min="1" 
						:max="100000" 
						v-model="parameters.adultsNumber"
						@change="crChange"></u-number-box>
					</view>
					<view class="row line-flex" style="padding: 30rpx; background: #fff">
						<text style="font-size: 28rpx; color: #111; font-weight: 500">儿童(占床)</text>
						<text style="
							font-size: 22rpx;
							color: #999;
							margin-left: 30rpx;
							flex: 1;
							">2-18周岁(不含)</text>
						<u-number-box size="28" :min="0" :max="100000" 
						v-model="parameters.childrenNumberZC"
						@change="etChange"
						></u-number-box>
					</view>
					<!--
					<view class="row line-flex" style="padding: 30rpx; background: #fff">
							<text style="font-size: 28rpx; color: #111; font-weight: 500">儿童(不占床)</text>
								<text style="
							font-size: 22rpx;
							color: #999;
							margin-left: 30rpx;
							flex: 1;
							">2-18周岁(不含)</text>
							<u-number-box size="28" :min="0" :max="100000" v-model="parameters.childrenNumberBZC"></u-number-box>
					</view>-->
				</view>
			</view>
        </u-popup>
	</view>
</template>

<script>
	import rangeSlider from "./range-slider.vue";
	import canlendar from "./time/index";
	import hotelGood from "./hotel-good.vue";
	import Address from "./address/smh-address-indexed.vue";
	export default {
        props:['isMap'],
		data() {
			return {
				city: "成都",
				cityList: [],
				cityListAll: [],
				showCityList: false,
				showTimePopup: false,
				parameters: {
					Name: "", //关键字
					StartPrice: 0,
					EndPrice: 1000,
					QStartDate: "",
					QEndDate: "",
					OrderByType: "1", //排序类型
					QStars: "", //星级
					City: 0, //市262
					District: 0, //区
					rooms: 1,
					adultsNumber:2,
					childrenNumberZC:0,
					childrenNumberBZC:0,
					peoples: 2,
				},
				day: 0,
				startDay: "",
				endDay: "",
				HotelList: [], //酒店数据
				tempRateAndPrice: {
					price: [],
					priceText: "￥850以上",
					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",
				},
				dayObj: {},
				DistrictOptions: [{
					label: "不限",
					value: 0
				}],
				showDialog: false,
				PriceRange:[
					{Name: '￥150以下',minPrice: 0,maxPrice: 150},
					{Name: '￥150-250',minPrice: 150,maxPrice: 250},
					{Name: '￥250-300',minPrice: 250,maxPrice: 300},
					{Name: '￥300-350',minPrice: 300,maxPrice: 350},
					{Name: '￥350-500',minPrice: 350,maxPrice: 500},
					{Name: '￥500-650',minPrice: 500,maxPrice: 650},
					{Name: '￥650-850',minPrice: 650,maxPrice: 850},
					{Name: '￥850以上',minPrice: 850,maxPrice: 0},
				],
				mc: '',
			};
		},
		components: {
			rangeSlider,
			canlendar,
			hotelGood,
			Address,
		},
		onLoad(options) {
			this.mc = this.$uiConfig.mainColor;
			if (options && options.Name) {
				this.parameters.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);
			
			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.getCity();
            this.getSearchCondition()
		},
		methods: {
			etChange(e){
				this.parameters.childrenNumberZC = e.value;
				this.peopleChange()
			},
			crChange(e){
				this.parameters.adultsNumber = e.value;
				this.peopleChange()
			},
			peopleChange(){
				this.parameters.peoples = this.parameters.adultsNumber + this.parameters.childrenNumberZC
				console.log(this.parameters.peoples,'人数')
				this.$emit('change',this.parameters);
			},
			// 筛选排序
			sureFilter(){
				this.$forceUpdate();
				this.closeDropdown();
				this.$emit('change',this.parameters);
			},
			resetFilter(){
				this.closeDropdown()
				this.$emit('change',this.parameters);
			},
			changeLabel(item){
				
			},
			changeSubtags(item){
				
			},
			// 位置排序
			sureRegion(){
				this.$forceUpdate();
				this.closeDropdown();
				this.$emit('change',this.parameters);
			},
			resetRegion(){
				this.parameters.City = 0;
				this.parameters.District = 0;
				this.closeDropdown()
				this.$emit('change',this.parameters);
			},
			showCity() {
				this.showCityList = true;
			},
			confirmCity(val) {
				this.parameters.City = val.ID;
				this.showCityList = false;
				this.city = val.Name;
				this.getDistrict(val.ID);
				// this.getDistrict();
				this.parameters.District = 0;
				// this.optionsTitle[1] = "区域";
				console.log(区域,'----位置');
			},
			changeDistrict(item) {
				this.parameters.District = item.ID
				// this.optionsTitle[1] = item.Name;
			},
			// 价格排序
			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.parameters.QStars = this.tempRateAndPrice.rate.toString()
				this.$forceUpdate();
				this.closeDropdown();
				this.$emit('change',this.parameters);
			},
			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: 850,
					},
					priceText: "￥850以上",
					rate: [],
				};
				this.closeDropdown();
				this.parameters.StartPrice = 0;
				this.parameters.EndPrice = 850;
				this.parameters.QStars = ""
				this.$emit('change',this.parameters);
			},
			rangechange(e) {
				let PriceList = this.PriceRange.filter(item => item.minPrice <= e.maxValue)
				let minPrice = Math.max(...PriceList.map(item => item.minPrice))
				let maxPrice = Math.max(...PriceList.map(item => item.maxPrice))
				if(minPrice>=0){
					if(minPrice==0) this.tempRateAndPrice.priceText = `￥${maxPrice}以下`;
					else if(minPrice==850) this.tempRateAndPrice.priceText = `￥${maxPrice}以上`;
					else this.tempRateAndPrice.priceText = `￥${minPrice}-${maxPrice}`;
					this.parameters.StartPrice = e.minPrice;
					this.parameters.EndPrice = e.maxPrice;
				}
			},
			changePrice(item) {
				this.parameters.StartPrice = item.minPrice;
				this.parameters.EndPrice = item.maxPrice;
				this.tempRateAndPrice.priceText = item.Name;
				if(item.minPrice>0&&item.maxPrice>0)this.tempRateAndPrice.price = [0,item.maxPrice]
				else if(item.minPrice==0) this.tempRateAndPrice.price = [0,item.maxPrice]
				else if(item.maxPrice==0) this.tempRateAndPrice.price = [item.minPrice,850]
			},
			ComSorting(item) {
				this.parameters.OrderByType = item.value
                this.optionsTitle[0] = item.label;
                setTimeout(() => {
                    this.closeDropdown()
                }, 300);
				this.$emit('change',this.parameters);
			},
			// 星际级
			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(obj) {
				this.parameters.QStartDate = obj.start;
				this.parameters.QEndDate = obj.end;
				this.startDay = obj.startDay;
				this.endDay = obj.endDay;
				this.day = obj.day;
				this.dayObj = obj;
				this.$emit('change',this.parameters);
				this.showTimePopup = false;
			},
			
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
				if (index == 2) {
					// this.tempRateAndPrice = this.parameters.rateAndPrice
				}
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			research() {
				this.$emit('change',this.parameters);
			},
			//获取查询条件
			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.StarList) {
								this.rates = tempObj.StarList;
							}
						}
					},
					(err) => {}
				);
			},
			// 城市
			getCity() {
				this.request2({
						url: "/api/Hotel/GetHotelDestination",
						data: {
							ID: 0
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.cityListAll = res.data
							// let obj = {
							// 	Name: "不限",
							// 	ID: 0
							// }
							// this.cityListAll.unshift(obj)
							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);
								}
							});
							console.log(this.cityList,'---')
							this.parameters.City = this.cityListAll[0].ID
							this.getDistrict(this.parameters.City)
						}
					},
					(err) => {}
				);
			},
			// 区
			getDistrict(id) {
				this.request2({
						url: "/api/Hotel/GetHotelDestination",
						data: {
							ID: id
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.DistrictOptions = res.data
							// let obj = {
							// 	Name: "不限",
							// 	ID: 0
							// }
							// this.DistrictOptions.unshift(obj)
							console.log(this.DistrictOptions,'---111')
						}
					},
					(err) => {}
				);
			},
			goMapHotel(){
				this.closeDropdown()
				uni.navigateTo({
					url: "/pages/hotel/mapList"
				});
			}
		},
	};
</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;
	}
</style>
