<template>
	<view >
		
		<!-- 头部 -->
		<uni-card  >
			<uni-row style="font-size: 20rpx; color: #969696; border-bottom: 1px solid #bfbfbf;text-align: right;padding-bottom: 10rpx;">
				更新时间:{{undateDate}}
			</uni-row>
			<!-- <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text> -->
			<uni-row class="demo-uni-row" style="text-align: center; font-size: 20rpx;padding-top: 10rpx;" >
				<uni-col :span="12">
					<view class="demo-uni-col">
						<text class="labelStyle">机号：</text>
						<text class="textStyle">{{tailNumber}}</text>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="demo-uni-col">
						<text class="labelStyle">机队：</text>
						<text class="textStyle">{{fleet}}</text>
					</view>
				</uni-col>
			</uni-row>
		</uni-card>
		<!-- 航段内容 -->
		<view v-if="dataSource">
			<view v-for="(item,index) of dataSource" :key="index">
				<uni-card :isFull="true" padding="0px" style="margin: 20rpx;" >
					<!-- cardHeader -->
					<template v-slot:title>
						<uni-row style="font-size: 22rpx;padding-top: 4rpx;padding-bottom: 4rpx;" >
							<uni-col :span="2" v-if="item.priority" >
								
								<uni-icons v-if="item.priority==1" custom-prefix="iconfont" :color="warningStyle(item.priority)"
									type="icon-jibie1" size="20"></uni-icons>
								<uni-icons v-if="item.priority==2" custom-prefix="iconfont" :color="warningStyle(item.priority)"
									type="icon-jibie2" size="20"></uni-icons>
								<uni-icons v-if="item.priority==3" custom-prefix="iconfont" :color="warningStyle(item.priority)"
									type="icon-jibie3" size="20"></uni-icons>
							</uni-col>
							
							<uni-col :span="9" > 航班：{{item.flightNo}}</uni-col>
							<uni-col :span="5" >
								{{legHandler(item.leg,item.totalLeg)}}
							</uni-col>
							<uni-col :span="8" >
								<view  v-if="item.delayInfoList.length > 0" @click="isdelayInfoList(item.delayInfoList)">
									是否延误：<label style="color: #5555ff;">是</label>
								</view>
								<view v-else>是否延误：否</view>
							</uni-col>
						</uni-row>
					</template>
					<!-- cardContent-->
					<view>
						<uni-row style="text-align:center;font-size: 22rpx;padding-top: 4rpx;padding-bottom: 4rpx;">
							<uni-col :span="8">
								<view class="demo-uni-col">
									<text class="textStyle1"
										@click="takeOffAirport({value:item.dep})">{{!item.dep?'无':item.dep}}</text>
								</view>
							</uni-col>
							<uni-col :span="8">
								<uni-icons custom-prefix="iconfont" type="icon-feiji" size="22"></uni-icons>
							</uni-col>
							<uni-col :span="8">
								<view class="demo-uni-col">
									<text class="textStyle1"
										@click="takeOffAirport({value:item.arr})">{{!item.arr?'无':item.arr}}</text>
								</view>
							</uni-col>
						</uni-row>
						<uni-row style="font-size: 20rpx; ">
							<uni-col :span="12">
								<uni-row >
									<uni-col :span="9">
										<view style="font-weight: 600;">
											起飞时间：
										</view>
									</uni-col>
									<uni-col :span="15">
										{{item.outTime ? moment.utc(item.outTime).format('YYYY-MM-DD HH:mm') : '--'}}
									</uni-col>
								</uni-row>
								
							</uni-col>
							<uni-col :span="12">
								<uni-row >
									<uni-col :span="9">
										<view style="font-weight: 600;">
											落地时间：
										</view>
									</uni-col>
									<uni-col :span="15">
										{{item.inTime ? moment.utc(item.inTime).format('YYYY-MM-DD HH:mm') : '飞行中'}}
									</uni-col>
								</uni-row>
								<!-- <uni-row style="text-align: left;">
									落地时间：
								</uni-row>
								<uni-row>
									{{item.inTime ? moment.utc(item.inTime).format('YYYY-MM-DD HH:mm:ss') : '飞行中'}}
								</uni-row> -->

							</uni-col>
						</uni-row>
					</view>
					<!-- cardFooter -->
					<uni-row style="padding-bottom: 10rpx; text-align:center; font-size: 20rpx;">
						<uni-col v-if="item.efReport" :span="!item.isFault?24:12"
							style="background-color: #e6eaf1;border: 0.5px solid #bfbfbf;color: #0299E3;">
							<view @click="tofault(item,'EF')">
								EF
							</view>
						</uni-col>
						<uni-col v-if="item.isFault" :span="!item.efReport?24:12"
							style="background-color: #e6eaf1;border: 0.5px solid #bfbfbf;color: #0299E3;">
							<view @click="tofault(item,'FS')">
								FS
							</view>
						</uni-col>
					</uni-row>
				</uni-card>
			</view>
		</view>
		
		<view>
			<uni-popup ref="popup" type="bottom">
				<view style="background-color: #ffffff;height: 400px;">
					<view v-for="(item,index) in delayInfoListitem" key="index">
						<view style="padding-left: 10rpx; padding-top: 10rpx;">
							编号：{{item.delayNo}}
						</view>
						<view style="padding-left: 10rpx; padding-top: 10rpx;">
							代码：{{item.delayCode}}
						</view>
						<view style="padding-left: 10rpx; padding-top: 10rpx;">
							时长：{{item.delayDur}}
						</view>
						<view style="padding-left: 10rpx; padding-top: 10rpx;">
							原因：{{item.delayTxt}}
						</view>
						<view style="padding-left: 10rpx; padding-top: 40rpx; color: #0299E3; text-align: center;" @click="closes">
							关闭
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getMonitorInfo,
		getFlightLegHistoryList,
		getAirportDetail
	} from "@/utils/requestahm.js"
	import moment from "moment"
	export default {
		name: "historyLegs",
		data() {
			return {
				delayInfoListitem:[],
				icontype:'',
				card:{} ,//卡片视图
				moment,
				gutter: 0,
				nvueWidth: 730,
				
				dataSource: [],
				legCount: '',
				
			}
		},
		props:{
			tailNumber:{
				type:String,
			},
			fleet:{
				type:String,
			},
			undateDate:{
				type:String,
			}
			
		},
		mounted() {
		    this.init();
		},
		created() {
			
		},
		methods: {
			closes(){
				this.$refs.popup.close()
			},
			//查看延误原因
			isdelayInfoList(item){
				this.delayInfoListitem = item
				this.$refs.popup.open()
			},
			//EF FS 跳转
			tofault(item,i) {
				
				let param = {
					legId: item.id,
					fleet: item.fleet,
					tailNumber: item.tailnumber,
					currentRow: {
						tailnumber: item.tailnumber,
						fleet: item.fleet,
						flightNo: item.flightNo,
						totalLeg: item.totalLeg,
						leg: item.leg,
						dep: item.dep,
						arr: item.arr,
						latestAcarsTime: item.latestAcarsTime,
					},
				}
				let falg = i
				if (falg == 'EF') {
					param.reportType = 'EFFDE'
					uni.navigateTo({
						url: '/pages/modules/ahm/fraMonitoring/fault_current?param=' +
							encodeURIComponent(JSON.stringify(param))

					})
				} else if (falg == 'FS') {
					param.reportType = 'Fault'
					uni.navigateTo({
						url: '/pages/modules/ahm/fraMonitoring/fault_Summary?param=' +
							encodeURIComponent(JSON.stringify(param))

					})
				}
			},
			//初始化数据
			async init() {
				
				//显示加载框
				uni.showLoading({
				    title: '加载中...'
				});
				getFlightLegHistoryList({
				    tailNumber: this.tailNumber
				}).then(res => {
					
				    if (res.code == 200) {
						// let items = []
						// if(res.data.length >0){
						// 	for (let i = 0; i < res.data.length; i++) {
						// 		//只取10个航段
						// 		if(i> (-10)){
						// 			items[i] = res.data[i]
						// 		}
						// 	}
						// }
				        //this.dataSource = items
						this.dataSource = res.data.list
						
						if(this.dataSource.length == 0){
							uni.hideLoading();
							uni.showToast({
								title: '无历史航段数据',
								icon: 'none'
							})
						}else{
							// //隐藏加载
							uni.hideLoading();
						}
						
				    }
					
				    console.log("*********后台响应数据777*********", this.dataSource);
				})
				
			},
			

			warningStyle(flag) {
				if (flag == 1) {
					return '#fdd000'
				}
				if (flag == 2) {
					return '#FF9900'
				}
				if (flag == 3) {
					return '#E60000'
				}
			},
			//计算航段
			legHandler(leg, totalLeg) {
				if (!leg) {
					leg === 0 ? leg = 0 : leg = totalLeg = 0;
				}
				if (!totalLeg) {
					totalLeg === 0 ? totalLeg = 0 : leg = totalLeg = 0;
				}
				return '航段：' + Math.min(0, leg - totalLeg);
			},
			//起飞机场
			takeOffAirport(params) {
			
				let flag = params.flag
				if (!params.value) {
					uni.showToast({
						title: '对不起，该航站不存在',
						icon: 'none'
					})
					return
				} else {
					uni.navigateTo({
					    url: '/pages/modules/ahm/fraMonitoring/airportDetails?threeCode=' + params.value
					       
					})
				 }

			},
			//返回到上一页
			clickLeft() {
				uni.navigateBack()
			},
		},
		onLoad(option) {
			
		},

	}
</script>

<style scoped lang="less">
	.light {
		background-color: #e5e9f2;
	}

	.demo-uni-col {
		
		.labelStyle {
	
			font-weight: bold;
		}

		.textStyle {
			
			font-weight: bolder;
			//color: #5a87f7;
		}

		.textStyle1 {
			font-weight: bold;
			color: #0299E3;
		}

	}

	
</style>
