<template>
	<view class="content">
		<block v-if="logisticArr.length > 0">
			<view class="top">
				<view class="top-logo">
					<image :src="orderExpress.cover ? orderExpress.cover : '/static/imgs/Nologistic.png'" mode="aspectFill"></image>
				</view>
				<view class="top-cont">
					<view class="top-name">
						{{orderExpress.express_name}}
						<view class="top-no">
							{{orderExpress.express_number}}
						</view>
					</view>
					<view class="top-type">
						[邮寄资料] <text>{{orderExpress.type}}</text>
					</view>
				</view>
			</view>
			<view class="white">
				<view class="address">
					<view class="address-tips">
						收
					</view>
					<view class="address-text">
						{{address.full_address}}
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item, index) in logisticArr" :key="index">
						<view class="item-name">
							<view class="item-status">
								{{item.status}}
							</view>
							<view class="item-time">
								{{item.time}}
							</view>
						</view>
						<view class="item-text">
							{{item.context}}
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="pack-center pages-hint" v-else>
		    <image src="/static/imgs/Nologistic.png"></image>
		    <view>暂无物流信息</view>
		</view>
	</view>
</template>

<script>
	import { logistic } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				logisticArr: [], // 物流列表
				orderExpress: '',
				address: ''
			}
		},
		
		onShow() {
			// 获取物流列表
			this.logisticInfo()
		},
		
		methods: {
			// 物流列表
			logisticInfo(){
				logistic(this.$Route.query.express).then(res => {
					this.logisticArr  = res.logistics
					this.orderExpress = res.orderExpress
					this.address = res.address
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		background-color: $mian-color;
		padding: $padding + 10 $padding $padding * 2;
		box-sizing: border-box;
		display: flex;
		.top-logo {
			background-color: #ffffff;
			border-radius: $radius-m;
			width: 100rpx;
			height: 100rpx;
			padding: 10rpx;
			box-sizing: border-box;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.top-cont {
			color: #ffffff;
			width: calc(100% - 130rpx);
			margin-left: 30rpx;
			.top-name {
				display: flex;
				padding: 10rpx 0;
				.top-no {
					font-size: $title-size-m;
					padding-left: $padding;
					opacity: .9;
				}
			}
			.top-type {
				font-size: $title-size-m;
				text {
					padding-left: 20rpx;
				}
			}
		}
	}
	
	.address {
		color: #333333;
		font-size: $title-size-m;
		display: flex;
		padding: $padding $padding 0;
		.address-tips {
			width: 54rpx;
			text-align: center;
			height: 54rpx;
			line-height: 54rpx;
			border-radius: 50%;
			background-color: #EEEEEE;
			margin-left: -15rpx;
			font-size: $title-size-sm;
		}
		.address-text {
			width: calc(100% - 74rpx);
			margin-left: 20rpx;
			padding-top: 10rpx;
		}
	}
	
	.white {
		margin-top: -30rpx;
		background-color: #ffffff;
		border-radius: $radius;
	}
	
	.list {
		padding: 0 $padding;
		box-sizing: border-box;
		.item {
			padding-bottom: $padding + 10;
			padding-left: $padding + 10;
			box-sizing: border-box;
			position: relative;
			&:first-child {
				padding-top: $padding;
			}
			&::after {
				position: absolute;
				content: '';
				background-color: #DDDDDD;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				left: 0;
				top: calc(50% - 6rpx);
				z-index: 3;
				border: 2rpx solid #ffffff;
			}
			&::before {
				position: absolute;
				content: '';
				background-color: #F0F0F0;
				width: 2rpx;
				height: 100%;
				border-radius: 50%;
				left: 8rpx;
				top: 0;
			}
			.item-name {
				display: flex;
				.item-status {
					font-weight: 600;
					padding-right: 20rpx;
				}
				.item-time {
					color: #868686;
				}
			}
			.item-text {
				color: #868686;
				font-size: $title-size-sm;
				line-height: 40rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>