<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>选择<template v-if="type<3">下车</template>
                <template v-else>上车</template>点</view>
			</view>
			<view class="row items-center">
				<view class="internationalSearch row"  @click="isShow=false">
                    <view class="row items-center" @click.stop="isShow=!isShow">
                        <text>{{ type<3?busInfor.desCityName:busInfor.CityName }}</text>
                        <u-icon name="arrow" :size="32" color="#000" style="position: relative;top: 2rpx;margin-left: 10repx;"></u-icon>
                    </view>
					<u-search class="col" :placeholder="`请输入${type<3?'下车':'上车'}地址`" 
						v-model="parameters.KeyWords"
						input-align="left" 
						:value="parameters.KeyWords" 
						text-color="#111" bg-color="rgba(0,0,0,0)"
						@change="getKeyWords" 
						:show-action="false"
						style="font-size: 22rpx;"></u-search>
				</view>
			</view>
			<view class="internationalTisp">
				<template v-if="type<3">下车</template>
                <template v-else>上车</template>地址
			</view>
		</view>
		<scroll-view :scroll-y="true" style="height: 1px;flex: 1;overflow: hidden;">
			<view class="searchCityCenterBox">
                <template v-if="isShow">
                    <template v-if="PlaceList.length>0">
                        <view class="searchCityCenter column" 
                        v-for="(item,index) in PlaceList" 
                        :key="index"
                            >
                            <view class="searchCityTitle">
                                <view>{{ item.CountryName }}</view>
                            </view>
                            <view class="searchCityTextBox row">
                                <view class="searchCityText row" 
                                v-for="(items,i) in item.CityList"
                                :key="i"
                                @click="currentData(item,items,1)"
                                :class="[(type==3&&busInfor.CityId==items.City)||(type<3&&busInfor.desCityId==items.City)?'active':'']">
                                    <view class="searchCityTextL col">
                                        {{ items.CityName }}
                                    </view>
                                    <!-- <view class="searchCityTextR">
                                        
                                    </view> -->
                                </view>
                            </view>
                            
                        </view>
                    </template>
                    <u-empty v-show="PlaceList.length==0&&!showLoading" text="暂无相关数据" mode="data" padding-top="50" color="#000"></u-empty>
                </template> 
                <template v-else>
                    <template v-if="addressList.length>0">
                        <view class="searchCityCenter column" 
                        v-for="(item,index) in addressList" 
                        :key="index">
                            <view 
                            @click="currentData(item,2)"
                            class="searchCityTitle"
                            style="border-bottom: 1px solid #eee;padding-bottom: 18rpx;">
                                <view>{{ item.name }}</view>
                            </view>
                        </view>
                    </template>
                    <!--<u-empty v-show="addressList.length==0&&!showLoading" text="暂无相关数据" mode="data" padding-top="50" color="#000"></u-empty>-->
                </template>
                
            </view>
		</scroll-view>
	</view>
</template>
<script>
    import {searchPlacesInCity} from "@/plugin/searchpoi.js";
	export default {
		props: ['msg','type'],
		data() {
			return {
				parameters: {
					KeyWords: '',
				},
				titleStyle: null,
				paddingRight: 0,
				showLoading: false,
				page_count: 0,
				busInfor: {},
				PlaceList: [],
                isShow:false,//是否显示
                addressList: [],//地址列表
			}
		},
		watch: {
			msg: {
				handler(val, oldval) {
					this.busInfor = val
					this.getPlaceList()
				},
				deep: true,
				immediate: true
			},
			type: {
				handler(val, oldval) {
					this.addressList = []
					this.getPlaceList()
				},
				deep: false,
				immediate: true
			}
		},
		created() {
			const that = this
			uni.getSystemInfo({
				success(res) {
					that.paddingRight = `${res.screenWidth-160}rpx`
					that.titleStyle = {
						paddingTop: `${res.statusBarHeight}px`
					};
				},
			});
		},
        mounted() {

        },
		methods: {
            getPlaceList(){
                this.apipost('CarSingle_post_GetCarSingleAllPlaceList',{
                    Type: this.busInfor.CarType,
                    AirportId: 0
                },res=>{
                    if(res.resultCode==1){
                        if(res.data.length>0){
                            this.PlaceList = res.data
                            if(this.type<3&&(!this.busInfor.desCountryId||this.busInfor.desCountryId=='')){
                                this.busInfor.desCountryId = res.data[0].Country
                                this.busInfor.desCountryName = res.data[0].CountryName
                                this.busInfor.ThreeCode = res.data[0].ThreeCode
                                this.busInfor.desCityId = res.data[0].CityList[0].City
                                this.busInfor.desCityName = res.data[0].CityList[0].CityName
                            }
							if(this.type==3&&(!this.busInfor.CountryId||this.busInfor.CountryId=='')){
                                this.busInfor.CountryId = res.data[0].Country
                                this.busInfor.CountryName = res.data[0].CountryName
                                this.busInfor.ThreeCode = res.data[0].ThreeCode
                                this.busInfor.CityId = res.data[0].CityList[0].City
                                this.busInfor.CityName = res.data[0].CityList[0].CityName
                            }
                        }
                    }
                })
            },
			getKeyWords() {
                if (!this.parameters.KeyWords.trim()) return;
				this.showLoading=true
                // searchPlacesInCity('JP','东京都','东横').then(res=>{
                //     console.log(res,'--------搜索结果')
                // })
				uni.showLoading()
                searchPlacesInCity(
                    this.busInfor.ThreeCode,
                    this.busInfor.desCityName,
                    this.parameters.KeyWords
                ).then(res=>{
                    this.showLoading=false
                    this.addressList = res
					uni.hideLoading()
                    console.log(res,'--------搜索结果')
				},err=>{
					this.showLoading=false
					uni.hideLoading()
				})
			},
			searchClose() {
				this.isShow = false
				this.$emit('close')
			},
			currentData(item,items,type) {
                if(type==1){
					if(this.type<3){
						this.busInfor.desCountryId = item.Country
						this.busInfor.desCountryName = item.CountryName
						this.busInfor.desCityId = items.City
						this.busInfor.desCityName = items.CityName
						if(this.type==2&&this.busInfor.desCountryId!=this.busInfor.CountryId){
							this.busInfor.CountryId = item.Country
							this.busInfor.CountryName = item.CountryName
							this.busInfor.CityId = items.City
							this.busInfor.CityName = items.CityName
							this.busInfor.startaddress = ''
						}
					}else{
						this.busInfor.CountryId = item.Country
						this.busInfor.CountryName = item.CountryName
						this.busInfor.CityId = items.City
						this.busInfor.CityName = items.CityName
						if(this.busInfor.desCountryId!=this.busInfor.CountryId){
							this.busInfor.desCountryId = item.Country
							this.busInfor.desCountryName = item.CountryName
							this.busInfor.desCityId = items.City
							this.busInfor.desCityName = items.CityName
							this.busInfor.destination = ''
						}
					}
                    this.busInfor.ThreeCode = item.ThreeCode
                }else{
                    if(this.type<3){
                    	this.busInfor.destination = this.busInfor.desCountryName+this.busInfor.desCityName+item.name
                        this.busInfor.desLatitude = item.latitude
                        this.busInfor.desLongitude = item.longitude
                        if(this.type==1){
                            this.$emit('change',this.busInfor,2)
                        }else if(this.type==2){
                            this.$emit('change',this.busInfor)
                        }
                    }else{
                        this.busInfor.startaddress = this.busInfor.CountryName+this.busInfor.CityName+item.name
                        this.busInfor.oriLatitude = item.latitude
                        this.busInfor.oriLongitude = item.longitude
                        this.$emit('change',this.busInfor)
                    }
					this.parameters.KeyWords = ''
					this.addressList = []
                }
                this.isShow = 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-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;
	}

	.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 20rpx 0;
	}
	.searchAirpClose{
		position: absolute;
		left: 40rpx;
		top: 20rpx;
		width: 30rpx;
		height: 30rpx;
	}
    .searchCityTextBox{
        flex-wrap: wrap;
        padding: 0 20rpx;
        margin-top: 15rpx;
    }
    .searchCityTextBox .searchCityText{
        border: 1px solid #eee;
        border-radius: 10rpx;
        padding: 15rpx 30rpx;
        margin: 10rpx;
    }
    .searchCityTextBox .searchCityText.active{
        border: 2rpx solid #B99846;
    }
    .searchCityTextBox .searchCityText.active .searchCityTextL{
        color: #B99846;
    }
</style>