<template>
	<scroll-view scroll-y="true" style="height: 100vh;" @scroll="handleScroll">
		<view class="nav-box row items-center" :style="{paddingTop:barHeight+'px',height:(barHeight+44)+'px',opacity:`${scrollTop}%`}">
			<view class="home-btn row items-center" @click="goHomeHandle">
				<u-icon name="home_1" custom-prefix="tffont" color="#111" size="38" style="font-weight: bolder;"></u-icon>
			</view>
			<view class="title">特价机票</view>
		</view>
		<view class="air-home">
			<view class="air-home-header">
				<view class="title-box">
					<view class="active-item">
						<view class="right"></view>
						<text>特价机票</text>
					</view>
				</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="border-bottom: 1px solid #EEF1F4;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 style="padding:36rpx 18rpx;" @click="showDateHandle">
						<text style="font-size: 28rpx;color:#080A09;">{{dateRangeValue.formatStartDate}}</text>
					</view>
					
					<view @click="searchFlightHandle" class="text-center cities-name" 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 :city-type="currentCityObj.type" :city-value="currentCityObj.currentValue" @change="setCityHandler"></city-list>
					</u-popup>
					<u-popup mode="bottom" border-radius="20" :popup="false" v-model="dateVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="popupClose" :z-index="9999">
						<date-range :value="dateRangeValue" @change='setDateHandler'></date-range>
					</u-popup>
				</view>
			</view>
			<view class="air-low-rank">
				<view class="header row items-center">
					<view class="col">
						<image style="width: 200rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749544625808055.png" mode="widthFix"/>
					</view>
					<view class="city-box row items-center" @click="lowVisible=true">
						<u-icon name="dingwei" custom-prefix="tffont" color="#D0A45C" size="25" ></u-icon>
						<text class="col" style="margin-left:12rpx;margin-right: 16rpx;">{{ lowCity.Name}}</text>
						<u-icon name="arrow-down" custom-prefix="tffont" color="#080A09" size="24" ></u-icon>
						<u-popup mode="bottom" border-radius="20" :popup="false" v-model="lowVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="popupClose" :z-index="9999">
							<city-list :city-type="0" :city-value="lowCity.ID" @change="setLowCityHandler"></city-list>
						</u-popup>
					</view>
				</view>
				<view class="q-mt-md" style="padding:0 32rpx">
					<view class="column items-center justify-center q-mb-md" v-if="loadingLow">
						<u-loading mode="circle" size="40"></u-loading>
						<view class="normal-label text-center q-mt-sm">正在加载信息</view>
					</view>
					<view style="margin-top:10vh" class="text-center" v-else-if="lowData.length==0">
						<u-empty mode="data"></u-empty>
					</view>
					<view v-else>
						<view class="row items-center q-mb-md" @click="openFlightHandle(x,0)" v-for="(x,i) in lowData" :key="i">
							<image style="width: 160rpx;height: 186rpx;border-radius: 14rpx;" :src="`https://pic.c-ctrip.com/flight/fuzzy/${x.ArrivalCityCode}/640.jpg`" mode="aspectFill"></image>
							<view class="city-list-item col">
								<view class="row">
									<view class="col">
										<view class="">{{x.DepartureName}} - {{x.ArrivalCityName}}</view>
										<view class="row items-center q-mt-sm">
											<image style="width: 30rpx;" :src="`https://static.tripcdn.com/packages/flight/airline-logo/latest/airline/48/${x.Flight.AlCode}.png`" mode="widthFix"></image>
											<view class="info-text q-ml-sm">
												<text>{{ x.Flight.AirLineName }}</text>
												<text class="q-ml-md">{{x.Flight.FlightDate.split('-').splice(1,2).join('-')}} {{x.Flight.WeekDayStr}}</text>
											</view>
										</view>
									</view>
									<view class="rank" :class="{'num1':i==0,'num2':i==1,'num3':i==2}">{{i+1}}</view>
								</view>
								<view class="row q-mt-md">
									<view class="col">
										<text style="font-size: 22rpx;color: #A4A4A4;font-weight: 400;">仅需：</text>
										<text style="color:#FF3166;font-size: 22rpx;">¥</text>
										<text style="font-size: 32rpx;font-weight: bold;color:#FF3166;">{{x.Flight.B2BPrice}}</text>
									</view>
									<view class="more-date"  @click="openFlightHandle(x,1)">更多日期</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
	
</template>

<script>
	import CityList from './components/address/CityList.vue';
	import DateRange from './components/time/DateRange.vue';
	export default {
		data() {
			return {
				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:0,
				leftWidth:0,
				rightWidth:0,
				rotateNum:0,
				citiesVisible:false,
				lowVisible:false,
				dateVisible:false,
				loadingLow:false,
				dateRangeValue:{
					type:0,
					startDate:'',
					fuzzy:{
						fuzzyType:0,
						fuzzyTypeName:'',
						weeks:[],
						dayRangStatus:false,
						dayRange:[4,10]
					},
					formatStartDate:'任意时间出发'
				},
				currentCityObj:{
					type:0,
					ID:0
				},
				lowCity:{
					type:0,
					ID:0,
					Name:'全部'
				},
				lowData:[],
				chosenResult:[
					{
						type:0,
						ID:0,
						Name:'全部低价城市'
					},
					{
						type:1,
						ID:0,
						Name:'全部低价城市'
					}
				],
				barHeight:0
			}
		},
		components:{CityList,DateRange},
		created() {
			// if(uni.getStorageSync("tdr")){
			// 	this.dateRangeValue = uni.getStorageSync("tdr")
			// }
			this.getTopLowTicketHandle()
		},
		mounted() {
			this.getContainerWidth()
			let that = this
			uni.getSystemInfo({
				success(r) {
					that.barHeight = r.statusBarHeight
				},
			});
		},
		methods: {
			searchFlightHandle(){
				uni.setStorageSync('scf',{
					cities:this.chosenResult,
					dateRange: this.dateRangeValue
				})
				if(this.chosenResult[0].ID==0||this.chosenResult[1].ID==0){
					uni.navigateTo({
						url:'/pages/airTicket/airCity'
					})
				}else{
					//查询航班列表
					uni.navigateTo({
						url:'/pages/airTicket/ticketList/ticketList'
					})
				}
			},
			openFlightHandle(x,t){
				const d=[
					{
						type:0,
						ID:x.DepartureCity,
						Name:x.DepartureName
					},
					{
						type:1,
						ID:x.ArrivalCityId,
						Name:x.ArrivalCityName
					}
				]
				const dr={
					type:0,
					startDate:'',
					fuzzy:{
						fuzzyType:-2,
						fuzzyTypeName:'未来三个月',
						weeks:[],
						dayRangStatus:false,
						dayRange:[4,10]
					},
					formatStartDate:'未来三个月'
				}
				uni.setStorageSync('scf',{
					cities:d,
					dateRange: dr
				})
				let url = '/pages/airTicket/ticketList/ticketList'
				if(t==0){
					url+=`?dv=${encodeURIComponent(x.Flight.FlightDate)}`
				}
				uni.navigateTo({
					url
				})
			},
			async getContainerWidth() {
				const width = await this.getDomWidthAsync(".toolsContainer");
				this.containerWidth = width-18;
			},
			getTopLowTicketHandle(){
				const msg={
					StartDate:'',
					EndDate:'',
					DepartCityId:this.lowCity.ID,
					ArriveCityId:0,
					AirLineID:0,
					groupId:2,
					TicketType:2,
				}
				this.lowData = []
				this.loadingLow = true
				this.apipost('AirTicket_get_GetTopTicketProduct',msg,(r)=>{
					if(r.resultCode==1){
						this.lowData = this.formatLowData(r.data)
					}
					this.loadingLow=false
				},(e)=>{
					this.loadingLow = false
				})
				uni.setStorageSync('scf',{
					cities:this.chosenResult,
					dateRange: this.dateRangeValue
				})
			},
			formatLowData(d){
				d.forEach((x)=>{
					let t = x.TicketProductList[0]
					if(t){
						const q = t.FlightList.findLastIndex((f)=>f.FlightType==1)
						t.FlightInfo = t.FlightList[q]
					}
					x.Flight = t
				});
				return d.filter((x,i)=>  i<10)
			},
			getDomWidthAsync(className) {
			      return new Promise((resolve, reject) => {
			        uni.createSelectorQuery()
			          .select(className)  // 选择父容器
			          .boundingClientRect((rect) => {
			            if (rect) {
			              resolve(rect.width);  // 获取宽度并返回
			            } else {
			              reject('Failed to get container width');  // 获取失败时返回错误
			            }
			          })
			          .exec();
			      });
			},
			async swapLocations() {
				this.leftWidth = await this.getDomWidthAsync('.left-name')
				this.rightWidth = await this.getDomWidthAsync('.right-name')
				this.leftPos = this.leftPos === 0 ? (this.containerWidth-this.leftWidth) : 0;
				this.rightPos = this.rightPos === 0 ? -(this.containerWidth-this.rightWidth) : 0;
				this.chosenResult[0].type = this.leftPos === 0 ? 0 : 1
				this.chosenResult[1].type = this.rightPos === 0 ? 1 : 0
				this.rotateNum += 180
				this.leftStyle = {
					transform: `translateX(${this.leftPos}px)`,
					transition: 'transform 0.5s ease',
				}
				this.rightStyle ={
					transform: `translateX(${this.rightPos}px)`,
					transition: 'transform 0.5s ease',
				}
			},
			popupClose(){
				this.citiesVisible = false
				this.dateVisible = false
				this.lowVisible = false
			},
			showCityHandler(i){
				this.currentCityObj = this.chosenResult[i]
				this.citiesVisible = true
			},
			showDateHandle(){
				this.dateVisible=true
			},
			setCityHandler(val){
				const i = this.chosenResult.findIndex((x)=>x.type==this.currentCityObj.type)
				this.chosenResult[i] = {...this.currentCityObj,...val}
				this.citiesVisible = false
			},
			setLowCityHandler(val){
				this.lowCity = val
				this.lowVisible = false
				this.getTopLowTicketHandle()
			},
			setDateHandler(val){
				this.dateRangeValue = val
				//uni.setStorageSync('tdr',val)
				this.dateVisible = false
			},
			handleScroll(val){
				this.scrollTop = val.target.scrollTop
			},
			goHomeHandle(){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	@import url("../../asset/css/flex.css");
	.nav-box{
		height: 44px; /* 这里的44px是示例高度，可根据实际设计调整 */
		line-height: 44px;
		background-color: #FFF;
		color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 2;
		padding-left: 30rpx;
	}
	.nav-box .home-btn{
		width: 60rpx;
		height:60rpx;
		border-radius: 60rpx;
		border:2rpx solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.nav-box .title{
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
		text-align: center;
		width: calc(100vw - 140px);
	}
	.nav-box .home-btn:active{
		background-color: #ccc;
	}
	.air-home {
		background-color: #F3F1EF;
		min-height: 100vh;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/uploads/versions/flight.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		padding: 0 30rpx;
		padding-top: 257rpx;
		padding-bottom: 36rpx;
	}
	.air-low-rank{
		margin-top: 36rpx;
		border-radius: 16rpx;
		padding: 4rpx;
		background-color: #FFF;
	}
	.air-low-rank .header{
		height: 115rpx;
		background: linear-gradient(180deg, #F8EFDD, #FEFEFD);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding: 0 28rpx;
	}
	.air-low-rank .header .city-box{
		background-color: rgba(185, 152, 70, 0.3);
		height: 42rpx;
		border-radius: 21rpx;
		padding: 0 14rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #080A09;
	}
	.air-low-rank .city-list-item{
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
		margin-left: 18rpx;
	}
	.air-low-rank .city-list-item .info-text{
		font-size: 24rpx;
		color: #A4A4A4;
		font-weight: 400;
	}
	.air-low-rank .city-list-item .rank{
		width: 50rpx;
		height: 62rpx;
		line-height: 56rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #080A09AA;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749695490481809.png');
		background-size: 100% 100%;
	}
	.air-low-rank .city-list-item .rank.num1{
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749695490598524.png');
		color: #FFFFFFAA;
	}
	.air-low-rank .city-list-item .rank.num2{
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749695489392934.png');
		color: #FFFFFFAA;
	}
	.air-low-rank .city-list-item .rank.num3{
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749695489378365.png');
		color: #FFFFFFAA;
	}
	.air-low-rank .city-list-item .more-date{
		padding: 12rpx;
		border-radius: 29rpx;
		background-color: #f1f1f1;
		color: #000000DD;
		font-size: 22rpx;
		font-weight: 400;
	}
	.air-home-header {
		border-radius: 18rpx;
		background-color: #FFF;
	}

	.air-home-header .title-box {
		height: 79rpx;
		background: #FAF0DB;
		position: relative;
		border-top-right-radius: 18rpx;
	}

	.air-home-header .title-box .active-item {
		background-color: #fff;
		position: absolute;
		padding-top: 30rpx;
		border-top-right-radius: 18rpx;
		border-top-left-radius: 18rpx;
		top: -10rpx;
		width: 310rpx;
		bottom: 0;
		left: 0;
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #B99846;
	}

	.air-home-header .title-box .active-item .right {
		width: 75rpx;
		height: 89rpx;
		position: absolute;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638745412034709773.png');
		background-size: 100% 100%;
		right: -62rpx;
		top: 0;
	}

	.air-home .air-home-header .air-tools {
		padding: 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>