<template>
	<view class="f-order column" :style="{'background-image': `linear-gradient(180deg, ${orderStyle.bg}, #F5F5F5)`}">
		<scroll-view scroll-y="true" class="col" style="height: 1px;">
			<template v-if="order.CreateDate" v-for="x in lowData">
				<view class="f-order-card" style="background:transparent;" :style="{color:orderStyle.color}">
					<view class="title row items-center">
						<u-icon v-if="order.status==0" name='clock' custom-prefix="tffont" size="44"></u-icon>
						<u-icon v-if="order.status==1" name='checkmark' custom-prefix="tffont" size="44"></u-icon>
						<u-icon v-if="order.status==2" name='close-circle-o' custom-prefix="tffont" size="44"></u-icon>
						<text class="q-ml-sm col bold">
							{{(order.status==0?'待支付':(order.status==1?'正常':'已取消'))}}
						</text>
						<u-count-down :timestamp="endts" v-if="order.status==0" color="#ffffffdd" separator-color="#ffffffdd" :show-days="false" bg-color="transparent"></u-count-down>
					</view>
					<view class="content q-mt-sm">
						<view v-if="order.status==0">
							<view>
								<text>请您于{{dielineTime}}前支付：¥</text>
								<text class="bold">{{order.PreferPrice}}</text>
							</view>
							<view class="small">
								完成支付才能锁定机位
							</view>
						</view>
						<view class="small" v-else-if="order.status==2">
							取消原因：用户超时未付款，自动取消
						</view>
						<view class="small" v-else>
							感谢您的预定，服务专员将会持续为您提供服务
						</view>
					</view>
				</view>
				<view class="f-order-card">
					<view class="row items-center">
						<view class="col">
							<text>总计：¥</text>
							<text class="bold title" style="color: #FF3166;">{{order.PreferPrice}}</text>
							<view class="small" style="color: #9999A5 ;">
								订单编号：{{id}}
							</view>
						</view>
						<view  style="color: #9999A5;" @click="priceVisible=true">
							<view class="content row items-center" style="justify-content: flex-end;">
								<text style="line-height: 1;">明细</text>
								<u-icon name='arrow_right' custom-prefix="tffont" color="#00000066" size="28"></u-icon>
							</view>
							<view class="small" style="margin-top: 10rpx;">
								创建日期:{{order.CreateDate}}
							</view>
						</view>
					</view>
					<template v-if="order.status==1">
						<view class="split-line full"></view>
						<view class="row items-center" style="color: #9999A5;">
							<view class="small col">
								<text>出票状态：</text>
								<text style="color: #000;font-size: 28rpx;" :style="{color:order.TicketList[0].TicketProductList[0].TicketState==0?'#000':'#FF5858'}">{{order.TicketList[0].TicketProductList[0].TicketState==0?'等待出票':'已出票'}}</text>
							</view>
							<view class="small">
								出票日期：
								<text style="color:#000">
									{{order.TicketList[0].TicketProductList[0].TicketDeadline.split(' ')[0]}}
								</text>
							</view>
						</view>
					</template>
				</view>
				<view class="q-mt-md f-order-card uppart"  @click="setFlightDetailHandle(0)">
					<view class="row items-center">
						<view class="flight-status">去程</view>
						<view class="content text-right col">
							{{x.GoFlightList[0].DepartureName}}-{{x.GoFlightList[x.GoFlightList.length-1].ArrivalCityName}} {{formatDateStringByChinese(x.GoFlightList[0].FlightDate)}}
						</view>
					</view>
					<view class="row items-center">
						<view class="first-blond col" style="margin-top: 60rpx;">
							<view class="row items-center">
								<view class="flight-time">
									<view class="">{{x.GoFlightList[0].Departure_time}}</view>
									<view class="thin">{{x.GoFlightList[0].dName.replaceAll('国际机场','').replaceAll('机场','')}}</view>
									<view style="margin-top: 16rpx;font-size: 30rpx;">{{x.GoFlightList[0].DIATA}}</view>
								</view>
								<view class="used-time column col">
									<view class="how-time row items-center justify-center">
										<text>{{x.DepartureTime.Days*24+x.DepartureTime.Hours}}h {{x.DepartureTime.Minutes}}m</text>
										<view class="other-status" v-if="x.GoFlightList.length>1">
											中转{{x.GoFlightList.length-1}}次
										</view>
									</view>
									<view class="line">&nbsp;</view>
									<view class="t-cities" v-if="x.GoFlightList.length>1">
										<template v-for="(c,ci) in x.BackFlightList">
											<text :key="ci" v-if="ci>0" style="margin-right: 6rpx;">{{c.DepartureName}}</text>
										</template>
									</view>
								</view>
								<view class="flight-time">
									<view class="day-diff" v-if="x.GoDiffDay!=0">
										{{`${x.GoDiffDay>0?'+':''}${x.GoDiffDay}`}}天
									</view>
									<view class="">{{x.GoFlightList[x.GoFlightList.length-1].Arrival_time}}</view>
									<view class="thin">{{x.GoFlightList[x.GoFlightList.length-1].aName.replaceAll('国际机场','').replaceAll('机场','')}}</view>
									<view style="margin-top: 16rpx;font-size: 30rpx;">{{x.GoFlightList[x.GoFlightList.length-1].AIATA}}</view>
								</view>
							</view>
							<view class="row items-center" style="margin-top: 14rpx;">
								<view class="row items-center" v-for="(a,ai) in x.GoFlightList">
									<view class="login-box">
										<image :src="`https://static.tripcdn.com/packages/flight/airline-logo/latest/airline/48/${a.AlCode}.png`" mode="widthFix"></image>
									</view>
									<text class="login-text">{{a.Flight_number}} </text>
								</view>
							</view>
						</view>
						<view class="">
							<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
						</view>
					</view>
				</view>
				<view class="f-order-card downpart" @click="setFlightDetailHandle(1)">
					<view class="row items-center">
						<view class="flight-status">回程</view>
						<view class="content text-right col">
							{{x.BackFlightList[0].DepartureName}}-{{x.BackFlightList[x.BackFlightList.length-1].ArrivalCityName}} {{formatDateStringByChinese(x.BackFlightList[0].FlightDate)}}
						</view>
					</view>
					<view class="row items-center">
						<view class="first-blond col" style="margin-top: 60rpx;">
							<view class="row items-center">
								<view class="flight-time">
									<view class="">{{x.BackFlightList[0].Departure_time}}</view>
									<view class="thin">{{x.BackFlightList[0].dName.replaceAll('国际机场','').replaceAll('机场','')}}</view>
									<view style="margin-top: 16rpx;font-size: 30rpx;">{{x.BackFlightList[0].DIATA}}</view>
								</view>
								<view class="used-time column col">
									<view class="how-time row items-center justify-center">
										<text>{{x.ArrivalTime.Days*24+x.ArrivalTime.Hours}}h {{x.ArrivalTime.Minutes}}m</text>
										<view class="other-status" v-if="x.BackFlightList.length>1">
											中转{{x.BackFlightList.length-1}}次
										</view>
									</view>
									<view class="line">&nbsp;</view>
									<view class="t-cities" v-if="x.BackFlightList.length>1">
										<template v-for="(c,ci) in x.BackFlightList">
											<text :key="ci" v-if="ci>0" style="margin-right: 6rpx;">{{c.DepartureName}}</text>
										</template>
									</view>
								</view>
								<view class="flight-time">
									<view class="day-diff" v-if="x.BackDiffDay!=0">
										{{`${x.BackDiffDay>0?'+':''}${x.BackDiffDay}`}}天
									</view>
									<view class="">{{x.BackFlightList[x.BackFlightList.length-1].Arrival_time}}</view>
									<view class="thin">{{x.BackFlightList[x.BackFlightList.length-1].aName.replaceAll('国际机场','').replaceAll('机场','')}}</view>
									<view style="margin-top: 16rpx;font-size: 30rpx;">{{x.BackFlightList[x.BackFlightList.length-1].AIATA}}</view>
								</view>
							</view>
							<view class="row items-center" style="margin-top: 14rpx;">
								<view class="row items-center" v-for="(a,ai) in x.BackFlightList">
									<view class="login-box">
										<image :src="`https://static.tripcdn.com/packages/flight/airline-logo/latest/airline/48/${a.AlCode}.png`" mode="widthFix"></image>
									</view>
									<text class="login-text">{{a.Flight_number}} </text>
								</view>
							</view>
						</view>
						<view class="">
							<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
						</view>
					</view>
				</view>
				<view class="f-order-card q-mt-md">
					<view class="row items-center">
						<view style="font-size: 32rpx;" class="col">
							出行信息
						</view>
						<text class="q-ml-sm">{{crCount}}成人</text>
						<text class="q-ml-sm">{{etCount}}儿童</text>
						<text class="q-ml-sm">{{babyCount}}婴儿</text>
					</view>
					<view class="q-mt-md">
						<view class="guest row items-center" v-for="(x,i) in order.GuestList" :key="i">
							<text>{{String(i+1).padStart(2,'0')}}</text>
							<view class="q-ml-md col">
								<text class="bold" style="color: #000;">{{x.SurName}}/{{x.Name}}</text>
								<text class="q-ml-sm">({{x.Sex==1?'男':'女'}})</text>
							</view>
							<view>
								护照号：{{x.PassportNo}}
							</view>
						</view>
					</view>
					<view class="split-line full"></view>
					<view class="row items-center q-mb-sm q-mb-md">
						<text style="color: #9999A5;width: 56px;" class="q-mr-md">联系人</text>
						<text>{{order.ContactName}}</text>
					</view>
					<view class="row items-center">
						<text style="color: #9999A5;" class="q-mr-md">联系电话</text>
						<text>+86 {{order.ContactMobile}}</text>
					</view>
					
				</view>
			</template>
			<view style="padding-bottom: 20rpx;"></view>
		</scroll-view>
		<view class="botton-box" :style="{paddingBottom:`${bottomSafeHeight}rpx`}">
			<!-- #ifdef MP-DI -->
				<view style=" display: flex;justify-content: space-between;">
					<view class="text-center cities-name" @click="goCancelZK" v-if="order.OrderStatus==1" style="background-color: #fff;border: 1px solid #1d1d20;flex:1; border-radius: 10rpx;height: 80rpx; line-height: 80rpx;color:#333">取消订单</view>
					<view class="text-center cities-name" @click="submitGetCodeByOrderNo" v-if="order.OrderStatus==1" style="background-color: #1d1d20;flex:1;border-radius: 10rpx;height: 80rpx; line-height: 80rpx;color:#EEF1F4;margin-left: 20rpx;">立即支付</view>
				</view>
				
			<!-- #endif -->
			<!-- #ifdef MP-AG -->
				<view class="text-center cities-name" @click="cancelVisible=true" v-if="order.status==0" style="background-color: #1d1d20;border-radius: 10rpx;height: 80rpx; line-height: 80rpx;color:#EEF1F4">取消订单</view>
			<!-- #endif -->
			<view class="text-center cities-name" @click="requeryHandle" v-if="order.status==2" style="background-color: #1d1d20;border-radius: 10rpx;height: 80rpx; line-height: 80rpx;color:#EEF1F4">再次预定</view>
			<view class="row" v-if="order.ResultPrice && order.status==1">
				<view class="col" style="color: #9999A5;">
					<text class="small">已支付：¥ </text>
					<text style="font-size: 40rpx;font-weight: bold;color:#ff3166;">
						{{order.ResultPrice-Number(order.DueInMoney)}}
					</text>
				</view>
				<view style="font-size: 22rpx;">
					<view class="text-right">
						如有变更，请联系：
					</view>
					<view class="">
						{{order.SaleName}}/{{order.SalePhone}}
					</view>
				</view>
			</view>
		</view>
		<u-popup mode="bottom" border-radius="20" :popup="false" v-model="flightVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="popupClose" :z-index="9999">
			<view style="padding:30rpx;min-height: 60vh;">
				<flight :value="currentFlight"></flight>
			</view>
		</u-popup>
		<u-popup mode="bottom" border-radius="20" :popup="false" v-model="priceVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="popupClose" :z-index="9999">
			<view style="padding:50rpx;">
				<view style="font-size: 32rpx;font-weight: bold;">
					价格明细
				</view>
				<view class="q-mt-md">
					<view v-if="crCount>0" class="row items-center price-list-details">
						<view class="col">
							<text style="margin-right: 30rpx">成人</text>
						</view>
						<view>{{ crCount }}人 × ¥{{B2BPrice}}</view>
					</view>
					<view v-if="etCount>0" class="row items-center price-list-details">
						<view class="col">
							<text style="margin-right: 30rpx">儿童</text>
						</view>
						<view>{{ etCount }}人 × ¥{{B2BPrice}}</view>
					</view>
					<view v-if="babyCount>0" class="row items-center price-list-details">
						<view class="col">
							<text style="margin-right: 30rpx">婴儿</text>
						</view>
						<view>{{ babyCount }}人 × ¥{{babyPrice}}</view>
					</view>
					<view style="border-top: 1px dashed #f1f1f1;padding-top: 40rpx;" class="row items-center price-list-details">
						<view class="col">
							<text style="margin-right: 30rpx">小记</text>
						</view>
						<view>¥{{order.PreferPrice}}</view>
					</view>
					<view v-if="order.DiscountMone>0" class="row items-center price-list-details" :style="{color:'#FF5858'}">
						<view class="col">
							<text style="margin-right: 30rpx">优惠券</text>
						</view>
						<view>-¥{{order.DiscountMone}}</view>
					</view>
					<view style="border-top: 1px dashed #f1f1f1;padding-top: 40rpx;" class="row items-center price-list-details">
						<view class="col">
							<text style="margin-right: 30rpx">合计应收</text>
						</view>
						<view style="color: #FF5858;">
							<text>¥</text>
							<text style="font-size: 32rpx;">{{order.ResultPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal :border-radius="16" @confirm="cancleOrderHandle" title="订单取消提醒" content="你正在取消订单,是否确认执行" @cancel="cancelVisible=false" v-model="cancelVisible" confirm-text='确认取消' cancel-text='关闭' confirm-color='#DEBF7B' cancel-color='#080A09' :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import Flight from './components/flight/Index.vue'
	export default {
		data() {
			return {
				timestamp: 86400,
				statusColors:['#ff3166','#ECDFC4','#dddddd'],
				fontsColors:['#FFFFFFbb','#1D1D20','#1D1D20'],
				order:{status:4},
				id:0,
				flightVisible:false,
				lowData:[],
				orderStyle:{
					bg:'',
					color:''
				},
				currentFlight:[],
				bottomSafeHeight:30,
				endts:0,
				cancelVisible:false,
				priceVisible:false,
				dielineTime:'',
				guest:[],
				submit: false,
				OrderTypeStr: '',
				OrderNo: '',
			}
		},
		computed:{
			crCount() {
				const r = this.guest.filter(x => x.year >= 12)
				return r.length
			},
			etCount() {
				const r = this.guest.filter(x => x.year >= 2 && x.year < 12)
				return r.length
			},
			babyCount() {
				const r = this.guest.filter(x => x.year < 2)
				return r.length
			},
			B2BPrice(){
				if(!this.order.TicketList) return 0
				return this.order.TicketList[0].TicketProductList[0].B2BPrice
			},
			babyPrice() {
				
				if(!this.order.TicketList) return 0
				const p = this.order.TicketList[0].TicketProductList[0].B2BPrice
				
				let bp = this.order.TicketList[0].TicketProductList[0].BabyPrecent
				bp = bp && bp != '' ? (parseFloat(bp) / 100.00) : 0
				return Math.ceil(bp * p)
			},
		},
		components:{Flight},
		onLoad(options) {
			if(options.OrderNo||(options.id&&options.OrderTypeStr)){
				this.id = options.id
				this.order.status = options.status?options.status:1
				this.OrderTypeStr = options.OrderTypeStr
				this.OrderNo = options.OrderNo
				uni.setNavigationBarTitle({
					title:'特价机票订单详细信息'
				})
				this.setThemeHandle()
				this.getOrderInfoHandler()
				return
			}else if(options.id){
				this.id = options.id
				this.order.status = options.status?options.status:1
				uni.setNavigationBarTitle({
					title:'特价机票订单详细信息'
				})
				this.setThemeHandle()
				this.getOrderDetailHandle()
				return
			}
			this.navigatorToHomeHandle()
		},
		methods: {
			submitGetCodeByOrderNo() {
				if (this.submit) return;
				this.submit = true
				this.apipost("GetCodeByOrderNo_post", {
					OrderNo: this.OrderNo,
					MallBaseId: uni.getStorageSync("mall_UserInfo").MallBaseId
				}, (res) => {
					if (res.resultCode == 1) {
						this.orderInfo =JSON.parse(res.data.sPayInfo)
						this.goPayHandler();
					} else {
						uni.showToast({
							title:res.message,
							icon:'none',
							duration:3000
						})
						this.submit = false;
					}
				});
			},
			goPayHandler() {
				let that = this;
				uni.requestPayment({
					provider: "wxpay",
					timeStamp: this.orderInfo.timeStamp,
					nonceStr: this.orderInfo.nonceStr,
					package: this.orderInfo.package,
					signType: this.orderInfo.signType,
					paySign: this.orderInfo.sign,
					success: function(res) {
						console.log("success", res);
						that.submit = false;
						uni.showToast({
							title: "支付成功",
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/jiuzhai/paysuccess?PreferPrice=" +
								that.price +
									"&isFrom=4",
							});
						}, 100);
					},
					fail: function(err) {
						console.log("fail:", err);
						that.submit = false;
						uni.showToast({
							title: "支付失败",
							icon: "none",
						});
					},
				});
			}, 
			getOrderInfoHandler(){
				this.apipost("GetDetailsByErpOrderId_post",{
					OrderNo: this.OrderNo, 
					ErpOrderId: this.id,
					OrderTypeStr: this.OrderTypeStr,
				},res=>{
					if(res.resultCode==1){
						this.OrderNo = res.data.OrderNo
						this.id = res.data.ErpOrderId
						this.order = {
							OrderStatus:res.data.OrderStatus
						}
						this.getOrderDetailHandle()
					}else{
						
					}
				})
			},
			calcSafeArea() {
			  const { safeAreaInsets } = uni.getSystemInfoSync()
			  this.bottomSafeHeight = safeAreaInsets.bottom > 0 ? (safeAreaInsets.bottom*2) : 30
			},
			setThemeHandle(){
				uni.setNavigationBarColor({
					backgroundColor: this.statusColors[this.order.status],
					frontColor:'#000000'
				})
				this.orderStyle = {
					color:this.fontsColors[this.order.status],
					bg:this.statusColors[this.order.status]
				}
			},
			navigatorToHomeHandle() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			popupClose(){
				this.flightVisible=false
				this.priceVisible=false
			},
			setFlightDetailHandle(t){
				this.currentFlight = t==0?this.lowData[0].GoFlightList:this.lowData[0].BackFlightList
				this.flightVisible=true
			},
			getOrderDetailHandle(){
			    uni.showLoading()
			    this.apipost("sellorder_post_Get2025OrderEntityAirTicket",{ID:this.id,IsGetGuest:1},(res) => {
					uni.hideLoading()
					if(res.resultCode==1){
						res.data.status = res.data.OrderState==1?1:(res.data.OrderState==4?2:0)
						if(res.data.status==0){
							let endTime = new Date(res.data.CreateDate)
							endTime.setHours(endTime.getHours()+6)
							this.endts = Math.floor(( endTime.getTime() - new Date().getTime())/1000)
							if(this.endts<=0){
								this.cancleOrderHandle()
							}
							this.dielineTime = `${endTime.getHours()}时${endTime.getMinutes()}分`
						}
						this.order = {
							...this.order,
							...res.data
						}
						this.setThemeHandle()
						this.lowData = this.formatLowData(res.data.TicketList)
						this.getGuestHandle()
					}
					
				},(e)=>{
					uni.hideLoading()
				})
			},
			getGuestHandle(){
				this.order.GuestList.forEach(x=>{
					x.year = this.calculateAge(x.Birthday)
				})
				this.guest  = this.order.GuestList
				console.log(this.guest)
			},
			calculateAge(birthDate) {
			    const birth = new Date(birthDate);
			    const now = new Date();
			
			    let birthYear = birth.getFullYear();
			    let birthMonth = birth.getMonth();
			    let birthDay = birth.getDate();
			
			    let currentYear = now.getFullYear();
			    let currentMonth = now.getMonth();
			    let currentDay = now.getDate();
			    let age = currentYear - birthYear;
			    if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
			        age--;
			    }
			
			    return age;
			},
			cancleOrderHandle(){
				this.cancelVisible=false
				uni.showLoading()
				this.apipost("sellorder_post_B2BRemoveOrder",{ID:this.id},(res) => {
					uni.hideLoading()
					this.order.status=2
					this.setThemeHandle()
				},(e)=>{
					uni.hideLoading()
				})
			},
			goCancelZK() {
				let that = this
				uni.showLoading()
				wx.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: (tip) => {
						if (tip.confirm) {
							that.apipost(
								"GetCancelOrder_post", {
									OrderNo: that.OrderNo,
								},
								(res) => {
									if (res.resultCode == 1) {
										uni.showToast({
											title: "操作成功",
											icon: "success",
										});
										that.setThemeHandle();
										that.getOrderInfoHandler()
									}
									uni.hideLoading()
								},
								(err) => {}
							);
						}else uni.hideLoading()
					}
				})
				
			},
			requeryHandle(){
				const x = this.lowData[0].GoFlightList
				const d=[
					{
						type:0,
						ID:x[0].DepartureCity,
						Name:x[0].DepartureName
					},
					{
						type:1,
						ID:x[x.length-1].ArrivalCityId,
						Name:x[x.length-1].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'
				uni.navigateTo({
					url
				})
			},
			formatLowData(d) {
				if (!d || d.length == 0) return []
				const list = d[0].TicketProductList
				list.sort((a, b) => {
					return new Date(a.FlightDate) - new Date(b.FlightDate);
				})
				list.forEach(x=>{
					x.GoFlightList = x.FlightList.filter(f=>f.FlightType==1)
					x.BackFlightList = x.FlightList.filter(f=>f.FlightType==3)
					
					const go = x.GoFlightList[0]
					const back = x.BackFlightList[0]
					x.GoDiffDay = this.resolveDiffDayHandle(`${go.FlightDate} ${go.Departure_time}`,go.DepartureUTCZone,go.ArrivalCityUTCZone,x.DepartureTime)
					x.BackDiffDay = this.resolveDiffDayHandle(`${back.FlightDate} ${back.Departure_time}`,back.DepartureUTCZone,back.ArrivalCityUTCZone,x.ArrivalTime)
				})
				this.formatDisplayHandle(list)
				return list
			},
			formatDisplayHandle(list){
				this.dateDisplay = list.reduce((acc, item) => {
				    const arr = item.FlightDate.split('-')
				    const groupValue = `${arr[0]}${Number(arr[1])}${Number(arr[2])}`;
				    const currentPrice = item.B2BPrice;
				    				
				    if (!acc[groupValue]) {
				        acc[groupValue] = '¥'+currentPrice;
				    } else {
				        acc[groupValue] = '¥'+Math.min(parseFloat(acc[groupValue].replaceAll('¥','')), currentPrice);
				    }
				    				
				    return acc;
				}, {});
			},
			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()]}
			},
			formatDateStringByChinese(d) {
				const date = new Date(d)
				return `${String(date.getMonth()+1).padStart(2,'0')}月${String(date.getDate()).padStart(2,'0')}日`
			},
			flightDateChangeHandle(date){
				this.currentDate = date
				this.centerSelectedItem()
			},
			resolveDiffDayHandle(s,sz,ez,ti){
				const sDate = new Date(s)
				const sourceDate = new Date(s)
				sDate.setHours(sDate.getHours()+(ez-sz))
				sDate.setDate(sDate.getDate()+ti.Days)
				sDate.setHours(sDate.getHours()+ti.Hours)
				sDate.setMinutes(sDate.getMinutes()+ti.Minutes)
				sDate.setHours(0,0,0)
				sourceDate.setHours(0,0,0)
				return (((sDate.getTime()-sourceDate.getTime())/(24 * 60 * 60 * 1000)))
			},
		}
	}
</script>

<style>
@import url('../../asset/css/flex.css');
.f-order{
	height: 100vh;
	background-color: #F5f5f5;
	background-image: linear-gradient(180deg, #ECDFC4, #F5F5F5);
	background-size: 100% 40vh;
	background-repeat: no-repeat;
	padding-top: 30rpx;
	
}
.f-order *{
	line-height: 1;
}
.f-order .f-order-card{
	margin: 0 30rpx;
	background-color: #FFF;
	border-radius: 16rpx;
	padding:30rpx;
	color: #1d1d20;
}
.f-order .f-order-card.top-status{
	padding: 0;
}
.f-order .f-order-card .title{
	font-size: 36rpx;
}
.f-order .f-order-card.uppart{
	border-radius: 16rpx 16rpx 0 0;
	position: relative;
}
.f-order .f-order-card.uppart::after{
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 16px;
	bottom: -8px;
	background: #f5f5f5;
	display: block;
	content: ' ';
	left: -8px;
	z-index: 2;
}
.f-order .f-order-card.downpart{
	border-radius: 0 0 16rpx 16rpx;
	position: relative;
	border-top: 1rpx dashed #f5f5f5;
}
.f-order .f-order-card.downpart::before{
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 16px;
	top: -8px;
	background: #f5f5f5;
	display: block;
	content: ' ';
	right: -8px;
	z-index: 2;
}
.f-order .f-order-card .split-line{
	margin: 20rpx 0;
	height: 1px;
	background-color: #00000014;
}
.f-order .f-order-card .split-line.full{
	margin: 20rpx -30rpx;
}
.f-order .f-order-card .content{
	font-size: 26rpx;
}
.f-order .bold{
	font-weight: bold;
}
.f-order .small{
	font-size: 22rpx;
}
.f-order .flight-status {
	background: #E1C278;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #111111;
	font-weight: 400;
	padding: 7rpx 14rpx;
}
.f-order .flight-time{
	font-weight: bold;
	font-size: 42rpx;
	color: #000000;
	line-height: 1;
	margin:0 20rpx;
	position: relative;
	
}
.f-order .flight-time .day-diff{
	position: absolute;
	top: -35rpx;
	line-height: 1;
	font-size: 22rpx;
	color: #FF5858;
	left: 4rpx;
}
.f-order .flight-time .thin{
	line-height: 1;
	margin-top: 16rpx;
	font-weight: 400;
	font-size: 22rpx;
	color: #9999A5;
	max-width: 45px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.f-order .used-time{
		margin-top: -16rpx;
}
.f-order .used-time .how-time{
	height: 24rpx;
	font-size: 20rpx;
	color: #9999A5;
}
.f-order .used-time .other-status{
	background: #ECF1F4;
	border-radius: 4rpx;
	height: 24rpx;
	font-size: 18rpx;
	color: #111111;
	padding: 0 7rpx;
	margin-left: 14rpx;
	font-weight: 500;
}
.f-order .used-time .line{
	height: 4rpx;
	background: #ECF1F4;
	position: relative;
	margin-top: 6rpx;
}
.f-order .used-time .line::before,
.f-order .used-time .line::after{
	position: absolute;
	left: 0;
	top:-4rpx;
	width: 12rpx;
	height: 12rpx;
	border-radius: 12rpx;
	display: block;
	content: ' ';
	background: #ECF1F4;
}
.f-order .used-time .line::after{
	left: unset;
	right: 0;
}
.f-order .used-time .t-cities{
	font-size: 19rpx;
	color: #111111;
	margin-top: 8rpx;
	text-align: center;
}
.f-order .flight-time .day-diff{
	position: absolute;
	top: -35rpx;
	line-height: 1;
	font-size: 22rpx;
	color: #FF5858;
	left: 4rpx;
}
.f-order .login-box{
	background: #FFFFFF;
	border-radius: 50%;
	border: 1px solid #ECF1F4;
	width: 36rpx;
	height: 36rpx;
	text-align: center
}
.f-order .login-box image{
	width: 26rpx;
	height: 26rpx;
}
.f-order .login-text{
	font-size: 22rpx;
	color: #9999A5;
	margin-right: 36rpx;
	margin-left: 10rpx;
}
.f-order .guest{
	font-size: 26rpx;
	color: #9999A5;
	padding: 20rpx 0;
	border-top: 1rpx dashed #f5f5f5;
}
.f-order .guest:first-child{
	border-top:none;
	padding: 0;
	padding-bottom: 20rpx;
}
.f-order .botton-box{
	padding:30rpx 40rpx;
	box-shadow: 0 0 20rpx #00000014;
	background-color: #FFF;
}
.price-list-details {
	margin-bottom: 40rpx;
	color: #999;
	font-size: 24rpx;
}
</style>
