<template>
	<view class="cabin-history">
		<view class="history-tit">
			<view class="setOut">
				<text class="tip">出发地</text>
				<text class="top">{{fromData.portDeparture}}</text>
			</view>
			<view class="icon iconfont icon-daoda"></view>
			<view class="arrive">
				<text class="tip">目的地</text>
				<text class="top">{{fromData.portArrival}}</text>
			</view>
			<!-- iconfont 需要替换  -->
			<view class="iconfont icon-shijian screen" @click="reset"></view>
		</view>
		<template v-for="(item,index) in webCode">
			<view class="history-list"  v-if="item.status != 'noData'" :key="index">
				<view class="tit">
					<view class="left">
						<image :src="item.image"  mode=""></image>
						<text>{{item.code}}</text>
					</view>
					<view class="right">箱型：{{fromData.boxType}}</view>
				</view>
				<template v-if="item.status == 'over'">
					<view class="single-main" v-for="(ship, sindex) in item.list">
						<view class="left">
							<view class="line"></view>
							<view class="times">
								<view class="etd">
									<text class="tip">ETD</text>
									<text class="time">{{ship.departure_date.substring(5,16)}}</text>
								</view>
								<!-- iconfont 需要替换  -->
								<view class="iconfont icon-daoda icon"></view>
								<view class="eta">
									<text class="tip">ETA</text>
									<text class="time">{{ship.arrival_date.substring(5,16)}}</text>
								</view>
							</view>
							<view class="ship-name">
								<text>船名：{{ ship.vessel }}</text>
							</view>
							<view class="ship-name">
								<text>航次： {{ ship.voyage }}</text>
							 <text class="num">航程： {{ ship.transit_time }}</text>
							</view>
						</view>
						<view class="right">
							<view class="amount">
								<view class="of tip">O/F：</view>
								<view class="of">{{ship.ocean_freight}} {{ship.ocean_currency}}</view>
								<view class="all tip">ALL IN： </view>
								<view class="all">{{ship.total_freight}} {{ship.total_currency}}</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else-if="item.status == 'loading'">
					<view class="loading-box">
						<uni-load-more status="loading"></uni-load-more>
					</view>
				</template>
				<template v-else-if="item.status == 'noData'">
					<view class="no-data">
						<text class="iconfont icon-yunshugongsi"></text>
						<text class="text">暂无数据</text>
					</view>
				</template>
			</view>
		</template>
		
	</view>
</template>

<script>
	import {
		realQuery,
	} from '@/common/js/api/manifest/cabinQuery.js'
	import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue'
	export default {
		components:{
			uniLoadMore,
		},
		// props:{
		// 	fromData:{
		// 		type: Object,
		// 		required: true,
		// 	}
		// },
		watch:{
			fromData: {
				handler(newValue, oldValue) {
					this.getHistory();
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				historyList: [],
				fromData: {},
				webCode:{
					'MSK':{
						name: '马士基',
						code: 'MSK',
						image: '../../../static/image/logo/msk.png',
						list: [],
						status: 'loading',
					},
					'MCC': {
						name: 'MCC',
						code: 'MCC',
						image: '../../../static/image/logo/MCC.png',
						list: [],
						status: 'loading',
					},
					'CMA': {
						name: '法国达飞',
						code: 'CMA',
						image: '../../../static/image/logo/cma.png',
						list: [],
						status: 'loading',
					},
					'COSCO': {
						name: '法国达飞',
						code: 'CMA',
						image: '../../../static/image/logo/cma.png',
						list: [],
						status: 'loading',
					},
					'OOCL':{
						name: 'OOCL',
						code: 'OOCL',
						image: '../../../static/image/logo/oocl.png',
						list: [],
						status: 'loading',
					}
				},
			}
		},
		onLoad(op){
			this.fromData = JSON.parse(op.data);
		},
		methods: {
			reset(){
				uni.navigateBack()
			},
			getHistory(){
				let data = {
					web_code: '',
					pol_code: this.fromData.portDepartureCode,
					pol_platform_name: this.fromData.portDeparture,
					pod_code: this.fromData.portArrivalCode,
					pod_platform_name: this.fromData.portArrival,
					box_code: this.fromData.boxType,
					box_num: 1,
					start_time: this.fromData.startTime,
					end_time: this.fromData.endTime,
					// from_mode:'CY',
					// to_mode:'CY',
					// product_name: '',
				}
				Object.keys(this.webCode).map((item,index)=>{
					let _data = data;
					_data.web_code = this.webCode[item].code;
					this.webCode[item].status = 'loading';
					this.realQuery(_data, item)
				})
			},
			realQuery(data, type){
				realQuery(data).then(res =>{
					if(res.code == 200){
						this.webCode[type].list = res.data;
						this.webCode[type].status = 'over';
					}else{
						this.webCode[type].status = 'noData';
					}
				}).catch(err =>{
					this.webCode[type].status = 'noData';
				})
			}
		}
	}
</script>

<style lang="less">
.cabin-history{
	padding-top: 20rpx;
	height:100vh;
	overflow-y: auto;
	background: #f4f4f4;
	.history-tit{
		width:100%;
		padding:0 50rpx;
		background:#fff;
		display: flex;
		// height: 100rpx;
		box-sizing: border-box;
		.setOut,.arrive{
			width: 250rpx;
			// height: 100rpx;
			text-align: center;
			padding: 10rpx 0;
			.top{
				line-height: 50rpx;
				color: #333;
				font-weight: 600;
				display: block;
			}
			.tip{
				line-height: 40rpx;
				color: #999;
				font-weight: 500;
				font-size: 24rpx;
				display: block;
			}
		}
		.icon{
			font-size: 50rpx;
			color: #2c96fb;
			width: 100rpx;
			line-height: 150rpx;
			height: 150rpx;
			display: inline-block;
			text-align: center;
		}
		.screen{
			width: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: #999;
		}
	}
	
	.history-list{
		margin-top: 30rpx;
		background: #fff;
		.tit{
			// height: 80rpx;
			// line-height: 80rpx;
			border-bottom: 2rpx solid #eee;
			padding: 20rpx 20rpx 20rpx 10rpx;
			display: flex;
			.left{
				vertical-align: top;
				height: 50rpx;
				flex: 1;
				image{
					height: 50rpx;
					width: 115rpx;
					vertical-align: top;
					display: inline-block;
				}
				text{
					font-size: 28rpx;
					color: #666;
					font-weight: 600;
					line-height: 50rpx;
					display: inline-block;
					vertical-align: top;
				}
			}
			.right{
				font-size: 28rpx;
				color: #999;
				line-height: 50rpx;
			}
		}
		.single-main{
			// height: 200rpx;
			display: flex;
			padding-bottom: 30rpx;
			border-bottom: 3rpx solid #eee;
			.left{
				flex: 1;
				position: relative;
				.line{
					content:'';
					position: absolute;
					top: 24rpx;
					right: 2rpx;
					width: 2rpx;
					height: 130rpx;
					height: calc(100% - 24rpx);
					background:#eee;
				}
				.times{
					width:100%;
					display: flex;
					// margin-bottom: 10rpx;
					margin-top: 10rpx;
					.etd,.eta{
						flex: 1;
						text-align: center;
						padding-top: 10rpx;
						.tip{
							display: block;
							font-size: 28rpx;
							color: #999;
							font-weight: 500;
							line-height: 40rpx;
						}
						.time{
							display: block;
							font-size: 32rpx;
							color: #666;
							font-weight: 600;
							line-height: 60rpx;
						}
					}
					.icon{
						height: 100rpx;
						line-height: 100rpx;
						width: 80rpx;
						text-align: center;
					}
				}
				.ship-name{
					font-size: 24rpx;
					line-height: 40rpx;
					padding-left: 40rpx;
					color: #666;
					.name{
						color: #666;
						font-weight: 600;
					}
					.num{
						color: #999;
						font-weight: 500;
						float: right;
						text-align: right;
						padding-right: 18rpx;
					}
				}
			}
			.right{
				width: 190rpx;
				padding-left: 20rpx;
				padding-top: 20rpx;
				position: relative;
				// height:100%;
				.top{
					font-size: 28rpx;
					color: #666;
					line-height: 60rpx;
				}
				.amount{
					position: absolute;
					font-size: 24rpx;
					color: #ff8213;
					line-height: 40rpx;
					bottom: 0;
					left: 20rpx;
					font-weight: 600;
					width: 180rpx;
					text-align: left;
					.tip{
						color: #999;
					}
				}
			}
		}
		.loading-box{
			width: 100%;
			height: 200rpx;
			background: #fff;
			padding-top: 63rpx;
			box-sizing: border-box;
		}
		.no-data{
			width: 100%;
			height: 200rpx;
			background: #fff;
			box-sizing: border-box;
			font-size: 40rpx;
			text-align: center;
			.iconfont{
				font-size: 90rpx;
				line-height: 200rpx;
				margin-right: 40rpx;
				color: #999;
				display: inline-block;
				vertical-align: top
			}
			.text{
				font-size: 32rpx;
				color: #999;
				line-height: 200rpx;
				display: inline-block;
				vertical-align: top
			}
		}
	}
}
</style>
