<template>
	<view style="height: 100vh; z-index:2;  width:100vw;position: fixed;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.6);">
		<view style="z-index: 2; background-color: #FFF;padding-bottom:36rpx;position: absolute;top: 0;left: 0;right: 0;border-radius: 0 0 16rpx 16rpx;">
			<view style="padding:24rpx;font-size: 40rpx;font-weight: bold;color: #121212;" class="text-center" :style="{'margin-top':paddingTop}">
				重新选择
			</view>
			<view class="air-tools">
				<view class="row items-center" style="padding: 18rpx;padding-bottom: 10rpx;">
					<text class="normal-label">出发地</text>
					<text class="col text-center"></text>
					<text class="normal-label">目的地</text>
				</view>
				<view class="row items-center toolsContainer"
					style="padding:0 18rpx; padding-bottom: 18rpx;">
					<text class="cities-name left-name" @click="showCityHandler(0)" :style="{transform: `translateX(${leftPos}px)`,transition: 'transform 0.5s ease'}">{{chosenResult[0].Name}}</text>
					<view class="col exchange row items-center justify-center" @click="swapLocations">
						<u-icon name="change1" custom-prefix="tffont" color="#B99846" size="66" :style="{transform: `rotate(${rotateNum}deg)`,transition: 'transform 0.5s ease'}"></u-icon>
					</view>
					<text class="cities-name right-name" @click="showCityHandler(1)" :style="{transform: `translateX(${rightPos}px)`,transition: 'transform 0.5s ease'}">{{chosenResult[1].Name}}</text>
				</view>
				
				<view @click="setCitiesHandler" class="text-center cities-name q-mt-md" style="background-color: #B99846;border-radius: 10rpx;height: 90rpx; line-height: 90rpx;color:#EEF1F4">确 认</view>
				<u-popup mode="bottom" border-radius="20" :popup="false" v-model="citiesVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="popupClose" :z-index="9999">
					<city-list :enable-all="enableAll" :city-type="currentCityObj.type" :city-value="currentCityObj.ID" @change="setCityHandler"></city-list>
				</u-popup>
			</view>
			
		</view>
		<view style="height: 100%;width: 100%;" @click="closed"></view>
	</view>
</template>

<script>
	import CityList from './CityList.vue';
	export default {
		components:{CityList},
		props:{
			value:{
				type:Array
			},
			paddingTop:{
				type:String,
				default:'0px'
			},
			enableAll:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return {
				chosenResult:[
					{
						type:0,
						ID:0,
						Name:'全部低价城市'
					},
					{
						type:1,
						ID:0,
						Name:'全部低价城市'
					}
				],
				currentCityObj:{
					type:0,
					ID:0
				},
				leftPos: 0,
				rightPos: 0,
				leftStyle:{
					transform: `translateX(0px)`,
					transition: 'transform 0.5s ease',
				},
				rightStyle:{
					transform: `translateX(0px)`,
					transition: 'transform 0.5s ease',
				},
				scrollTop:0,
				containerWidth:336,
				leftWidth:0,
				rightWidth:0,
				rotateNum:0,
				citiesVisible:false,
			}
		},
		watch: {
			value: {
				deep: true,
				immediate: true,
				handler: function(newVal, oldVal) {
					if(this.value){
						this.chosenResult = this.value
					}
				},
			},
		},
		created() {
			if(this.value){
				this.chosenResult = this.value
			}
		},
		mounted() {
			//this.getContainerWidth()
		},
		methods:{
			swapLocations() {
				this.leftPos = this.leftPos === 0 ? (this.containerWidth-(this.chosenResult[0].Name.length*16)) : 0;
				this.rightPos = this.rightPos === 0 ? -(this.containerWidth-(this.chosenResult[1].Name.length*16)) : 0;
				this.chosenResult[0].type = this.leftPos === 0 ? 0 : 1
				this.chosenResult[1].type = this.rightPos === 0 ? 1 : 0
				this.rotateNum += 180
			},
			popupClose(){
				this.citiesVisible = false
			},
			showCityHandler(i){
				console.log(this.chosenResult[i])
				this.currentCityObj = this.chosenResult[i]
				this.citiesVisible = true
			},
			setCityHandler(val){
				const i = this.chosenResult.findIndex((x)=>x.type==this.currentCityObj.type)
				this.chosenResult[i] = {...this.currentCityObj,...val}
				this.citiesVisible = false
			},
			setCitiesHandler(){
				const result = JSON.parse(JSON.stringify(this.chosenResult))
				result.sort((a, b) => {
					return a.type - b.type;
				});
				this.$emit('change',result)
			},
			closed(){
				this.$emit('closed')
			}
		}
	}
</script>

<style>
	@import url('../../../../asset/css/flex.css');
	.air-tools {
		padding:0 36rpx;
	}
	
	.air-tools .cities-name {
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
	}
	
	.air-tools .normal-label {
		font-size: 24rpx;
		color: #9999A6;
	}
	
	.air-tools .exchange {
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696990221000_663.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 38rpx auto;
		/* 这里设置背景图片的宽度和高度 */
		height: 30px;
	}
</style>