<template>
	<view>
		<!--加载状态-->
		<control-status2   @changenamelist="changenamelist" ></control-status2>
		<view  >
			<view style="display: flex; margin:8px; ; font-size: 20rpx;" v-for="(item,index) in eventlist" :key="index"
				>
				<view style="width: 5%; border: solid 1px black;border-right: none; border-top-left-radius:2px ;border-bottom-left-radius:2px">
					<view v-if="item.event.priority==0" class="a50">
						
					</view>
					<view v-else-if="item.event.priority==1" class="a51">
						L
					</view>
					<view v-else-if="item.event.priority==2" class="a52">
						M
					</view>
					<view v-else-if="item.event.priority==3" class="a53">
						H
					</view>
					<view v-else class="a50">
						--  
					</view>
					
				</view>
				<view style="background-color: white; width: 95%; border: solid 1px black; border-left: none; border-top-right-radius:10rpx ;border-bottom-right-radius: 10rpx">
					<view style="height: 50rpx;line-height: 50rpx; margin-left: 5px;">
						<uni-row>
							<uni-col :span="5">
								<view  style="color:#0299E3 ;font-weight: 700;" @click="eventDetails(item,1)"> 
									{{item.event.tailnumber}}
								</view>	
							</uni-col>
							<uni-col :span="6">
								<view  style="color:#0299E3 ;font-weight: 700;" @click="eventDetails(item,2)">
									{{item.event.flightNo}}
								</view>	
							</uni-col>
							<uni-col :span="5">
								<view @click="eventDetails(item,0)">
									航段：{{legHandlers(item.event.leg,item.event.totalLeg)}}
								</view>
							</uni-col>
							<uni-col :span="8" >
								<view v-if="statuNameList"  @click="eventDetails(item,0)"> 							
								状态： <span :style="'color: '+namecolour(item.event.controlStateCode,item.event.isSgReserve)">{{chstatus2(statuNameList,item.event.controlStateCode)}}</span> 
									
								</view>
							</uni-col>							
						</uni-row>
					</view>
					<view style="height:50rpx;line-height: 50rpx;margin-left: 5px; background-color: #f0f0f0;" @click="eventDetails(item,0)">
						<uni-row>
							<uni-col :span="5" style="font-weight: 600;">
								<view v-if="item.event.eventType == 'Alert'"> 
									{{item.event.eventType?item.event.eventType:''}}
								</view>
								<view v-else-if ="item.event.eventType != 'Alert'">
									<view v-if="item.event.name == 'FDE' || item.event.name == 'EF-FDE' || item.event.name == 'SMT' || item.event.name == 'MMO'">
										{{item.event.name?item.event.name:''}}
									</view>
									<view  v-else>
										{{item.event.name?'NCMM':''}}
									</view>
									
								</view>
								<view v-else>
									--
								</view>
								
							</uni-col>
							<uni-col :span="6">
								<view >
									{{item.event.code}}
								</view>
							</uni-col>
							<uni-col :span="5">
								<view style="color:#0299E3 ;">
									{{activityups(item.event.activity)}}
								</view>
							</uni-col>
							<uni-col :span="8" >
								<view >
									{{item.event.msgTime?moment.utc(item.event.msgTime).format("YYYY-MM-DD HH:mm"):''}}								
								</view>
							</uni-col>							
						</uni-row>
					</view>
					<view style="padding-left: 5px; line-height: 40rpx;" @click="eventDetails(item,0)">
						<view>
							名称：{{item.event.description}}
						</view>
					</view>
					<view v-if="item.childrenEvents" @click="eventDetails(item,0)">
						<view v-for="(itemchildren,indexchildren) in item.childrenEvents" :key="indexchildren">
							<view style="margin-left: 15px;height: 50rpx;line-height: 50rpx;background-color: #f0f0f0;">
								<uni-row>
									<uni-col :span="5">
										<view style="font-weight: 600;" >
											{{itemchildren.name?itemchildren.name:''}}
										</view>										
									</uni-col>
									<uni-col :span="6">
										<view >
											{{itemchildren.code}}
										</view>
									</uni-col>
									<uni-col :span="5">
										<view style="color:#0299E3 ;">
											{{activityups(itemchildren.activity)}}
										</view>
									</uni-col>
									<uni-col :span="8" >
										<view >
											{{itemchildren.msgTime?moment.utc(itemchildren.msgTime).format("YYYY-MM-DD HH:mm"):''}}
										</view>
									</uni-col>							
								</uni-row>
							</view>
							<view style="padding-left: 15px; line-height: 40rpx;">
								<view>
									名称：{{itemchildren.description}}
								</view>
							</view>
							
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEventListByReportTypeLegId
	} from '@/utils/requestahm.js';
	import
		{priorityList,
		stylepriority,
		legHandler,
        activityup,
		eventsnamecolourList,
		chstatus
		}
	 from '@/static/js/ahm/constant.js';
	import moment from "moment";
	import toHistory from '@/pages/components/ahm/toHistory';
	import controlStatus from '@/pages/components/ahm/controlStatus.vue';
	import controlStatus2 from '@/pages/components/ahm/controlStatus2.vue';
	export default {
		name: 'eventsMonIndex',
		data() {
			return {			
				moment,
				statuNameList:[],
				//eventlist: [],
			}
		},
		props: {
			eventlist: Array,
			item: {
				type: Object,
				default: () => {}
			},
			fleet: {
				type: String,
				default: '',
			},
			reportType: {
				type: String,
				default: '',
			},
			latestAcarsTime: {
				type: String,
				
			}
		},
		components: {
			toHistory,
			controlStatus,
			controlStatus2
		},
		
		methods: {
			//返回状态名
			chstatus2(statuNameList,Code){
				return chstatus(statuNameList,Code)
			},
			changenamelist(item){
				this.statuNameList = item
			},
				
			//namecolour 加载管控状态颜色
			namecolour(codei,isSgReserve){
				
				if(isSgReserve == 0){
					return '#ffaa00'
				}else if(isSgReserve == 1){
					return '#ff0000'
				}
				for (var i = 0; i < eventsnamecolourList.length; i++) {
					if(codei == eventsnamecolourList[i].code){
						return eventsnamecolourList[i].color
					}
				}			
			},
			
			activityups(i){
				return activityup(i);
			},
			//计算航段
			legHandlers(leg,totalLeg){
				return legHandler(leg,totalLeg)
			},
			//事件详情
			eventDetails(item,i) {	
				if(i === 1){
					let param = {
						tailnumber : item.event.tailnumber,
						fleet  : item.event.fleet,
						latestAcarsTime :   item.event.latestAcarsTime
					} 
					uni.navigateTo({
						url: '/pages/modules/ahm/fraMonitoring/historyLeg?param=' +
								encodeURIComponent(JSON.stringify(param))
					})
				}else if(i === 2){
					let param ={
						tailNumber : item.event.tailnumber,
						leg: item.event.leg,
						fleet: item.event.fleet,
						totalLeg: item.event.totalLeg,
						latestAcarsTime :   item.event.latestAcarsTime,
						
					}					
					uni.navigateTo({
						url: '/pages/modules/ahm/fraMonitoring/flightLegDetails?param=' +
								encodeURIComponent(JSON.stringify(param))
								
					})
				}else{
					//事件详情
					item.fleet = this.fleet
					item.latestAcarsTime = this.latestAcarsTime
					uni.navigateTo({
					    url: '/pages/modules/ahm/eventMonitoring/detail?item=' +
					        encodeURIComponent(JSON.stringify(item.event))
					})
				}
			},

			//根据级别不同切换不同的背景
			addclass(i) {
				switch (i) {
					case 0:
						return 'a_wai0';
					case 1:
						return 'a_wai1';
					case 2:
						return 'a_wai2';
					case 3:
						return 'a_wai3';
				}
			},
			
			CheckReports() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})
			},

			//排序
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			},


		},
		
		created() {
			
		}

	}
</script>

<style scoped lang="scss">
	.text_align_right {
		text-align: right;
	}

	.colorbule {
		color: #0299E3;
	}

	.colormsgTime {
		color: #a5a5a5;
	}

	.font-size12 {
		font-size: 12px
	}

	.font-size14 {
		font-size: 14px
	}

	.font-weight600 {
		font-weight: 600
	}

	.font-weight700 {
		font-weight: 700
	}

	.padding-top5 {
		padding-top: 5px;
	}

	.padding-bottom5 {
		padding-bottom: 5px;
	}

	.padding-left5 {
		padding-left: 5px;
	}

	.padding-right5 {
		padding-right: 5px;
	}

	.padding-top10 {
		padding-top: 10px;
	}

	.padding-bottom10 {
		padding-bottom: 10px;
	}

	.padding-left10 {
		padding-left: 10px;
	}

	.padding-right10 {
		padding-right: 10px;
	}

	.margin-bottom5 {
		margin-bottom: 5px;
	}

	.margin-top5 {
		margin-top: 5px;
	}

	.margin-left5 {
		margin-left: 5px;
	}

	.margin-right5 {
		margin-right: 5px;
	}

	.margin-left10 {
		margin-left: 10px;
	}

	.margin-right10 {
		margin-right: 10px;
	}

	.margin-top10 {
		margin-top: 10px;
	}

	.margin-bottom10 {
		margin-bottom: 10px;
	}

	.logo {
		width: 100%;
		height: 60rpx;

	}

	.logo1 {
		width: 90%;
		height: 60rpx;
		padding-left: 20px;
	}

	.a_wai0 {
		margin-left: 10px;
		margin-right: 10px;
		display: flex;
		vertical-align: middle;
		background: #a2a2a2;
		margin-top: 14rpx;
		border: 1px solid #000000;
	}

	.a_wai1 {
		width: 95%;
		display: flex;
		vertical-align: middle;
		background: #F6E308;
		margin-top: 14rpx;
		// border: 1px solid #000000;
	}

	.a_wai2 {
		width: 95%;
		display: flex;
		vertical-align: middle;
		background: #ffaa00;
		margin-top: 14rpx;
		// border: 1px solid #000000;
		;
	}

	.a_wai3 {
		width: 95%;
		// display: flex;
		vertical-align: middle;
		background: #ff0000;
		margin-top: 14rpx;
		// border: 1px solid #000000;
	}

	.a50 {
		background-color: #a2a2a2;
		margin: auto;
		height: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.a51 {
		background-color: #F6E308;
		margin: auto;
		height: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.a52 {
		background-color: #ffaa00;
		margin: auto;
		height: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.a53 {
		background-color: #ff0000;
		margin: auto;
		height: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	


	
</style>
