<template>
	<view class="app-content">
		<img :src="icon" alt="" class="tuku">
		<Nav :navname.sync="navname" :navtype="false" :index="index" @airport="airport"></Nav>
		<view class="fight" v-if="flightDetail">
			<view class="fight_card">
				<p>{{flightDetail.carrierFlights}}</p>
				<span>{{flightDetail.carrierFlightsDate}}</span>
			</view>
			<view class="fight_card">
				<p>{{flightDetail.outAirport}}</p>
				<span>{{flightDetail.scheduleTakeOffTime}}</span>
			</view>
			<view class="fight_card">
				<p>{{flightDetail.landAirport}}</p>
				<span>{{flightDetail.scheduleLandInTime}}</span>
			</view>
		</view>
		<view class="times">
			<p>{{ newData }}</p>{{ newDataday }}
		</view>
		<view class="content">
			<view class="card" @tap="clickOrder('SORT')">
				<p>分拣</p>
			</view>
			<view class="card" @tap="clickOrder('LOAD')">
				<p>装车</p>
			</view>
			<view class="card" @tap="clickOrder('INFL')">
				<p>装机</p>
			</view>
			<view class="card" @tap="clickOrder('UNLOAD')">
				<p>卸机</p>
			</view>
			<view class="card" @tap="clickOrder('ARRIVED')">
				<p>到达</p>
			</view>
			<view class="card" @tap="clickOrder('extract')">
				<p>提取</p>
			</view>
			<view class="card" @tap="clickOrder('abnormal')">
				<p>异常登记</p>
			</view>
			<view class="card_no">
			</view>
		</view>
	</view>
</template>
<script>
	import Nav from '../../components/header/nav.vue'
	import {
		Format
	} from '@/components/utils/validate'
	export default {
		data() {
			return {
				input: '',
				main: null,
				poll: null,
				filter: null,
				pusher: null,
				intentServer: null,
				timeShow: true,
				arr: [],
				navname: '首页',
				icon: 'static/beijing.png',
				newData: '',
				newDataday: '',
				index: 0,
				flightDetail: null,
				flightNO: null,
				airportName:null
			}
		},
		created(option) {
			// this.arr = allScan(this.main,this.poll,this.filter)
			// startScan(this.arr[0],this.arr[1],this.arr[2])
		},
		onLoad(option) {
		},
		onUnload() {},
		onShow() {
			uni.$on("scancodemsg", (data) => {
				if (data.msg.length > 9) {
					uni.navigateTo({
						url: "/pages/detail/index?luggageNum=" + data.msg
						// url: "/pages/detail/index?luggageNum=3999483183"
					})
				}
			});
			if (this.$storage.getJson('airport')) {
				this.index = this.$storage.getJson('airport')
			}
			let data = this.$storage.get('searchData');
			if (data) {
				this.flightNO = data
				this.getFlightData()
			}
		},
		onHide() {
			uni.$off("scancodemsg");
		},
		mounted() {
			this.datatime()
		},
		beforeDestroy() {
			// console.log(this.arr[0],this.arr[1])
		},
		components: {
			Nav
		},
		methods: {
			airport(e){
				this.airportName = e;
				this.$storage.set('airportName',e)
			},
			datatime() {
				this.newDataday = Format("yyyy/MM/dd", new Date());
				setInterval(() => {
					this.newData = Format("hh:mm", new Date());
				}, 1000);
			},
			async getFlightData() {
				let data = {
					"serviceId": 3000,
					"page": 1,
					"pageSize": 10,
					"dataContent": [{
						"carrierFlights":this.flightNO
					}],
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0" && res.returnData.length>0) {
						this.flightDetail = res.returnData[0]
						this.$storage.remove('searchData')
					}
					else{
						uni.showToast({
							icon:'none',
							title: "无此航班信息，请确认航班号",
							duration: 5000
						});
					}
				})
			},
			clickOrder(data) {
				if(data == "extract"){//提取
					uni.navigateTo({
						url: "/pages/extract/index"
					})
				}
				else if(data == "abnormal"){//异常行李
					uni.navigateTo({
						url: "/pages/abnormal/index?airport="+this.airportName
					})
				}
				else{
					uni.navigateTo({
						url: "/pages/sorting/index?item=" + data +"&flightNO="+this.flightNO
					})
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.app-content {
		position: relative;

		>.tuku {
			position: absolute;
			z-index: -1;
			width: 100%;
			top: 0;
		}

		>.fight {
			padding: 0 1.75rem 0 1.75rem;
			// height: 3.75rem;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 1.375rem;

			>.fight_card {
				display: flex;
				flex-direction: column;
				align-items: start;
				justify-content: center;

				>p {
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 16px;
					font-weight: 700;
				}

				>span {
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 11px;
					font-weight: 500;
				}
			}
		}

		>.times {
			width: 100%;
			height: 4.6875rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgb(255, 255, 255);
			font-family: Noto Sans SC;
			font-size: 18px;
			font-weight: 700;

			p {
				margin-right: .625rem;
			}
		}

		.content {
			padding: 0 1.5rem 0 1.5rem;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.card {
				width: 7.5rem;
				height: 5.5rem;
				/* 卡片渐变 */
				background: linear-gradient(188.06deg, rgba(65.49, 109.04, 128.64, 1.00) 3.551%, rgba(38, 68.32, 81.96, 1.00) 110.878%);
				box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
				border-radius: 4px;
				margin-bottom: 2.25rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				>p {
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 18px;
					font-weight: 700;
					margin-bottom: .375rem;
					line-height: 1.6875rem;
				}

				>span {
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 13px;
					font-weight: 500;
					line-height: 1.1875rem;
				}
			}

			.card_no {
				width: 7.5rem;
				height: 7.5rem;
			}
		}
	}
</style>