<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">
					{{ 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>(单选)</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" :queryParams="parameters" @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: '',
					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 = {
							...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: "酒店",
			});
			this.getCity()
			this.getSearchCondition()
		},
		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
					}
				} else if (type == 2) {
					this.parameters.KeyWords = null
					if (this.parameters.hotelId != key) {
						this.parameters.hotelId = key
					}
				} 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("getLocation", res);
					},
					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.CityName = msg.CityName;
					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
				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 = ''
				var regMsg = {
					CityCode: this.parameters.CityCode2,
					Name: this.parameters.CityName,
				};
				this.apipost('dmc_post_GetDestinationByCityCode', regMsg,
					(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>