<template>
	<view>
                     
		<view style="text-align: center; font-size: 14px; width: 80%; padding-left: 10PX; ">
			<uni-row>
				<uni-col :span="4">
					<view style="line-height: 20px;border: 1px solid #000000;border-top-left-radius:4px;border-bottom-left-radius:4px" :class="Allcolor(isAllfalg)" @click="clickcolorAll">
						全部
					</view>
				</uni-col>
				<uni-col :span="5">
					<view style="line-height: 20px; border-top : 1px solid #000000; border-bottom :1px solid #000000; border-right:1px solid #000000; ; " :class="calsscolor(iscolorfalg1)" @click="clickcolor('OOOI')" > 
						OOOI
					</view>
				</uni-col>
				<uni-col :span="5">
					<view style="line-height: 20px;border-top : 1px solid #000000; border-bottom :1px solid #000000; border-right:1px solid #000000; ; " :class="calsscolor(iscolorfalg2)" @click="clickcolor('Fault')">
						Fault
					</view>
				</uni-col>
				
				<uni-col :span="5">
					<view style="line-height: 20px;border-top : 1px solid #000000; border-bottom :1px solid #000000; border-right:1px solid #000000; border-top-right-radius:4px; border-bottom-right-radius:4px" :class="calsscolor(iscolorfalg3)" @click="clickcolor('EICAS')">
						EICAS
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		 <view class="padding-top padding-left font-size ">事件类型</view>
		
		<uni-list-item style="font-size: 20rpx;" v-for="(item, index) in list" :key="index" link :title="item.reportType"
		      @click="toggle(item)">
		</uni-list-item>
		
        <uni-popup   ref="popup" type="bottom" >
		    <view style="background-color : #ffffff ;font-size: 20rpx;">
							
				<uni-row >
				    <uni-col :span="16">
				        <view class="padding-top" >
				            <uni-segmented-control :current="current1" :values="tableitems1" :style-type="styleType1"
				                :active-color="activeColors()" @clickItem="onClickItem1" />
				        </view>
				    </uni-col>
				    <uni-col :span="3" :offset="5">
				        <view class="padding-top5">
				        <uni-icons  type="clear" size="32" @click="close"></uni-icons>
				        </view>
				    </uni-col>
				</uni-row>
				
				<scroll-view  scroll-y="true" :style="{height:heightsys+'px'}">
				    <view v-if="current1 === 0">
						<view v-if="itemtypes.category=='OOOI'">
							<view  v-if="oooiItem" style= "margin-left: 10rpx;margin-right: 10rpx;">
							   <uni-row >
								   <uni-col style="border:1ppx solid #ff0000;" :span="4">	
										<view class="border_top border_left  border_bottom">
											 ACID
										</view>								  
								   </uni-col>
								   <uni-col :span="4">
									   <view class="border_top border_left  border_bottom">
										   FLTNO
									   </view>				   
								   </uni-col>
								   <uni-col :span="8">
									   <view class="border_top border_left  border_bottom">
									   		LEG DATE 
									   </view> 						   
								   </uni-col>
								   <uni-col :span="4">
									   <view class="border_top border_left  border_bottom">
											DEP
									   </view>				   
								   </uni-col >
								   <uni-col :span="4">
									   <view class="border_top border_left border_right border_bottom">
									   		ARR								  
									   </view>
								   							   
								   </uni-col>						   
							   </uni-row>
							   <uni-row>
								   <uni-col style="border:1ppx solid #ff0000;" :span="4">	
										<view class=" border_left  border_bottom font_wei6">
											{{oooiItem['ACID'] || '--'}}
										</view>								  
								   </uni-col>
								   <uni-col :span="4">
									   <view class=" border_left  border_bottom font_wei6">
										    {{oooiItem['FLTNO'] || '--'}}
									   </view>				   
								   </uni-col>
								   <uni-col :span="8">
									   <view class=" border_left  border_bottom font_wei6">
									   		{{oooiItem['LEG DATE'] || '--'}}
									   </view> 						   
								   </uni-col>
								   <uni-col :span="4">
									   <view class=" border_left  border_bottom font_wei6">
											{{oooiItem['DEP'] || '--'}}
									   </view>				   
								   </uni-col >
								   <uni-col :span="4">
									   <view class=" border_left border_right border_bottom font_wei6">
									   		{{oooiItem['ARR'] || '--'}}							  
									   </view>
								   							   
								   </uni-col>						   
							   </uni-row>
								<uni-row style="padding-top: 10rpx;">
									<uni-col :span="12">
										<view class="border_top border_left  border_bottom font_wei3">
											TRANSMIT DATE
										</view> 	
									</uni-col>
									<uni-col :span="12">
										<view class="border_top border_left  border_bottom border_right font_wei3">
											MESSAGE DATE
										</view> 	
									</uni-col>
								</uni-row>
								<uni-row>
									<uni-col :span="12">
										<view class=" border_left  border_bottom font_wei6">
											{{oooiItem['TRANSMIT DATE'] || '--'}}	
										</view> 	
									</uni-col>
									<uni-col :span="12">
										<view class=" border_left  border_bottom border_right font_wei6">
											{{oooiItem['MESSAGE DATE'] || '--'}}	
										</view> 	
									</uni-col>
								</uni-row>
							</view>
							<view v-else>解析失败</view>
						</view>
						<view v-else-if ="itemtypes.category=='Fault'">
							<view>
								<middle :title="title" :ttype="ttype" :eventListByReportTypeLegIdData="eventListByReportTypeLegIdData"></middle>
								<!-- 格式化后报文 -->
								 
								 <eventinit-fault :eventlist="eventListByReportTypeLegIdData" :fleet="fleet" :latestAcarsTime="latestAcarsTime">
								 </eventinit-fault>
							</view>
						</view>
						<view v-else-if ="itemtypes.smi=='ENG'">
							<view >
								<scroll-view scroll-x="true">
									<view v-html="faultItem">
									</view>
								</scroll-view>
							</view>
						</view>
				        
				    </view>
				    <view v-if="current1 === 1">
						<view style="padding-left: 20px;">
							<view v-html="formatStr(itemtypes.content)">								
							</view>
						</view>
				        
				
				    </view>
				</scroll-view>
			</view>
            
        </uni-popup>

	</view>

</template>

<script>

import {
		getListByLegId,
		postAnalysisJson,
		getFormattedMessage
	} from '@/utils/requestahm.js';
	import middle from "@/pages/components/ahm/middle.vue";
	import faultEfs from "@/pages/components/ahm/faultEfs.vue";
	import eventinitFault from "@/pages/components/ahm/eventinitFault.vue";
export default {
    data() {
        return {
			heightsys:'',
			widthsys:'',
			reportType:'ON',
			title:'',
			eventListByReportTypeLegIdData:[],
			ttype:'EF',
			
			categorylist:['OOOI','Fault','EICAS'],//类型
			typeOOOI:'',
			typeFault:'',
			typeEICAS:'',
			
			
			isAllfalg:1, // 所有
			iscolorfalg1:0,//飞行中
			iscolorfalg2:0,//计划飞行
			iscolorfalg3:0,//有故障
			iscolorfalg4:0,//无故障
			
			htmls:'',
			htmlsFault:'',
			list:[],
			oooiItem:{},
			faultItem:'',
           
            current1:0,
            tableitems1:['格式化数据','原始数据'],
            styleType1: 'text',
			
			itemtypes:{},

        }
    },
	props:{
		latestAcarsTime:{
			type: String,
		},
		fleet:{
			type: String,
		},
		legId:{
			type: String,
		},
		category:{
			type: Array,
		},
		tailNumber:{
			type:String,
		},
	},
    computed: {

    },
    components:{
		middle,faultEfs,eventinitFault
    },

    methods: {
		//获取tab离页面顶部的距离
		getElementScollTop() {
			let _this = this;		
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					_this.widthsys = Math.ceil(res.windowWidth);
					//_this.widthlast = Math.ceil(res.windowWidth*0.8);	
					_this.heightsys = Math.ceil(res.windowHeight*0.8);	
					console.log('_this.heightsys=',_this.heightsys)
				}
			})
			console.log('scrollHeight===', _this.scrollHeight)
		},
		Allcolor(isAllfalg){
			if(isAllfalg == 0){
				return 'textcolorAll0'
			}else if (isAllfalg == 1){
				return 'textcolorAll1'
			}
		},
		clickcolor(i){
			this.isAllfalg = 0
			this.categorylist = []
			if(i=='OOOI'){
				if(this.iscolorfalg1 == 0){
					this.iscolorfalg1 = 1
					this.typeOOOI = 'OOOI'
				}else if (this.iscolorfalg1 == 1){
					this.iscolorfalg1 = 0	
					this.typeOOOI = ''
				}
			}else if(i== 'Fault'){
				if(this.iscolorfalg2 == 0){
					this.iscolorfalg2 = 1
					this.typeFault = 'Fault'
				}else if (this.iscolorfalg2 == 1){
					this.iscolorfalg2 = 0
					this.typeFault = ''
				}
			}else if(i=='EICAS'){ //ENG
				if(this.iscolorfalg3 == 0){
					this.iscolorfalg3 = 1
					this.typeEICAS = 'EICAS'
				}else if (this.iscolorfalg3 == 1){
					this.iscolorfalg3 = 0
					this.typeEICAS = ''
				}			
			}
			if(this.typeOOOI){
				this.categorylist.push(this.typeOOOI)
			}
			if(this.typeFault){
				this.categorylist.push(this.typeFault)
			}
			if(this.typeEICAS){
				this.categorylist.push(this.typeEICAS)
			}
			this.getdata()
			console.log('-----categorylist-----',this.categorylist)
			
		},
		//全部
		clickcolorAll(){
			if(this.isAllfalg == 0){
				this.isAllfalg = 1
				this.iscolorfalg4 = 0
				this.iscolorfalg3 = 0
				this.iscolorfalg2 = 0
				this.iscolorfalg1 = 0
			}
			this.categorylist = ['OOOI','Fault','EICAS']
			this.getdata()
		},
		calsscolor(isAllfalg){
			if(isAllfalg == 0){
				return 'textcolorAll0'
			}else if (isAllfalg == 1){
				return 'textcolorAll1'
			}
		},
		formatStrfault(itemhtml){
			var htmlsFault = itemhtml
			var reg = new RegExp("\r\n","g");
			this.htmlsFault =  htmlsFault.replaceAll(reg,'<br/>')	
		},
		formatStr(itemhtml) {
						
			this.htmls = itemhtml.split("\r\n").join('<br/>');
			return  this.htmls
		},
        close(){
            this.$refs.popup.close()
        },
		
		getdata(){
			getListByLegId({
				//category: ["OOOI", "Fault", "ACMS", "EICAS", "STAR", "FPC", "UPLINK"],
				category: this.categorylist,
				legId: this.legId,
				tailNumber: this.tailNumber,
			}).then( res => {
				if(res.code == 200){
					let itemlist = res.data.repReports
					console.log('res.data------',res.data)
					this.list = itemlist
					
					//this.list = itemlist.filter(item => item.category == 'OOOI');
					
				}
			})
			
		},

        //弹窗
        toggle(item) {
			this.itemtypes = item
            let type ='bottom'
        	this.type = type
        	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        	this.$refs.popup.open(type)
			//加载格式化数据
			this.clickAnalysisJson(this.itemtypes)
        },
        activeColors() {
            return '#5555ff';
        },
		
		//格式化数据
		clickAnalysisJson(item){
			console.log('格式化数据了---1---',item)
			let type = 1
			switch (item.smi) {
			    case 'DFD':
			        type = 1
					break
			
			    case 'ENG':
			        type = 2
			        break
			}
			this.oooiItem = {}
			if(item.category != 'Fault'){

				postAnalysisJson({
					repReportId: item.id,
					templateName: item.reportType,
					templateType: type,
					version: item.version,
				}).then( res => {
					console.log('---eic---',res)
					this.oooiItem = res.title
					this.faultItem = res.body
					// let ipoi = res.body
					// let ipoi2 = ipoi.replaceAll("<script type=\"text/javascript\">document.write(printValue(`","<td class=\"data center\"><lable>")
					// let ipoi3 = ipoi2.replaceAll("`))<\/script>",'</lable></td>')
					// let ipoi4 = ipoi3.replaceAll("<script type=\"text/javascript\">document.write(printLabel('","<td class=\"data center\"><lable>")
					// let ipoi5 = ipoi4.replaceAll("','OFF'))<\/script>",'</lable></td>')
					// let ipoi6 = ipoi5.replaceAll("','ON'))<\/script>",'</lable></td>')
					// console.log('-ipoi3-',ipoi6)
					// this.faultItem = ipoi6
					//this.faultItem = res.body
					
				})
			}else if(item.category == 'Fault'){

				this.eventListByReportTypeLegIdData = []
				//显示加载框
				uni.showLoading({
					title: '加载中...'
				});
				getFormattedMessage({
					reportId:item.id
				}).then( res => {
					if(res.code == 200){
										
						this.eventListByReportTypeLegIdData = res.data
						//隐藏加载
						uni.hideLoading();
					}else{
						//隐藏加载
						uni.hideLoading();
						
						uni.showToast({
						    title: 'Fault报文解析失败',
						    icon: 'none'
						});
					}
					
				})
			}
					
		},
        
        onClickItem1(e) {
            if (this.current1 !== e.currentIndex) {
                this.current1 = e.currentIndex
            }
        },
             

    },
    onLoad(options) {
		
    },
    created() {
		console.log('legId---------',this.legId)
		console.log('---tailNumber-------',this.tailNumber)
		this.getElementScollTop() 
		this.getdata()
    },
}
</script>

<style scoped lang="scss">
	.textcolorAll0{
		color: #000000;
		background-color: #ffffff;
	}
	.textcolorAll1{
		color: #ffffff;
		background-color: #0299E3;
	}
	.font_wei3{
		font-weight: 300;
	}
	.font_wei6{
		font-weight: 600;
	}
	.border_bottom{
		border-bottom: 1px solid #787878;
	}
	.border_top{
		border-top:1px solid #787878;
	}
	.border_left{
		border-left: 1px solid #787878;
	}
	.border_right{
		border-right: 1px solid #787878;
	}
	
    .padding-top {
        padding-top: 20rpx;
    }
    .padding-top5 {
        padding-top: 10rpx;
    }
    .padding-left{
        padding-left: 20rpx;
    }
    .font-size{
        font-size: 14px;
        font-weight: 600;
    }
</style>
