<template>
	<view class="searchCityBox column">
		<view class="searchCityKey column" :style="[titleStyle]">
			<view class="row items-center" :style="{'padding-right':paddingRight}">
				<view class="internationalSearch">
					<u-search :placeholder="type?'搜索城市/国家中文或拼音':'搜索酒店中文或拼音'" 
						v-model="parameters.KeyWords"
						input-align="left" 
						:value="parameters.KeyWords" 
						text-color="#111" bg-color="rgba(0,0,0,0)"
						@change="getKeyWords" 
						@confirm="searchKey" 
						:show-action="false"
						style="font-size: 22rpx;"></u-search>
				</view>
				<text @click="searchClose">取消</text>
			</view>
			<view class="internationalTisp">
				{{type?'当前目的地及周边查询结果（酒店起价为参考价）':'当前酒店查询结果（酒店起价为参考价）'}}
			</view>
		</view>
		<scroll-view :scroll-y="true" style="height: 1px;flex: 1;overflow: hidden;" @scrolltolower="lower">
			<view class="searchCityCenterBox">
				<template v-if="HotelList.length>0||KeyCityList.length>0">
					<template v-if="HotelList.length>0">
						<view class="searchCityCenter column" v-for="(item,index) in HotelList" :key="index"
							@click="currentData(item)">
							<view class="searchCityTitle">
								<view>{{ item.name }}</view>
							</view>
							<view class="searchCityText row">
								<view class="searchCityTextL col">
									<template v-for="x in item.tagList">{{ x }}/</template>
									<template v-if="item.starRating">
										{{item.starRating}}星/
									</template>
									<template v-if="item.address||item.areaLis.length>0">
										{{ item.address }}
										<template v-if="item.areaList.length>0">(
											<template v-for="(x,i) in item.areaList">
												{{ x }}
												<template v-if="i!=item.areaList.length-1">
													、
												</template>
											</template>)
										</template>
									</template>
								</view>
								<view class="searchCityTextR">
									{{ item.unitprice }}
									<text>起</text>
								</view>
							</view>
						</view>
					</template>
					<template v-if="KeyCityList.length>0">
						<view class="searchCityCenter column" v-for="(item,index) in KeyCityList" :key="index"
							@click="currentData(item,1)">
							<view class="searchCityTitle">
								<view>{{ item.NameCN }}</view>
							</view>
							<view class="searchCityText row">
								<view class="searchCityTextL col">

								</view>
								<view class="searchCityTextR">
									<!-- {{ item.unitprice }} -->
									<!-- <text>起</text> -->
								</view>
							</view>
						</view>
					</template>
				</template>
				<u-empty v-show="(HotelList.length==0&&KeyCityList.length==0)&&!showLoading" text="请输入关键字" mode="data" padding-top="50" color="#000"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		props: ['type', 'queryParams'],
		data() {
			return {
				parameters: {
					pageIndex: 1,
					pageSize: 15,
					CityCode: '',
					CityName: '',
					GName: '',
					KeyWords: '',
				},
				cityList: [],
				cityListAll: [],
				PopularCities: [],
				HotelList: [],
				KeyCityList: [],
				titleStyle: null,
				paddingRight: 0,
				showLoading: false,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				status: "loadmore",
				page_count: 0,
			}
		},
		watch: {
			queryParams: {
				handler(val, oldval) {
					if (val.CityCode) {
						this.parameters.CityCode = val.CityCode;
					}
					this.parameters.KeyWords = val.KeyWords2
				},
				deep: true,
			},
		},
		created() {
			const that = this
			uni.getSystemInfo({
				success(res) {
					that.paddingRight = `${res.screenWidth-160}rpx`
					that.titleStyle = {
						paddingTop: `${res.statusBarHeight}px`
					};
				},
			});
		},
		methods: {
			getKeyWords() {
				if (this.parameters.KeyWords == '' || !this.parameters.KeyWords) {
					this.HotelList = []
					this.KeyCityList = []
					return
				}
				this.showLoading = false
				if (this.type) {
					this.searchCity()
				} else {
					this.getHotelPage(1)
				}
			},
			searchClose() {
				this.$emit('searchClose')
				this.HotelList = []
				this.KeyCityList = []
				this.parameters.KeyWords = ''
			},
			lower(e) {
				// TODO: 滚动到了底部，实现翻页加载
				if (this.parameters.pageIndex < this.page_count) {
					this.status = "loading";
					this.parameters.pageIndex++;
					this.getHotelPage();
				} else {
					this.status = "nomore";
				}
			},
			//获取列表数据
			getHotelPage(type) {
				if (this.showLoading) return
				uni.showLoading({
					title: "加载中",
				});
				if (type == 1) {
					this.parameters.pageIndex = 1
					this.page_count = 0
					this.HotelList = [];
				}
				this.showLoading = true;
				this.apipost('dmc_post_B2BAndB2CGetDidaHotelPage', this.parameters,
					(res) => {
						if (res.resultCode == 1) {
							uni.hideLoading();
							this.showLoading = false
							if (this.parameters.pageIndex === 1) {
								this.HotelList = res.data.pageData;
							} else {
								this.HotelList = this.HotelList.concat(res.data.pageData);
							}
							this.page_count = res.data.pageCount;
						}
					}, (err) => {
						uni.hideLoading();
						this.showLoading = false
						uni.showToast({
							title: err.message,
							icon: 'none',
						})
					}
				);
			},
			currentData(item, type) {
				if (this.parameters.KeyWords == '' || !this.parameters.KeyWords) return
				if (type) {
					this.$emit('searchKey', 3, item.CityCode, item.NameCN.split(' ')[0])
				} else {
					this.$emit('searchKey', 2, item.hotelid,this.parameters.KeyWords)
				}
				// this.HotelList = []
				// this.KeyCityList = []
				// this.parameters.KeyWords = ''
			},
			searchKey() {
				if (this.parameters.KeyWords == '' || !this.parameters.KeyWords) return
				this.$emit('searchKey', 1, this.parameters.KeyWords)
				this.HotelList = []
				this.KeyCityList = []
				this.parameters.KeyWords = ''
			},
			searchCity() {
				if (this.showLoading) return
				uni.showLoading({
					title: "加载中",
				})
				this.showLoading = true
				this.apipost('dmc_post_B2BAndB2CGetDestination', {
						KeyWords: this.parameters.KeyWords
					},
					(res) => {
						if (res.resultCode == 1) {
							this.KeyCityList = res.data
							uni.hideLoading();
							this.showLoading = false
						}
					},
					(err) => {
						uni.hideLoading();
						this.showLoading = false
					}
				);
			},
		}
	}
</script>
<style scoped>
	@import url("@/asset/css/flex.css");

	.searchCityBox {
		width: 100vw;
		height: 100vh;
		background: #fff;
	}

	.internationalSearch {}

	.internationalSearch {
		width: 1px;
		flex: 1;
		border-radius: 30rpx;
		padding: 5rpx 15rpx;
		background: #F6F7F9;
		margin-right: 20rpx;
		margin-left: 30rpx;
	}

	.internationalTisp {
		font-size: 22rpx;
		background: #F3F7FA;
		margin-top: 20rpx;
		padding: 10rpx 30rpx;
		letter-spacing: 2rpx;
	}

	.searchCityCenter {
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #eee;
	}

	.searchCityTitle {
		font-size: 30rpx;
	}

	.searchCityTitle view {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.searchCityTextL {
		font-size: 24rpx;
		color: #6D6D6F;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.searchCityTextR {
		margin-left: 15rpx;
		font-size: 32rpx;
		color: #B99846;
		font-weight: bold;
	}

	.searchCityTextR text {
		color: #000;
		font-weight: 100;
		font-size: 26rpx;
		margin-left: 5rpx;
	}
</style>