<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">

				</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" style=" font-size: 20rpx;">

					<view class="back_color" style="height: 40rpx; line-height: 40rpx;">
						<uni-row>
							<uni-col :span="6">
								<view class="border_left border_bottom" style="padding-left: 5px; font-weight: 600;">
									{{item.name}}
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="border_left border_bottom" style="color: #0299E3;font-weight: 600;"
									@click="gotofims(item.code)">
									{{item.code}}
								</view>
							</uni-col>
							<uni-col :span="12">
								<view class="border_left border_bottom">
									{{item.msgTime}}
								</view>
							</uni-col>
						</uni-row>
					</view>
					<view class="border_left border_bottom" style="padding-left: 5px;padding-top: 5px; ">
						{{item.description}}
						<span style="font-weight: 600;" v-if="item.activity">
							({{activityup(item.activity)}})
						</span>

					</view>
					<view v-if="item.name == 'FDE' && this.melcode"  class="border_left border_bottom" style="padding: 3px; ">			
					<!-- <view v-if="item.name == 'FDE' "  class="border_left border_bottom" style="padding: 3px; ">	 -->		
						<uni-row >
							<uni-col :span="8">
								<view>
									MEL手册:
								</view>
							</uni-col>
							<uni-col :span="16">
								<view style="color: #0299E3;" @click="lockMel()">
									查看
								</view>
							</uni-col>
						</uni-row>
					</view>

					<uni-row class="border_left border_bottom" style="padding-top: 5px;padding-bottom: 5px;">
						<to-history :circleFlag="item.circleFlag" :occurLegList="item.legs"
							:occurLegStatusList="item.legsStatus" :items="item" :fleet="fleet"></to-history>
					</uni-row>

					<view v-if="item.name == 'MMSG'">
						<uni-row style="height: 40rpx; line-height: 40rpx;">
							<uni-col :span="6">
								<view class="border_left border_bottom">
									飞行阶段
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="border_left border_bottom">
									频次
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="border_left border_bottom">
									FRC
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="border_left border_bottom">
									MC
								</view>
							</uni-col>
						</uni-row>
						<uni-row style="height: 40rpx; line-height: 40rpx;">
							<uni-col :span="6">
								<view class="border_left border_bottom">
									{{item.phase?item.phase:'--'}}
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="border_left border_bottom">
									{{item.intermittence?item.intermittence:'--'}}
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="border_left border_bottom">
									{{item.frc?item.frc:'--'}}
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="border_left border_bottom">
									{{item.mc?item.mc:'--'}}
								</view>
							</uni-col>
						</uni-row>
						<uni-row style=" line-height: 40rpx;" class="border_left">
							<uni-col :span="24">
								<view style="transform: scale(1,0.9) ; ">
									Detected by:{{item.detectedBy?item.detectedBy.join():'--'}}
								</view>
							</uni-col>
						</uni-row>
					</view>


					<view style="padding-left: 15px; font-size: 20rpx;">
						<uni-row>
							<uni-col :span="24">
								<view v-for="(items,k) in item.eventDetails" :key="k">
									<view v-if="items.name == 'MMSG'">
										<uni-row style="height: 44rpx; line-height: 44rpx;">
											<uni-col :span="6">
												<view class="border_left back_color" style=" font-weight: 600;">
													{{items.name}}
												</view>
											</uni-col>
											<uni-col :span="6">
												<view class="border_left back_color"
													style="color: #0299E3;font-weight: 600;"
													@click="gotofims(items.code)">
													{{items.code}}
												</view>
											</uni-col>
											<uni-col :span="12">
												<view class="border_left back_color">
													{{items.msgTime}}
												</view>
											</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="24">
												<view class="border_left border_bottom">

													{{items.description}}
													<span style="font-weight: 600;" v-if="items.activity">
														({{activityup(items.activity)}})
													</span>

												</view>
											</uni-col>
										</uni-row>
										<uni-row class="border_left border_bottom"
											style="padding-top: 5px;padding-bottom: 5px;">
											<to-history :circleFlag="items.circleFlag" :occurLegList="items.mmsgLegs"
												:items="items" :occurLegStatusList="items.mmsgLegStatus" :fleet="fleet">
											</to-history>
										</uni-row>

										<uni-row style="height: 40rpx; line-height: 40rpx;">
											<uni-col :span="6">
												<view class="border_left border_bottom">
													飞行阶段
												</view>
											</uni-col>
											<uni-col :span="6">
												<view class="border_left border_bottom">
													频次
												</view>
											</uni-col>
											<uni-col :span="6">
												<view class="border_left border_bottom">
													FRC
												</view>
											</uni-col>
											<uni-col :span="6">
												<view class="border_left border_bottom">
													MC
												</view>
											</uni-col>
										</uni-row>
										<uni-row style="height: 40rpx; line-height: 40rpx;">
											<uni-col :span="6">
												<view class="border_left border_bottom">
													{{items.phase?items.phase:'--'}}
												</view>
											</uni-col>
											<uni-col :span="6">
												<view class="border_left border_bottom">
													{{items.intermittence?items.intermittence:'--'}}
												</view>
											</uni-col>
											<uni-col :span="6">
												<view class="border_left border_bottom">
													{{items.frc?items.frc:'--'}}
												</view>
											</uni-col>
											<uni-col :span="6">
												<view class="border_left border_bottom">
													{{items.mc?items.mc:'--'}}
												</view>
											</uni-col>
										</uni-row>
										<uni-row style=" line-height: 40rpx;" class="border_left">
											<uni-col :span="24">
												<view style="transform: scale(1,0.9) ; ">
													Detected by:{{items.detectedBy?items.detectedBy.join():'--'}}
												</view>
											</uni-col>
										</uni-row>
									</view>

								</view>
							</uni-col>
						</uni-row>
					</view>


				</view>
			</view>

			<view class="border_left border_bottom border_right border_top"
				style="margin-left: 10px;margin-right: 10px;margin-top: 5px;  font-size: 20rpx;">
				<view class=" back_color" style="padding-top: 6rpx;padding-bottom: 6rpx;">
					故障描述
				</view>
				<view style="background-color: #ffffff;padding-top: 6rpx;padding-bottom: 6rpx;">
					{{item.faultDescription?item.faultDescription:'--'}}
				</view>
			</view>
			<view class="border_left border_bottom border_right" style="margin-left: 10px;margin-right: 10px; font-size: 20rpx; ">
				<view class=" back_color" style="padding-top: 6rpx;padding-bottom: 6rpx;">
					排故建议
				</view>
				<view style="background-color: #ffffff;padding-top: 6rpx;padding-bottom: 6rpx;">
					{{item.troubleshooSuggestion?item.troubleshooSuggestion:'--'}}
				</view>
			</view>

			<!-- <view class="border_left  border_right" style="margin-left: 10px;margin-right: 10px; font-size: 20rpx; ">
				<view class=" back_color">
					<uni-row>
						<uni-col :span="20">
							事件流信息
						</uni-col>
						<uni-col :span="4" style="text-align: center;">

						</uni-col>
					</uni-row>
				</view>
				<uni-row style="text-align: center; margin-top: 5px;" class="border_top">
					<uni-col class=" border_bottom " :span="5">
						<view style="height: 50rpx; line-height: 50rpx">
							管控状态
						</view>
					</uni-col>
					<uni-col class="border_left border_bottom" :span="6">
						<view style="height: 50rpx; line-height: 50rpx">
							用户
						</view>
					</uni-col>
					<uni-col class="border_left border_bottom border_right " :span="9">
						<view style="height: 50rpx; line-height: 50rpx">
							时间
						</view>
					</uni-col>
					<uni-col class=" border_bottom" :span="4">
						<view style="height: 50rpx; line-height: 50rpx ;">
							备注
						</view>
					</uni-col>
				</uni-row>

				<view v-if="qhistoryData" style="background-color: #ffffff; text-align: center;"
					v-for="histyitem,hisindex) in qhistoryData" :key="hisindex">
					<uni-row>
						<uni-col class=" border_bottom" :span="5">
							<view style="height: 50rpx; line-height: 50rpx">
								<control-status2   @changenamelist="changenamelist" ></control-status2>
								
								<control-status v-if="statuNameList" :statuNameList="statuNameList" :code="histyitem.statusCode" ></control-status>
							</view>
						</uni-col>
						<uni-col class="border_left border_bottom" :span="6">
							<view style="height: 50rpx; line-height: 50rpx">
								{{histyitem.userName}}
							</view>
						</uni-col>
						<uni-col class="border_left border_bottom border_right " :span="9">
							<view style="height: 50rpx; line-height: 50rpx">
								{{histyitem.createdTime?moment.utc(histyitem.createdTime).format("YYYY-MM-DD HH:mm"):'--'}}
							</view>
						</uni-col>
						<uni-col class=" border_bottom" :span="4">
							<view v-if="histyitem.comment" style="height: 50rpx; line-height: 50rpx ;color: #0299E3; "
								@click="commonts = histyitem.comment">
								查看
							</view>
							<view v-else style="height: 50rpx; line-height: 50rpx ;">

							</view>
						</uni-col>
					</uni-row>
				</view>

				<view v-if="commonts" class="border_left border_bottom border_right "
					style="margin-left: 10px;margin-right: 10px;">
					{{commonts}}
				</view>
			</view> -->

			<!-- 事件流新信息 -->
			<view class="border_left  border_right" style=" margin-left: 10px;margin-right: 10px;font-size: 20rpx;">
				<view class=" back_color" style="padding-top: 6rpx;padding-bottom: 6rpx;">
					<uni-row>
						<uni-col :span="24">
							事件流信息
						</uni-col>
						
					</uni-row>
				</view>
				<view style="height: 8rpx;">
					
				</view>
				<view v-if="qhistoryData" style="background-color: #ffffff; "
					v-for="(histyitem,hisindex) in qhistoryData" :key="hisindex">
					<view  v-if="hisindex==0" class="border_bottom border_top" style="padding-left: 10px; height: 50rpx; line-height: 50rpx;background-color:#cccccc ;">
						{{histyitem.date}} 
					</view>
					<view v-else class="border_bottom" style="padding-left: 10px; height: 50rpx; line-height: 50rpx;background-color:#cccccc ;">
						{{histyitem.date}}
					</view>
					<view  v-for="(childernitem,childernindex) in histyitem.childern" :key="childernindex">
						<uni-row class="border_bottom">
							<uni-col :span="24">
								<uni-row style="display: flex;">
									<uni-col  :span="4" style="display: flex; align-items: center; justify-content: center;border-right: 1px solid gray;height: inherit;padding-top: 6rpx;padding-bottom: 6rpx;">
										<view>
											{{childernitem.time}}
										</view>
									</uni-col>
									<uni-col  :span="20" style="padding-top: 6rpx;padding-bottom: 6rpx;">
										{{childernitem.evaluation}}
									</uni-col>
								</uni-row>
							</uni-col>
						</uni-row>						
					</view>
				</view>
				
			</view>
			

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

<script>
	import {
		getHandbookFIM,
		getHandbookMEL,
		showpdf,
		getPdf,
		queryHistory,
		historyStream,
		getImgage,
		getImgageNext
	} from '@/utils/requestahm.js'
	import toHistory from '@/pages/components/ahm/toHistory';
	import moment from "moment"
	import controlStatus from '@/pages/components/ahm/controlStatus.vue';
	import controlStatus2 from '@/pages/components/ahm/controlStatus2.vue';
	//import echarts from '@/pages/components/ahm/echarts.vue';
	export default {
		name: 'eventsMon',
		data() {
			return {
				statuNameList: [],
				commonts: '', //备注信息
				moment,
				flowfalg: false, //事件流显示

				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,
			controlStatus,
			controlStatus2
			//echarts
		},
		methods: {
			//查看mel手册
			async lockMel(){
				let model =''
				if(this.fleet && (this.fleet.indexOf('B787') != -1 || this.fleet.indexOf('787') != -1)){
					model = 'B787'
				}else if (this.fleet && this.fleet.indexOf('737MAX') != -1){
					model = '737MAX'
				}else if (this.fleet && this.fleet.indexOf('737NG') != -1){
					model = '737NG'
				}else{
					return
				}
				let pdfType ='1'
						
				// showpdf({
				// 	keyword: this.melcode,
				// 	model: model,
				// 	pdfType: pdfType,
				// }).then(res => {
				// 	if (res.code == 200) {
				// 		console.log('进入pdf页码')
				// 		this.currentPage = res.data;
				// 	} else {
				// 		console.log('进入pdf页码---else')
				// 		this.currentPage = 1 // 加载的时候先加载第一页
				// 	}
				// })
				this.currentPage = 1
				let paramitem = {
					fleet:this.fleet,
					pdfType : pdfType ,
					model : model,
					keyword : this.melcode		
				}
				uni.navigateTo({
					url: '/pages/modules/ahm/eventMonitoring/showPdf?param=' + 
					encodeURIComponent(JSON.stringify(paramitem))
				})
							
			},
			
			changenamelist(item) {
				this.statuNameList = item
			},

			//根据级别不同切换不同的背景
			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() {
				let model = '';
				console.log('getFde----',this.fleet)
				if(this.fleet && (this.fleet.indexOf('B787') != -1 || this.fleet.indexOf('787') != -1)){
					model = 'B787'
				}else if (this.fleet && this.fleet.indexOf('737MAX') != -1){
					model = '737MAX'
				}else if (this.fleet && this.fleet.indexOf('737NG') != -1){
					model = '737NG'
				}else{
					return
				}
				console.log('getFde-2---',this.fleet)
				console.log('getFde-3---',this.item.name)
				//只有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: model,
					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'
				})
			},
			//最新跳转fim
			async gotofims(code) {

				const items = await getHandbookFIM({
					code: code,
					tailNum: this.item.tailnumber
				})
				if(items.code == '200' && items.data && items.data.length>0 ){
					let url = items.data[0].fimPath
					
					if (url) {
						console.log('url-----',url)
						uni.navigateTo({
							url: '/pages/modules/ahm/eventMonitoring/fimbook?fimPath=' + url
						})
					}
				}else{
					uni.showToast({
					    title: '该事件没有fim手册',
					    icon: 'none'
					})
				}				
			},

			//跳转页面
			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() {

				// queryHistory({
				// 	eventId: this.item.id
				// }).then(res => {
				// 	if (res.code == 200) {
				// 		this.qhistoryData = res.data

				// 	} else {

				// 	}
				// })

				//事件流新
				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">
	.back_color {
		background-color: #babcc3;
	}

	.border_bottom {
		border-bottom: 1px solid #9EA0A6;
	}

	.border_top {
		border-top: 1px solid #9EA0A6;
	}

	.border_left {
		border-left: 1px solid #9EA0A6;
	}

	.border_right {
		border-right: 1px solid #9EA0A6;
	}

	.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: #a2a2a2;
		//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: #a2a2a2; //#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>
