<template>
	<view>
		<view style=" width:100%;  display:flex; flex-wrap: wrap;  ">
			<view :style="'width:'+widthpx+'px'" class="card" :class="addcardclass(item.priority)" v-for="(item,i) in list" :key="i"> 
				<view @click="onclickcard(item)">
					<view class="row_height" :class="addfontclass(item.priority)">
						<view style="padding-left: 8rpx;padding-top: 4rpx;">
							{{item.tailnumber}}
						</view>
					</view>
					<view class="row_heightmin2" style="font-size: 20rpx;" >
						<uni-row >
							<uni-col :span="12" style="margin-bottom: 2px;">
								<view style="transform: scale(0.7)">
									{{item.currentFlight?item.currentFlight:'--'}} 
								</view>
							</uni-col>
							<uni-col :span="12">
								<uni-row>
									<uni-col :span="11">
										<view style="color:#0299E3;transform: scale(0.6)">
											{{item.dep?item.dep:'--'}}
										</view>
									</uni-col>
									<uni-col :span="2">
										<view style="text-align: center;transform: scale(0.6)">
											-
										</view>
										
									</uni-col>
									<uni-col :span="10" :offset="0">
										<view style="color:#0299E3;transform: scale(0.6)">
											{{item.arr?item.arr:'--'}}
										</view>
									</uni-col>
								</uni-row>								
							</uni-col>
						</uni-row>
						
						<uni-row >
							<uni-col :span="14" style="margin-bottom: 2px;">							
								<view style="border-top: 1px solid #cccccc;">
									<view style="transform: scale(0.6);text-align: center;">
										<oooi-min v-if="item.svgStep" :step="item.svgStep" :time="item.svgTime"	:timeName="item.svgTimeName">								
										</oooi-min> 
										<view v-if="!item.currentLeg.rtg && !item.svgStep"> -- </view>
									</view>									
								</view>
							</uni-col>
							<uni-col :span="10">							
								<view style="border-top: 1px solid #cccccc;">
									<uni-row>									
										<uni-col :span="24" >
											<view style="transform: scale(0.6);text-align: center;">
												{{item.eta?moment.utc(item.eta).format("HH:mm"):'--'}}
											</view>
										</uni-col>
									</uni-row>
								</view>
							</uni-col>
						</uni-row>
					</view>				
				</view>
				<uni-row>
					<view style="height: 2px ;"></view>
				</uni-row>
			</view>
					
		</view>
		
		
		<view>
			<uni-popup ref="popup"  type="center">
				<view style="background-color: #ffffff;border-radius: 5px;" v-if="listOne">
					<card-view-max :list="listOne" :widthpx="widthpxmax"></card-view-max>
				</view>
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	import {
		getMonitorInfo,
	} from '@/utils/requestahm.js'
	//import oooiSvg from "@/components/oooi/index.js";
	import oooiMin from '@/pages/components/ahm/oooiMin.vue';
	import moment from "moment"
	import cardViewMax from '@/pages/components/ahm/cardViewMax.vue';
	export default {
		name: "card-view",
		data() {
			return {
				listOne:[],
				widthpxmax:560,
				falg:false,
				moment,			
			}
		},
		props: {
			
			list: {
				type: Array,
				default: () => [],
			},
			widthpx: {
				type: Number,
				default: 80,
			}
		},
		components: {
			oooiMin,
			cardViewMax
		},
		methods: {
			onclickcard(item){
				this.listOne =  [];
				this.falg = true;
				this.listOne.push(item)
				this.$refs.popup.open()
			},
			addfontclass(i) {
				if (i != null && i > 0) {
					return 'background_white';
				} else {
					return 'background_black';
				}
			
			},
			addcardclass(i) {
				switch (i) {
					case 0:
						return 'background_color0';
					case 1:
						return 'background_color1';
					case 2:
						return 'background_color2';
					case 3:
						return 'background_color3';
				}
			},
		},	

		created() {
			

		}

	}
</script>

<style scoped lang="scss">
	.fontsize10{
		font-size: 8px;
		transform: scale(0.8);
		color: #0299E3;
	}
	.fontsize8{
		font-size: 8px;
		transform: scale(0.8);
	}
	.card {
		border-radius: 5px;
		background-color: #ddf1ff;		
		margin: 3px;
	}

	.morepng {
		width: 70rpx;
		height: 70rpx;
	}

	.text_align {
		text-align: center;
	}

	.row_height {
		font-size: 20rpx;
		//height: 40rpx;
		border-radius: 5px;
	}

	.row_height3 {
		height: 52rpx;
		background-color: #ffffff;
		margin-left: 2px !important;
		margin-right: 2px !important;
		//border-radius: 2px;

	}


	.row_height2 {
		height: 100rpx;
		margin-left: 2px !important;
		margin-right: 2px !important;
		background-color: #ffffff;
	}
	
	.row_heightmin2 {
		margin-left: 2px !important;
		margin-right: 2px !important;
		background-color: #ffffff;
	}
	

	
	//滚动样式
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	//设置
	.background_white {
		color: #ffffff;
	}

	.background_black {
		color: #000000;
	}

	//卡片背景
	.background_color0 {
		background-color: #ddf1ff; // 
	}

	//等级高低背景颜色不一致
	.background_color {
		background-color: #D7D7D7; //  '#D7D7D7'  #ddf1ff
	}

	.background_color1 {
		background-color: #fdd000;
	}

	.background_color2 {
		background: #FF9900; // !important
	}

	.background_color3 {
		background: #E60000;
	}

	.background_mmsg {
		float: left;
		height: 30rpx;
		width: 30rpx;
		margin-left: 5px;
		margin-top: 14rpx;
		line-height: 30rpx;
	}

	.background_mmo {
		float: left;
		height: 30rpx;
		width: 30rpx;
		margin-left: 5px;
		margin-top: 14rpx;
		line-height: 30rpx;
		border-radius: 50%
	}

	.background_ser {
		transform: rotate(45deg);
		float: left;
		height: 26rpx;
		width: 26rpx;
		margin-left: 6px;
		margin-top: 16rpx;
		line-height: 30rpx;
	}

	.background_ser_font {
		transform: rotate(-45deg);
	}

	.background_ser_font1 {
		position: relative;
		top: -2px;
		left: -1px;
		transform: rotate(-45deg);
	}

	.background_sys {
		float: left;
		height: 34rpx;
		width: 34rpx;
		margin-left: 5px;
		margin-top: 10rpx;
		line-height: 34rpx;
		border-radius: 50%;
		display: block;

	}

	.background_sys1 {
		top: 6px;
		left: 2px;
		position: relative;
		float: left;
		height: 24rpx;
		width: 24rpx;
		// background-color: #FF9900;
		transform: rotate(45deg);
		line-height: 30rpx;
		//top: -1px;
		//transform: rotate(-45deg);

	}

	.row_line {
		height: 2px;
		background-color: #D0D0DA;
		margin-left: 2px;
		margin-right: 2px;
	}
</style>
