<template>
	<view class="searchCityBox column">
		<view class="searchCityKey column" :style="[titleStyle]">
			<view class="searchCityAirp">
				<img @click="searchClose" 
				class="searchAirpClose" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638814439056194770.png"/>
				<view>选择机场</view>
			</view>
			<view class="row items-center">
				<view class="internationalSearch">
					<u-search placeholder="请输入机场名称/所在城市" 
						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>
			</view>
			<view class="internationalTisp">
				{{busInfor.CarType==1?'降落的机场':'起飞的机场'}}
			</view>
		</view>
		<scroll-view :scroll-y="true" style="height: 1px;flex: 1;overflow: hidden;" @scrolltolower="lower">
			<view class="searchCityCenterBox">
				<template v-if="airportList.length>0">
					<view class="searchCityCenter column" v-for="(item,index) in airportList" 
					:key="index"
					:class="[(busInfor.CarType==1&&busInfor.CountryId==item.Country)||(busInfor.CarType==2&&busInfor.desCountryId==item.Country)?'active':'']"
						>
						<view class="searchCityTitle">
							<view>{{ item.CountryName }}</view>
						</view>
						<view class="searchCityText row" 
						v-for="(items,i) in item.AirportList"
						:key="i"
						@click="currentData(item,items,1)">
							<view class="searchCityTextL col"
							:class="[(busInfor.CarType==1&&busInfor.CityId==items.City)||(busInfor.CarType==2&&busInfor.AirportId==items.AirportId)?'active':'']">
								{{ items.AirportName }}
							</view>
							<view class="searchCityTextR">
								
							</view>
						</view>
					</view>
				</template>
				<u-empty v-show="airportList.length==0&&!showLoading" text="暂无相关数据" mode="data" padding-top="50" color="#000"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		props: ['msg'],
		data() {
			return {
				parameters: {
					pageIndex: 1,
					pageSize: 15,
					CityCode: '',
					CityName: '',
					GName: '',
					KeyWords: '',
				},
				titleStyle: null,
				paddingRight: 0,
				showLoading: false,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				status: "loadmore",
				page_count: 0,
				busInfor: {},
				airportListAll: [],
				airportList: [],
			}
		},
		watch: {
			msg: {
				handler(val, oldval) {
					this.busInfor = val
					if (this.busInfor.CarType<3) {
						this.getAirportList()
					}
				},
				deep: true,
				immediate: true
			},
		},
		created() {
			const that = this
			uni.getSystemInfo({
				success(res) {
					that.paddingRight = `${res.screenWidth-160}rpx`
					that.titleStyle = {
						paddingTop: `${res.statusBarHeight}px`
					};
				},
			});
		},
		methods: {
			getAirportList(){
				let query = {
					Type: this.busInfor.CarType,
					CountryId: '',
					CityId: '',
				}
				if(this.busInfor.CarType==1){
					query.CountryId = ''
					query.CityId = ''
				} else {
					query.CountryId = this.busInfor.CountryId?this.busInfor.CountryId:this.busInfor.desCountryId,
                    query.CityId = this.busInfor.CityId?this.busInfor.CityId:this.busInfor.desCityId
				}
                this.apipost('CarSingle_post_GetCarSingleAllAirportList',query,res=>{
                    if(res.resultCode==1){
                        this.airportListAll = res.data
						this.airportList = res.data
                    }
                })
            },
			getKeyWords() {
				let query = this.parameters.KeyWords.toLowerCase()
				if (query !== '') {
					this.airportList = this.airportListAll.filter(item => {
						return item.CountryName&&item.CountryName.toLowerCase().includes(query)||item.AirportList.some(x=>x.AirportName.toLowerCase().includes(query));
					});
				} else {
					this.airportList = JSON.parse(JSON.stringify(this.airportListAll));
				}
			},
			searchClose() {
				this.$emit('close')
			},
			lower(e) {
				// TODO: 滚动到了底部，实现翻页加载
				// if (this.parameters.pageIndex < this.page_count) {
				// 	this.status = "loading";
				// 	this.parameters.pageIndex++;
				// } else {
				// 	this.status = "nomore";
				// }
			},
			
			currentData(item,items) {
				this.busInfor.CountryId = item.Country
				this.busInfor.CountryName = item.CountryName
				this.busInfor.CityId = items.City
				this.busInfor.CityName = items.CityName
				this.busInfor.oriLatitude = items.Lat
				this.busInfor.oriLongitude = items.Lng

				this.busInfor.desCountryId = item.Country
				this.busInfor.desCountryName = item.CountryName
				this.busInfor.desCityId = items.City
				this.busInfor.desCityName = items.CityName

				this.busInfor.ThreeCode = item.ThreeCode
				
				this.busInfor.AirportId = items.AirportId
				this.busInfor.AirportName = items.AirportName
				
				if(this.busInfor.CarType==1){
					this.busInfor.startaddress = `${item.CountryName} ${items.CityName} ${items.AirportName}`
				}
				if(this.busInfor.CarType==2){
					this.busInfor.destination = `${item.CountryName} ${items.CityName} ${items.AirportName}`
				}
				console.log(item)
				this.$emit('change',this.busInfor)
			},
		}
	}
</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-left: 30rpx;
		margin-right: 30rpx;
	}

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

	.searchCityCenter {
		
		
	}

	.searchCityTitle {
		font-size: 30rpx;
		padding: 20rpx 30rpx 0 30rpx;
		/* border-bottom: 1px solid #eee; */
		font-weight: bold;
	}

	.searchCityTitle view {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.searchCityText{
		padding: 30rpx 50rpx;
		border-bottom: 1px solid #eee;
	}
	.searchCityTextL {
		font-size: 24rpx;
		color: #6D6D6F;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.searchCityCenter.active .searchCityTextL.active{
		color: #B99846;
	}

	.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;
	}
	.searchCityAirp{
		text-align: center;
		font-size: 32rpx;
		position: relative;
		padding: 20rpx 0 40rpx 0;
	}
	.searchAirpClose{
		position: absolute;
		left: 40rpx;
		top: 20rpx;
		width: 30rpx;
		height: 30rpx;
	}
</style>