<template>
	<view>

		<view v-if="item">
			<view class="a_wai0" :class="addclass(item.priority)">
				<view v-if="item.priority==0" class="a_wai_5_0">
					M
				</view>
				<view v-else-if="item.priority==1" class="a_wai_5">
					L
				</view>
				<view v-else-if="item.priority==2" class="a_wai_5_2">
					M
				</view>
				<view v-else-if="item.priority==3" class="a_wai_5_3">
					H
				</view>
				<view v-else class="a_wai_5_0">
					--
				</view>
				<view class="a_wai_95">
					
					<view>
						<uni-row style=" padding-left: 20rpx;padding-top: 10rpx;padding-bottom: 10rpx; ">
							<uni-col :span="6" style="font-weight: 600;"> <!-- #8F9799 -->
								{{item.name}}:
							</uni-col>
							<uni-col :span="10" style=" color: #0299E3; font-weight :700 ">
								{{item.code}}
							</uni-col>
							<uni-col :span="8" style="padding-left: 6rpx;font-weight :600;text-align: right;
							padding-right: 20rpx;">
								{{activityup(item.activity)}}
							</uni-col>							
						</uni-row>
					
					</view>
					<view  style=" padding-left: 20rpx; font-weight:700 ;font-size: 16px;padding-bottom: 10rpx; ">
						{{item.description}}
					</view>
					
					<view v-if="item.eventDetails == ''|| item.eventDetails == null || item.eventDetails.length==0 " 
						style=" padding-left: 20rpx; font-weight:500 ;" >
						<view v-if="item.eventDetails && item.eventDetails.length>0">
							<view @click="mmsgclick(item)">
								Correlated Maintenance
								Messages({{item.eventDetails ==null ?0: item.eventDetails.length}})
							</view>
							
						</view>
						<view v-else>
							
						</view>
					</view>
					<view v-else style=" padding-left: 20rpx; font-weight:500 ;color: #0299E3;padding-bottom: 10rpx; "
						>
						<view v-if="item.eventDetails && item.eventDetails.length>0">
							<view @click="mmsgclick(item)">
								Correlated Maintenance
								Messages({{item.eventDetails ==null ?0: item.eventDetails.length}})
							</view>
							
						</view>
						
					</view>
					

					<view>
						<uni-row style="padding-left: 20rpx;padding-bottom: 10rpx;">
							<uni-col :span="24" style="color:  #CFC9BD;">
								{{item.msgTime}}
							</uni-col>
							<!-- <uni-col :span="12"
								style="font-weight :600;text-align: right; padding-right: 20rpx; color:  #CFC9BD;">
								{{item.phase?item.phase:'--'}}
							</uni-col> -->
						</uni-row>

						<view style="padding-bottom: 10rpx; ">
							<uni-row>
								<to-history :circleFlag="item.circleFlag" :occurLegList="item.legs"
									:occurLegStatusList="item.legsStatus" :items ="item" :fleet="fleet"></to-history>
							</uni-row>
						</view>
						<view v-if="item.name !='FDE' && mmsgnum "  style="line-height: 20px;padding-bottom: 10rpx; ">
							<view>
								<uni-row
									style="padding-left: 20rpx;line-height: 20PX;">
									<uni-col :span="6">FIM手册:</uni-col>
									<uni-col :span="18">
										<view style="color:  #0299E3; font-weight:700 ;font-size: 14px;" @click="gotoFIM()">
											{{mmsgnum}}
										</view>
									</uni-col>
								</uni-row>
							</view>
							
							
						</view>
						<!-- 只有fde的有MEL手册 -->
						<view v-else  style="line-height: 20px;">
							<view v-if="mmsgnum">
								<uni-row
									style="padding-left: 20rpx;padding-bottom: 10px;line-height: 20PX;">
									<uni-col :span="6">FIM手册:</uni-col>
									<uni-col :span="18">
										<view style="color:  #0299E3; font-weight:700 ;font-size: 14px;" @click="gotoFIM()">
											{{mmsgnum}}
										</view>
									</uni-col>
								</uni-row>
							</view>
							<view v-if="melcode">
								<uni-row style="padding-left: 20rpx;padding-bottom: 10rpx;">
									<uni-col :span="6">MEL手册:</uni-col>
									<uni-col :span="18">
										<view  style="color:  #0299E3; font-weight:700 ;font-size: 14px;" @click="gotoFDE(item)">
											{{melcode}}
										</view>
									</uni-col>
								</uni-row>
							</view>
							
						</view>

					</view>
					<view style=" padding-left: 20rpx;padding-top: 10rpx;padding-bottom: 10rpx;" >
						事件描述 ： {{item.faultDescription || '--'}}
					</view>
					<view style=" padding-left: 20rpx;" v-if="qhistoryData">
						<uni-row >
							<uni-col :span="8">
								事件流信息：
							</uni-col>
							<uni-col :span="16">
								<view style="color: #0299E3;" @click="flowfalg ? flowfalg=false :flowfalg=true">
									查看
								</view>
							</uni-col>
						</uni-row>
						
					</view>
					<view v-if="qhistoryData"  style="padding-left: 40rpx;padding-bottom: 5rpx;" v-for="histyitem,hisindex) in qhistoryData" :key="hisindex" v-show="flowfalg">	
							<view v-if="histyitem.eventCode" style="padding-bottom: 5rpx;padding-top: 5rpx; color: #9EA0A6;">
								{{histyitem.username}} {{histyitem.statusName}} {{histyitem.createTime}}						
							</view>
														
					</view>
					<view  v-else>
						无事件流信息
					</view>
				</view>
			</view>
			
			<view v-show="showMMsg" v-for="(items,k) in item.eventDetails" :key="k">
				<view v-if="item.eventDetails.length == fimmorelist.length ">
					<uni-row>
						<uni-col :span="12">
							<view style="color: #9EA0A6; padding-top: 10px; padding-left: 10px;">
								{{items.name}}:{{items.code}}
							</view>
						</uni-col>
						<uni-col :span="12">
							<view
								style="padding-top: 10px;padding-left: 10rpx;font-weight :600;text-align: right;  padding-right: 20rpx;">
								{{activityup(items.activity)}}
							</view>
						</uni-col>
					</uni-row>
					<view>
						<view class=" a_top am_bottom5" style=" padding-left: 20rpx;font-weight: 600;">
							{{items.description}}
						</view>
					</view>


					<uni-row>
						<to-history :circleFlag="items.circleFlag" :occurLegList="items.mmsgLegs" :items="items"
							:occurLegStatusList="items.mmsgLegStatus"  :fleet="fleet"></to-history>
					</uni-row>
					<uni-row style="padding-bottom: 10px;">
						<uni-col :span="8">
							<view style="height: 15px;"></view>
						</uni-col>
						<uni-col :span="16">
							<view class="fimclass" @click="fimurl(items.code)">
								{{fimcode(items.code)}}
							</view>
						</uni-col>
					</uni-row>
					<view style="background-color: #cccccc;height: 1px;"></view>
				</view>

			</view>
			
			<!-- <echarts :items="item"></echarts> -->
		</view>
	</view>
</template>

<script>
	import {
		getHandbookFIM,
		getHandbookMEL,
		showpdf,
		getPdf,
		queryHistory,

		historyStream
	} from '@/utils/requestahm.js'
	import toHistory from '@/pages/components/ahm/toHistory';
	//import echarts from '@/pages/components/ahm/echarts.vue';
	export default {
		name: 'eventsMon',
		data() {
			return {
				flowfalg:false,//事件流显示
				statuNameList:[],//管控状态对应中文
				qhistoryData:[],
				
				mmsgnum: '', //手册号
				mmsgurl: '', //手册地址
				fimmorelist: [], //多个手册
				showMMsg: false,
				fimUrllist: [],
				FDElist: [], //fde显示
				melcode:'',
				
				fimNamelist: [],
				listitem: [],
				showfalg: '-1',
				currentPage:'',
				agreementUrl:'',
			}
		},
		props: {
			fleet:{
				type: String,
			},
			item: {
				type: Object,
				default: () => {}
			},

			isfalg: {
				type: String,
				default: '1',
			}

		},
		components: {
			toHistory,
			//echarts
		},
		methods: {
			
			//根据级别不同切换不同的背景
			addclass(i) {
				switch (i) {
					case 0:
						return 'a_wai0';
					case 1:
						return 'a_wai1';
					case 2:
						return 'a_wai2';
					case 3:
						return 'a_wai3';
				}
			},
			activityup(activityitem) {
				if (activityitem == 1) {
					return 'active'
				} else if (activityitem == 2) {
					return 'inactive'
				} else if (activityitem == 3) {
					return 'latched'
				} else if (activityitem == 4) {
					return 'total_active'
				}else {
					return '--'
				}
			},
			CheckReports() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})
			},

			//初始化查询mel
			async gotoFDE() {
			
				//只有fde的有文件
				if (this.item.name != 'FDE') {
					return
				}
				let de = this.item.description;
				let deinf = de.indexOf(":");
				let tagCode = "";
				if (deinf > 0) {
					tagCode = de.substring(0, deinf);
				} else {
					return;
				}

				let FDEitem = await getHandbookMEL({
					model: "B787",
					tagCode: tagCode,
				})
				this.FDElist = FDEitem.data
				if (FDEitem.code == 200) {
					if(FDEitem.data && FDEitem.data.length > 0 ){
						this.melcode  = FDEitem.data[0].code
						
					}
					
					//this.processingUrl(fimitem.data[0].fimPath)
					//this.topdf()
				}
			},
			topdf(){
				getPdf({
				    model: "B787",
					pdfType:'1'
				}).then(res => {
				    if (!res) {
				        uni.showToast({
				            title: "协议预览失败",
				            duration: 2000
				        });
				    } else {
				        let pdfData = res.data; //pdfData是后端返回的文件流
				        let blob = this.base64ToBlob(pdfData)
				        let pdfData1 = window.URL.createObjectURL(blob) //创建预览路径
				        
				
				        this.agreementUrl = pdfData1
						uni.navigateTo({
						    url: '/pages/modules/ahm/eventMonitoring/showPdf?pdfUrl=' + this.agreementUrl + "&num=" + this.currentPage
						})
				    }
				
				}).catch(err => {
				    console.log("输出异常信息:------->", err)
				})
				
				showpdf({
				    keyword: '42-21-02-03',
				    model: 'B787',
					pdfType:'1',
				}).then(res =>{
				    if (res.code == 200) {
				        this.currentPage = res.data;
				    } else {
				        this.currentPage = 1 // 加载的时候先加载第一页
				    }
				})
				
			},
			base64ToBlob(code) {
			    code = code.replace(/[\n\r]/g, '')
			    // atob() 方法用于解码使用 base-64 编码的字符串。
			    const raw = window.atob(code)
			    const rawLength = raw.length
			    const uInt8Array = new Uint8Array(rawLength)
			    for (let i = 0; i < rawLength; ++i) {
			        uInt8Array[i] = raw.charCodeAt(i)
			    }
			    return new Blob([uInt8Array], {
			        type: 'application/pdf'
			    })
			},
			
			

			//跳转页面
			gotoFIM() {
				this.processingUrl()
			},

			// 处理url
			processingUrl(url) {
				let fimPath = ''
				if (url) {
					fimPath = url
				} else {
					fimPath = this.mmsgurl
				}
				let fimPathlist = []
				if (fimPath != '') {
					fimPathlist = fimPath.split(':')
					fimPath = 'http://tbr.hnatechnic.com:' + fimPathlist[2]
				}
				this.Jumpfim(fimPath)
			},
			Jumpfim(fimPath) {
				uni.navigateTo({
					url: '/pages/modules/ahm/eventMonitoring/fimbook?fimPath=' + fimPath
				})
			},
			//跳转
			async mmsgclick(item) {
				if (this.showMMsg) {
					this.showMMsg = false
				} else {
					//显示加载框
					uni.showLoading({
					    title: '加载中...'
					});
					this.showMMsg = true
					//清空list
					this.fimmorelist = [];
					if (item.eventDetails.length > 0) {
						for (var h = 0; h < item.eventDetails.length; h++) {
							this.FIMSlist(item.eventDetails[h],item.eventDetails.length)
						}
					}					
				}
			},
			//fde下有多个mmsg
			async FIMSlist(item,sum) {
				let code = item.code
				let tailnumber = item.tailnumber
				const items = await getHandbookFIM({
					code: code,
					tailNum: tailnumber
				})
				let maps = {
					'code': code,
					'name': items.data[0].fimName,
					'url': items.data[0].fimPath
				}
				this.fimmorelist.push(maps)
				//获得最后的手册集合关闭加载中
				if(this.fimmorelist.length == sum){
					//隐藏加载
					uni.hideLoading();
				}
			},
			// 返回手册号
			fimcode(code) {
				for (var i = 0; i < this.fimmorelist.length; i++) {
					if (this.fimmorelist[i].code == code) {
						return this.fimmorelist[i].name
					}
				}
			},
			//返回手册地址
			fimurl(code) {
				for (var i = 0; i < this.fimmorelist.length; i++) {
					if (this.fimmorelist[i].code == code) {
						this.processingUrl(this.fimmorelist[i].url);
						break;
					}
				}
			},
			async FIMlist() {
				let item = [];
				item = await getHandbookFIM({
					code: this.item.code,
					tailNum: this.item.tailnumber
				})
				
				if(item.data && item.data.length>0){
					let maps = {
						'name': item.data[0].fimName,
						// 'name': item.data[0].fimName + '=' + items.code, //加code确认是否正确
						'url': item.data[0].fimPath
					}
					
					this.mmsgnum = maps.name; //手册号
					this.mmsgurl = maps.url; //手册地址	
					
				}						
			},

			//排序
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			},
			
			
			
			
			//事件流历史
			getqueryHistory(){
								
				historyStream({
					eventId: this.item.id
				}).then(res =>{
					if(res.code == 200){
						this.qhistoryData = res.data
						
					}else{
					
					}
				})
			
			}


		},
		
		created() {		
			this.FIMlist()
			this.gotoFDE()
			this.getqueryHistory()

		}

	}
</script>

<style scoped lang="scss">
	.font_weight {
		font-weight: 600
	}

	.acms_reports {
		width: 53%;
		background: #0299E3;
		text-align: center;
		color: #ffffff;
		border-radius: 4px;
	}

	.check_mel {
		//width:33%;
		margin-left: 10px;
		//background:  #0299E3;
		text-align: center;
		//color: #ffffff;
		color: #0299E3;
		border-radius: 4px;
	}

	.fimclass {
		margin-top: 5px;
		margin-right: 10px;
		background: #0299E3;
		text-align: center;
		color: #ffffff;
		font-size: 11px;
		border-radius: 4px;
	}

	.a_top {
		margin-top: 10px;
	}

	.a_bottom {
		margin-bottom: 10px;
	}

	.am_bottom5 {
		margin-bottom: 5px;
	}

	.am_right {
		margin-right: 10px;
	}

	.a_right {
		width: 50%;
		padding-left: 20rpx;
	}

	.a_left {
		width: 50%;
		text-align: right;
		padding-right: 20rpx;
	}

	.a_left_sw {
		width: 50%;
		text-align: right;
		padding-right: 3rpx;
	}

	.a_left1 {
		width: 50%;
		//text-align: right;
		padding-right: 20rpx;
	}

	.logo {
		width: 100%;
		height: 60rpx;
		//padding-bottom: 3px;
	}

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

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

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

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

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

	.a_wai_5_0 {
		width: 5%;
		height: auto;
		background-color: #f0f0f0;
		text-align: center;
		margin: auto;
	}

	.a_wai_5 {
		width: 5%;
		height: auto;
		background-color: #F6E308;
		//background: #F6E308;
		text-align: center;
		margin: auto;
	}

	.a_wai_5_2 {
		width: 5%;
		height: auto;
		background-color: #ffaa00;
		background: #ffaa00;
		text-align: center;
		margin: auto;
	}

	.a_wai_5_3 {
		width: 5%;
		height: auto;
		background-color: #ff0000;
		background: #ff0000;
		text-align: center;
		margin: auto;
	}

	.a_wai_95 {
		width: 95%;
		//display: flex;
		background-color: #FDFDFD;

	}

	.em-history-box {
		font-size: 12px;
		// padding-bottom: 5px;
		display: flex;
	}

	.em-history-box-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		// margin-right: 3px;
		padding-left: 30px;
		width: 14px;
		min-width: 14px;
		align-items: center;
	}

	.ehbi-text {
		// margin-left: -3px;
		//padding-left:5px;
		margin-top: 2px;
		line-height: 1;
		white-space: nowrap;
	}

	.ehbi-dot {
		//padding-left:5px;
		width: 12px;
		height: 12px;
		background-color: #9e9e9e;
		border-radius: 100%;
		text-align: center;
		line-height: 12px;
		color: #ffffff;
		font-weight: bold;
		font-size: 12px;
		overflow: hidden;
		// margin-right: 3px;
	}

	.ehbi-dot-ak {
		width: 12px;
		height: 12px;
		background-color: transparent;
		border: 1px solid #9e9e9e;
		border-radius: 100%;
		text-align: center;
		line-height: 11px;
		color: #ffffff;
		font-weight: bold;
		font-size: 12px;
	}
</style>
