<template>
	<view class="cities-list column">
		<view class="search-box column items-center justify-center">
			<view class="row items-center" @click="resetCityVisible=true">
				<text class="cities-name">{{chosenResult[0].Name}}</text>
				<view style="margin:0 30rpx">
					<u-icon name="wangfan1" custom-prefix="tffont" color="#00000066" size="36"></u-icon>
				</view>
				<text class="cities-name">{{chosenResult[1].Name}}</text>
				<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
			</view>
			<view @click="()=>dateVisible=true" class="q-mt-sm row items-center" style="font-size: 24rpx;color:#000000BB">
				<text>{{ dateRangeValue.formatStartDate }}</text>
				<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
			</view>
			<chosen-city @closed="resetCityVisible=false" @change="setNewCitiesHandle" :value="chosenResult" v-if="resetCityVisible"></chosen-city>
			<u-popup mode="bottom" border-radius="20" :popup="false" v-model="dateVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="()=>dateVisible=false" :z-index="9999">
				<date-range :value="dateRangeValue" @change='setDateHandler'></date-range>
			</u-popup>
		</view>
		<scroll-view scroll-y="true" style="width: 100%;height: 1px;" class="col">
			<view class="air-low-rank">
				<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:10vh 0" class="text-center" v-else-if="lowData.length==0">
					<u-empty mode="data"></u-empty>
				</view>
				<view v-else>
					<view class="row q-mb-md" v-for="(x,i) in lowData" :key="i">
						<image style="width: 160rpx;height: 200rpx;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 @click="goListHandle('',x)" style="margin-bottom: 30rpx;" class=" row items-center">
								<view class="bold col">{{x.DepartureName}} - {{x.ArrivalCityName}}</view>
								<view class="row items-center">
									<view style="font-size: 22rpx;">更多日期</view>
									<u-icon name='arrow_right' custom-prefix="tffont" color="#00000066" size="28"></u-icon>
								</view>
							</view>
							<view @click="goListHandle(f.FlightDate,x)" class="flights row items-center" v-for="(f,fi) in x.TicketProductList">
								<image style="width: 30rpx;" :src="`https://static.tripcdn.com/packages/flight/airline-logo/latest/airline/48/${f.AlCode}.png`" mode="widthFix"></image>
								<view style="font-size: 22rpx;width:50rpx;margin:0 4px">
									{{ f.DayCount }}天
								</view>
								<view style="font-size: 22rpx;">
									{{ f.FlightDateString }}去
								</view>
								<view class="q-ml-sm col" style="font-size: 22rpx;">
									{{ f.ReturnDateString }}回
								</view>
								<text style="color:#FF3166;font-size: 22rpx;">¥</text>
								<view style="font-weight: bold;font-size: 24rpx;color:#FF3166">
									<!-- #ifdef MP-DI -->
										{{f.B2CPrice}}
									<!-- #endif-->
									<!-- #ifdef MP-AG -->
										{{f.B2BPrice}}
									<!-- #endif -->
								</view>
								<u-icon name='arrow_right' custom-prefix="tffont" color="#00000066" size="28"></u-icon>
							</view>
							
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import ChosenCity from './components/address/ChosenCity.vue'
	import DateRange from './components/time/DateRange.vue'
	export default {
		components:{ChosenCity,DateRange},
		data() {
			return {
				dateRangeValue: {
					type: 0,
					startDate: '',
					fuzzy: {
						fuzzyType: 0,
						fuzzyTypeName: '',
						weeks: [],
						dayRangStatus: false,
						dayRange: [4, 10]
					},
					formatStartDate: '任意时间出发'
				},
				lowCity: {
					type: 0,
					ID: 0,
					Name: '全部'
				},
				resetCityVisible:false,
				dateVisible:false,
				lowData: [],
				chosenResult: [{
						type: 0,
						ID: 0,
						Name: '全部低价城市'
					},
					{
						type: 1,
						ID: 0,
						Name: '全部低价城市'
					}
				],
				loadingLow: false,
				parementers: {
					StartDate: '',
					EndDate: '',
					DepartCityId: 0,
					ArriveCityId: 0,
					AirLineID: 0,
					groupId: 2,
					TicketType: 2,
					StartPlayDay: 0,
					EndPlayDay: 0,
					WeekDay: ''
				}
			}
		},
		created() {
			if (uni.getStorageSync('scf')) {
				const s = uni.getStorageSync('scf')
				this.dateRangeValue = s.dateRange
				this.chosenResult = s.cities
			}
			this.chosenResult.sort((a, b) => {
				return a.type - b.type;
			});
			this.getTopLowTicketHandle()
		},
		mounted() {
			
		},
		methods: {
			
			resolveParameterHanle() {
				this.resetParameterHandle()
				this.parementers.DepartCityId = this.chosenResult[0].ID
				this.parementers.ArriveCityId = this.chosenResult[1].ID

				if (this.dateRangeValue.type == 1) {
					this.parementers.StartDate = this.dateRangeValue.startDate
					this.parementers.EndDate = this.dateRangeValue.startDate
				} else {
					const d = this.resolveDateByFuzzyHandle(this.dateRangeValue.fuzzy.fuzzyType)
					this.parementers.StartDate = d[0]
					this.parementers.EndDate = d[1]
					if (this.dateRangeValue.fuzzy.weeks.length > 0) {
						const weeks = [2, 3, 4, 5, 6, 7, 1]
						this.parementers.WeekDay = weeks.filter((x, i) => this.dateRangeValue.fuzzy.weeks.indexOf(i) != -1)
							.join(',')
					}
					if (this.dateRangeValue.fuzzy.dayRangStatus) {
						this.parementers.StartPlayDay = this.dateRangeValue.fuzzy.dayRange[0]
						this.parementers.EndPlayDay = this.dateRangeValue.fuzzy.dayRange[1]
					}
				}
			},
			resetParameterHandle() {
				this.parementers = {
					StartDate: '',
					EndDate: '',
					DepartCityId: 0,
					ArriveCityId: 0,
					AirLineID: 0,
					groupId: 2,
					TicketType: 2,
					StartPlayDay: 0,
					EndPlayDay: 0,
					WeekDay: ''
				}
			},
			resolveDateByFuzzyHandle(t) {
				if (t == 0) return ['', '']
				let start = new Date();
				let end = new Date()
				if (t == -1) {
					start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
					end.setMonth(end.getMonth() + 1);
				} else if (t == -2) {
					start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
					end.setMonth(end.getMonth() + 3)
				} else {
					const currentDate = new Date()
					currentDate.setMonth(currentDate.getMonth() + t);
					const year = currentDate.getFullYear();
					const month = currentDate.getMonth();
					start = new Date(year, month, 1);
					end = new Date(year, month + 1, 0);
				}
				return [this.formatDateHandle(start), this.formatDateHandle(end)]
			},
			formatDateHandle(date) {
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`
			},
			getTopLowTicketHandle() {
				this.resolveParameterHanle()
				this.lowData = []
				this.loadingLow = true
				this.apipost('AirTicket_get_GetTopTicketProduct', this.parementers, (r) => {
					if (r.resultCode == 1) {
						this.lowData = this.formatLowData(r.data)
						console.log(this.lowData)
					}
					this.loadingLow = false
				}, (e) => {
					this.loadingLow = false
				})
			},
			formatLowData(d) {
				d.forEach((x) => {
					x.TicketProductList.sort((a,b)=>{
						return new Date(a.FlightDate) - new Date(b.FlightDate);
					})
					const newTicket = x.TicketProductList.splice(0,2)
					newTicket.forEach((x)=>{
						const q = x.FlightList.findLastIndex((f) => f.FlightType == 3)
						x.ReturnDate = x.FlightList[q].FlightDate
						x.DayCount = Math.abs((new Date(x.ReturnDate).getTime()-new Date(x.FlightDate).getTime())/(24*60*60*1000))
						x.ReturnDateString = this.formatDateString(x.ReturnDate)
						x.FlightDateString = this.formatDateString(x.FlightDate)
					})
					x.TicketProductList = newTicket
				});
				return d
			},
			formatDateString(d){
				const date = new Date(d)
				const weeks = ['日','一','二','三','四','五','六']
				
				return `${String(date.getMonth()+1).padStart(2,'0')}.${String(date.getDate()).padStart(2,'0')} 周${weeks[date.getDay()]}`  //周${weeks[date.getDay()]}
			},
			setNewCitiesHandle(val){
				this.chosenResult = val
				uni.setStorageSync('scf',{
					cities:this.chosenResult,
					dateRange: this.dateRangeValue
				})
				this.getTopLowTicketHandle()
				this.resetCityVisible = false
			},
			setDateHandler(val){
				this.dateRangeValue = val
				this.dateVisible = false
				uni.setStorageSync('scf',{
					cities:this.chosenResult,
					dateRange: this.dateRangeValue
				})
				this.getTopLowTicketHandle()
			},
			goListHandle(val,x){
				const newCityInfo = [{
						type: 0,
						ID: x.DepartureCity,
						Name: x.DepartureName
					},
					{
						type: 1,
						ID: x.ArrivalCityId,
						Name: x.ArrivalCityName
					}
				]
				uni.setStorageSync('scf',{
					cities:newCityInfo,
					dateRange: this.dateRangeValue
				})
				let url ='/pages/airTicket/ticketList/ticketList'
				if(val!=''){
					url += `?dv=${encodeURIComponent(val)}`
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style>
	@import url('../../asset/css/flex.css');

	.cities-list {
		height: 100vh;
	}

	.search-box {
		height: 200rpx;
		width: 100%;
		box-shadow: 0 0 26rpx #f1f1f1;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638750707031350012.jpg');
		background-size: 100% auto;
	}

	.search-box .cities-name {
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
	}

	.air-low-rank {
		padding: 40rpx;
	}
	.air-low-rank .city-list-item {
		margin-left: 18rpx;
	}
	.air-low-rank .city-list-item .bold{
		font-weight: bold;
		font-size: 32rpx !important;
		color: #080A09;
	}
	.air-low-rank .city-list-item .flights{
		background: #f1f1f1;
		border-radius: 8rpx;
		padding:10rpx;
		margin-top: 10rpx;
	}
	.air-low-rank .city-list-item .info-text {
		font-size: 24rpx;
		color: #A4A4A4;
		font-weight: 400;
	}
</style>