<template>
	<view class="f-info">
		<u-alert-tips type="warning" description="注意:航班起降时间均为机场当地时间."></u-alert-tips>
		<view class="q-mt-md" v-if="showTitle && flight.length>0">
			<view class="row items-center">
				<view class="city bold">{{flight[0].DepartureName}}</view>
				<u-icon name='qianwangx' custom-prefix="tffont" color="#00000033" size="28"></u-icon>
				<view class="city bold">{{flight[flight.length-1].ArrivalCityName}}</view>
				<view class="col row" style="font-size: 14px;justify-content: flex-end;">
					<text> {{formatDateStringByChinese(flight[0].FlightDate)}}</text>
				</view>
			</view>
		</view>
		<view  style="margin-top: 48rpx;">
			<view class="" v-for="(x,i) in flight" :key="i">
				<view class="row">
					<view class="" style="width:80rpx">
						<view class="item-city">
							{{x.Departure_time}}
							<view class="day-diff" v-if="x.startDiff && x.startDiff.nd!=''">
								{{x.startDiff.nd}}
							</view>
						</view>
						<view class="item-info text-right" style="margin: 48rpx 0;">{{x.endDiff.hours}}h{{x.endDiff.minutes}}m</view>
						<view class="item-city">
							{{x.Arrival_time}}
							<view class="day-diff" v-if="x.endDiff && x.endDiff.nd!=''">
								{{x.endDiff.nd}}
							</view>
						</view>
					</view>
					<view class="item-split"></view>
					<view class="col">
						<view class="item-city">{{x.DIATA}} {{x.dName}}</view>
						<view class="item-info text-right row items-center" style="margin: 48rpx 0;">
							<image style="width: 28rpx;" :src="`https://static.tripcdn.com/packages/flight/airline-logo/latest/airline/48/${x.AlCode}.png`" mode="widthFix"></image>
							<text class="q-ml-sm">{{x.AlName}} {{x.Flight_number}}</text>
						</view>
						<view class="item-city">{{x.AIATA}} {{x.aName}}</view>
					</view>
				</view>
				<view class="row" v-if="x.transfer">
					<view class="item-city" style="opacity: 0; width:80rpx"></view>
					<view class="item-split-dashed"></view>
					<view class="q-mt-md q-mb-md col">
						<view class="zhongzhuan item-info">
							{{x.transfer.city}}中转，{{x.transfer.hours}}h{{x.transfer.minutes}}m
							<text class="warning q-ml-sm" v-if="x.transfer.isCross">跨天中转</text>
							<text class="q-ml-sm" style="color:#FF5858" v-if="x.transfer.changeAirport!=''">注意更换机场</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>

export default {
	data() {
		return {
			flight:[]
		}
	},
	props:{
		value:{
			type:Array,
			default:[],
			require:true
		},
		showTitle:{
			type:Boolean,
			default:true
		}
	},
	watch: {
		value: {
			deep: true,
			immediate: true,
			handler: function(newVal, oldVal) {
				const d = this.formatTimeDifferenceHandle(this.value)
				this.flight = d
			},
		},
	},
	methods:{
		formatTimeDifferenceHandle(vals){
			vals.forEach((x,i)=>{
				const a = `${x.FlightDate} ${x.Departure_time}`
				const diffZoneOffset = x.ArrivalCityUTCZone - x.DepartureUTCZone
				x.ArrivalDate = this.calcArrivalDateHandle(a,diffZoneOffset,x.Arrival_time)
				const b = `${x.ArrivalDate} ${x.Arrival_time}`
				x.endDiff = this.calculateTimeDifference(a,b,diffZoneOffset)
				if(i>0){
					const p = `${vals[i-1].ArrivalDate} ${vals[i-1].Arrival_time}`
					const pzone = vals[i-1].ArrivalCityUTCZone - x.DepartureUTCZone
					console.log(p,a)
					x.startDiff = this.calculateTimeDifference(p,a,pzone)
				}
				
				
				if(i<vals.length-1){
					x.transfer = this.formatTransferHandle(x,vals[i+1])
				}
			})
			return vals
		},
		formatTransferHandle(perv,next){
			const a = new Date(`${perv.ArrivalDate} ${perv.Arrival_time}`)
			const b = new Date(`${next.FlightDate} ${next.Departure_time}`)
			
			const c = Math.abs(a.getTime()-b.getTime())
			const hours = Math.floor(c / 3600000);
			const minutes = Math.round((c % 3600000) / 60000);
			
			return {
				hours,
				minutes,
				isCross:a.getDate()!=b.getDate(),
				city:perv.ArrivalCityName,
				changeAirport:perv.AIATA!=next.DIATA?next.dName:''
			}
		},
		formatDateStringByChinese(d,needWeek=true) {
			const date = new Date(d)
			const weeks = ['日', '一', '二', '三', '四', '五', '六']
			
			let dateStr = `${String(date.getMonth()+1).padStart(2,'0')}月${String(date.getDate()).padStart(2,'0')}日`
			if(needWeek)
				dateStr += `周${weeks[date.getDay()]}`
			return dateStr
		},
		calcArrivalDateHandle(start,timezone,time){
			const a = new Date(new Date(start).getTime()+(timezone * 3600 * 1000))
			const tempb = new Date(`${a.getFullYear()}/${a.getMonth()+1}/${a.getDate()} ${time}`)
			if(tempb<a){
				tempb.setDate(a.getDate()+1)
			}
			return `${tempb.getFullYear()}-${tempb.getMonth()+1}-${tempb.getDate()}`
		},
		parseToUTC(datetimeStr, timezoneOffset) {
		  const [datePart, timePart] = datetimeStr.split(' ');
		  const [year, month, day] = datePart.split('-').map(Number);
		  const [hours, minutes] = timePart.split(':').map(Number);
		
		  const utcTimestamp = new Date(year, month - 1, day, hours, minutes) 
		                      - timezoneOffset * 3600 * 1000;
		  
		  return new Date(utcTimestamp);
		},
		calculateTimeDifference(timeA, timeB, shicha) {
			timeA = timeA.replaceAll('-','/')
			timeB = timeB.replaceAll('-','/')
			const a = new Date(new Date(timeA).getTime()+(shicha * 3600 * 1000))
			const b = new Date(timeB)
			console.log(shicha)
			const diffMs = Math.abs(b.getTime() - a.getTime());
			return {
				hours:Math.floor(diffMs / 3600000),
				minutes:Math.round((diffMs % 3600000) / 60000),
				nd:a.getDate()!=b.getDate()?this.formatDateStringByChinese(b,false):''
			}
		}
	}
}
</script>

<style>
@import url('../../../../asset/css/flex.css');
.f-info *{
	line-height: 1;
}
.f-info .city {
	margin: 0 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #080A09;
}

.f-info .bold {
	font-size: 28rpx;
	font-weight: bold;
	line-height: 1;
}
.f-info .item-city{
	font-weight: bold;
	font-size: 30rpx;
	color: #000000;
	line-height: 1;
	position: relative;
}
.f-info .item-info{
	font-size: 22rpx;
	color: #9999A5;
	line-height: 1;
}
.f-info .item-split{
	margin: 0 16rpx;
	margin-bottom: 20rpx;
	width:12rpx;
	background-color: #E1C27899;
	border-radius: 12rpx;
	margin-top: 10rpx;
}
.f-info .item-split-dashed{
	margin: 0 16rpx;
	border-right: 12rpx dotted #E1C27899;
	margin-top: -5px;
}
.f-info .zhongzhuan{
	padding:30rpx;
	background:#E1C27814;
	border-radius:12rpx;
}
.f-info .warning{
	color: #FF5858;
}
.f-info .item-city .day-diff{
	position: absolute;
	top: -35rpx;
	line-height: 1;
	font-size: 18rpx;
	color: #FF5858;
	left: 0rpx;
	right: 0rpx;
	text-align:center
}
</style>