<template>
	<view style="padding: 36rpx;">
		<view class="cities-name text-center">选择{{cityType==0?'出发地':'目的地'}}</view>
		<view style="padding: 36rpx 0;">
			<input type="text" class="text-input" v-model="keywords" placeholder="填写城市名称快速筛选" placeholder-style="font-size:12px" />
		</view>
		<template v-if="!loading">
			<view class="cities-name" style="font-size: 28rpx;">{{ keywords==''?'热门城市':'搜索结果' }}</view>
			<template v-if="showAddress && showAddress.length>0">
				<scroll-view scroll-y="true" style="height: 55vh;">
					<div class="row q-mt-md">
						<view class="col city-item big q-mr-sm" v-if="keywords=='' && enableAll" :class="{'active':currentValue==0}" @click="setCurrentCity(0)">
							<u-icon name="ditu-xian" custom-prefix="tffont" size="66" v-if="showAddress.length>2"></u-icon>
							<view style="font-size: 28rpx;font-weight: 600;">全部低价城市</view>
						</view>
						<view class="col row flex-grid flex-wrap">
							<template v-for="(x,i) in showAddress">
								<view class="city-item " v-if="i<4" :key="i" @click="setCurrentCity(x.ID)" :class="{'active':currentValue==x.ID,'col-t-b':(keywords=='' && enableAll),'col-f-b':(keywords!='' || !enableAll)}">{{x.Name}}</view>
							</template>
						</view>
					</div>
					<div class="row flex-grid flex-wrap q-mt-sm">
						<template v-for="(x,i) in showAddress">
							<view class="city-item col-f-b" v-if="i>3" :key="i" @click="setCurrentCity(x.ID)" :class="{'active':currentValue==x.ID}">{{x.Name}}</view>
						</template>
					</div>
				</scroll-view>
				<view class="text-center q-mt-md" @click="setHandler" style="background-color: #B99846;border-radius: 10rpx;height: 90rpx; line-height: 90rpx;color:#EEF1F4">确认选择</view>
			</template>
			<view style="margin-top:10vh" class="text-center" v-else>
				<u-empty mode="data"></u-empty>
			</view>
		</template>
		<view style="margin-top:20vh" class="text-center" v-else>
			<u-loading mode="circle" size="60"></u-loading>
			<view class="normal-label text-center q-mt-sm">正在加载城市信息</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList:[],
				orgList:[],
				keywords:'',
				currentValue:0,
				loading:false,
				currentObj:{}
			}
		},
		props:{
			cityType:{
				type:Number,
				default:0
			},
			cityValue:{
				type:Number,
				default:0
			},
			enableAll:{
				type:Boolean,
				default:true
			}
		},
		created() {
			this.getDataAddressList()
			this.currentValue = this.cityValue
		},
		computed:{
			showAddress(){
				return this.addressList.filter((x)=>x.Name.indexOf(this.keywords)!=-1)
			}
		},
		watch: {
			cityType: {
				deep: true,
				immediate: true,
				handler: function(newVal, oldVal) {
					this.formatArray()
				},
			},
			cityValue: {
				deep: true,
				immediate: true,
				handler: function(newVal, oldVal) {
					this.currentValue = this.cityValue,
					this.mappingCityInfoHandler(this.cityValue)
				},
			}
		},
		methods: {
			getDataAddressList(){
				this.loading=true
				const params = {
					StartDate: '',
					EndDate: '',
					ArriveCityId: '0',
					DepartCityId: '0',
					AirLineID:'',
					TicketType:2,//1单程 2往返
				}
			    this.apipost("AirTicket_get_GetTicketCity",params,(res) => {
			        if(res.resultCode==1){
			            this.orgList = res.data
						this.formatArray()
			        }
					this.loading=false
			    },(e)=>{
					this.loading=false
				});
			},
			formatArray(){
				if(!this.orgList || this.orgList.length==0) return
				if(this.cityType==0) this.addressList = this.orgList
				else{
					let temp =[]
					this.orgList.forEach(x=>{
						const arr = x.CityList.map((y)=> ({ID:y.ID,Name:y.Name}))
						temp = temp.concat(arr)
					})
					this.addressList = temp.filter((x,i)=>temp.findIndex(t=>t.ID===x.ID) === i)
				}
			},
			setCurrentCity (id) {
				this.currentValue = id
				this.mappingCityInfoHandler(id)
			},
			mappingCityInfoHandler(id){
				if(id==0){
					this.currentObj = {
						ID:id,
						Name:'全部低价城市'
					}
				} else {
					const i = this.showAddress.findIndex(x=>x.ID===id)
					if(i>=0){
						this.currentObj = {
							ID:id,
							Name:this.showAddress[i].Name
						}
					}
				}
			},
			setHandler(){
				this.$emit('change',this.currentObj)
			}
		}
	}
</script>

<style>
.city-item{
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #000;
	background-color: #f1f2f1;
	text-align: center;
	border-radius: 16rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
}
.city-item.active{
	font-size: 30rpx;
	font-weight: bold;
	color: #f1f2f1;
	background-color: #000;
}
.city-item.big{
	height: auto;
	line-height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #B99846;
	line-height: 1;
}
</style>
