<template>
	<view>
		<!-- <view v-for="(item,index) in eventlist" :key="index"> -->
		<view >
			<view style="display: flex; margin:10px;" v-for="(item,index) in eventlist" :key="index"
				@click="eventDetails(item)">
				<view style="width: 5%; border: solid 1px black;border-right: none;  ">
					<view v-if="item.priority==0" class="a50">
						M
					</view>
					<view v-else-if="item.priority==1" class="a51">
						L
					</view>
					<view v-else-if="item.priority==2" class="a52">
						M
					</view>
					<view v-else-if="item.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;">
					<view>
						<uni-row class="padding-left10 padding-top10 font-weight700">
							<uni-col :span="6">
								{{item.name}}:
							</uni-col>
							<uni-col :span="18" class="colorbule">
								{{item.code}}
							</uni-col>
						</uni-row>
					</view>
					<view class="margin-top5 padding-left10 font-weight700 font-size12 ">
						<view v-if="item.name =='FDE'">
							<view>
								{{item.description}}
							</view>
						</view>
						<view v-else>
							{{item.description}}
						</view>
					</view>

					<uni-row class="margin-top5 padding-left10">
						<uni-col :span="12">
							{{item.msgTime}}
						</uni-col>
						<uni-col :span="12" style="padding-right: 10px;" class=" font-weight600 text_align_right">
							{{activityup(item.activity)}}
						</uni-col>
					</uni-row>

					<view class="margin-top5 padding-left10" style="font-size: 20rpx;" v-for="(itemdetail,j)  in item.detectedBy"
						:key="j">
						<uni-row>
							<uni-col :span="6">
								<view v-if="j==0">
									Detected by:
								</view>
								<view v-else style="height: 18px;"></view>
							</uni-col>
							<uni-col :span="18">
								{{itemdetail}}
							</uni-col>
						</uni-row>
					</view>

					<view v-if="item.eventDetails">
						<view v-for="(itemmmsg ,indexmmsg) in item.eventDetails" :key="indexmmsg">
							<uni-row class="padding-left10 padding-top10 ">
								<uni-col :span="4" class="font-weight700">
									{{itemmmsg.name}}:
								</uni-col>
								<uni-col :span="8" class="colorbule font-weight700">
									{{itemmmsg.code}}
								</uni-col>
								<uni-col :span="6">
									{{itemmmsg.intermittence}}
								</uni-col>
								<uni-col :span="6" class="">
									{{itemmmsg.phase}}
								</uni-col>
							</uni-row>

							<view class="padding-left10 padding-top5 font-weight700 font-size12">
								{{itemmmsg.description}}
							</view>

							<uni-row class="padding-left10 padding-top5">
								<uni-col :span="12">
									{{itemmmsg.msgTime}}
								</uni-col>
								<uni-col :span="12" style="padding-right: 10px;"
									class="font-weight600 text_align_right">
									{{activityup(itemmmsg.activity)}}
								</uni-col>
							</uni-row>

							<view class="padding-left10 padding-top5" style="font-size: 20rpx;" v-for="(itemdetailmmsg,k)  in itemmmsg.detectedBy"
								:key="k">
								<uni-row>
									<uni-col :span="6">
										<view v-if="k==0" style="height: 15px;">
											Detected by:
										</view>
										<view v-else style="height: 15px;">
											
										</view>
									</uni-col>
									<uni-col :span="18">
										{{itemdetailmmsg}}
									</uni-col>
								</uni-row>
							</view>

							<uni-row v-show="reportType =='Fault' " class="padding-left10 padding-top5">
								<uni-col :span="10">
									Fault Report Code:
								</uni-col>
								<uni-col :span="14">
									{{itemmmsg.frc?itemmmsg.frc:'--'}}
								</uni-col>
							</uni-row>

							<uni-row v-show="reportType =='Fault' "  class="padding-left10 padding-top5">
								<uni-col :span="8">
									Monitor Code:
								</uni-col>
								<uni-col :span="16">
									{{itemmmsg.mc?itemmmsg.mc:'--'}}
								</uni-col>
							</uni-row>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEventListByReportTypeLegId
	} from '@/utils/requestahm.js'
	import toHistory from '@/pages/components/ahm/toHistory';
	export default {
		name: 'eventsMon',
		data() {
			return {
				//eventlist: [],
			}
		},
		props: {
			eventlist: Array,
			item: {
				type: Object,
				default: () => {}
			},
			fleet: {
				type: String,
				default: '',
			},
			reportType: {
				type: String,
				default: '',
			},
			latestAcarsTime: {
				type: String,
				
			}
		},
		methods: {
			eventDetails(item) {
				
				item.fleet = this.fleet
				
				item.latestAcarsTime = this.latestAcarsTime
				
				uni.navigateTo({
				    url: '/pages/modules/ahm/eventMonitoring/detail?item=' +
				        encodeURIComponent(JSON.stringify(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'
				}
			},
			CheckReports() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})
			},



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


		},
		components: {
			toHistory
		},

		created() {
			//this.getDate()
		}

	}
</script>

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

	.colorbule {
		color: #0299E3;
	}

	.colormsgTime {
		color: #a5a5a5;
	}

	.font-size12 {
		font-size: 24rpx
	}

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

	.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: #f0f0f0;
		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: #f0f0f0;
		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;
	}

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

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

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

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

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

	}
</style>
